質問編集履歴
2
gulpfile.jsを書き忘れておりました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
|
|
181
181
|
|
|
182
182
|
|
|
183
|
-
```
|
|
183
|
+
```
|
|
184
184
|
|
|
185
185
|
[13:17:10] Starting 'sass'...
|
|
186
186
|
|
|
@@ -212,6 +212,92 @@
|
|
|
212
212
|
|
|
213
213
|
|
|
214
214
|
|
|
215
|
+
### gulpfile.js
|
|
216
|
+
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
const gulp = require('gulp'),
|
|
220
|
+
|
|
221
|
+
rename = require('gulp-rename'),
|
|
222
|
+
|
|
223
|
+
replace = require('gulp-replace'), // 文字列置換をする(ここでは、コンパイル後のcssの余分な改行余白を削除として使用)
|
|
224
|
+
|
|
225
|
+
plumber = require('gulp-plumber'), // エラー時の強制終了を防止
|
|
226
|
+
|
|
227
|
+
notify = require('gulp-notify'); // エラー発生時にデスクトップ通知する
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
const autoprefixer = require("gulp-autoprefixer"), // ベンダープレフィックスの自動付与
|
|
232
|
+
|
|
233
|
+
sass = require("gulp-sass"),
|
|
234
|
+
|
|
235
|
+
sassGlob = require('gulp-sass-glob'), // 複数のimportを短く設定できる
|
|
236
|
+
|
|
237
|
+
header = require('gulp-header'), // CSSの先頭に記述できる
|
|
238
|
+
|
|
239
|
+
csscomb = require('gulp-csscomb'), // CSSプロパティ記述順序を設定する
|
|
240
|
+
|
|
241
|
+
cmq = require('gulp-combine-media-queries'), // Media Queruesをまとめてくれる(設定が必要：152行目をコメントアウト)
|
|
242
|
+
|
|
243
|
+
stripdebug = require('gulp-strip-debug'), // consoleを消してくれる
|
|
244
|
+
|
|
245
|
+
uglify = require('gulp-uglify'); // ファイルを圧縮(min化)してくれる
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
/// 監視フォルダ ////////////////////////////////////////////
|
|
252
|
+
|
|
253
|
+
gulp.task("watch", () => {
|
|
254
|
+
|
|
255
|
+
gulp.watch("assets/**/*.scss", gulp.series("sass"));
|
|
256
|
+
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
261
|
+
/// scssコンパイル ////////////////////////////////////////////
|
|
262
|
+
|
|
263
|
+
gulp.task("sass", () => {
|
|
264
|
+
|
|
265
|
+
return gulp.src('./assets/scss/**/*.scss')
|
|
266
|
+
|
|
267
|
+
.pipe(plumber({
|
|
268
|
+
|
|
269
|
+
errorHandler: notify.onError("Error: <%= error.message %>")
|
|
270
|
+
|
|
271
|
+
}))
|
|
272
|
+
|
|
273
|
+
.pipe(csscomb())
|
|
274
|
+
|
|
275
|
+
.pipe(sassGlob())
|
|
276
|
+
|
|
277
|
+
.pipe(autoprefixer({ cascade: false }))
|
|
278
|
+
|
|
279
|
+
.pipe(cmq())
|
|
280
|
+
|
|
281
|
+
.pipe(sass({ outputStyle: 'compact' }).on('error', sass.logError)) // compactまたは、compressed
|
|
282
|
+
|
|
283
|
+
.pipe(header('@charset "UTF-8";\n\n'))
|
|
284
|
+
|
|
285
|
+
.pipe(replace("}\n\n", "}\n"))
|
|
286
|
+
|
|
287
|
+
.pipe(gulp.dest('./css/'));
|
|
288
|
+
|
|
289
|
+
});
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
/// Gulpコマンド ////////////////////////////////////////////
|
|
294
|
+
|
|
295
|
+
gulp.task('default', gulp.series(gulp.parallel('sass', 'watch')));
|
|
296
|
+
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
215
301
|
### gulp3系時とソース自体は変えてません。
|
|
216
302
|
|
|
217
303
|
|
1
タグ追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|