gulp4(2019)でつまづいたこと
gulp v.4(2019年)でつまづいてしまったことリストの忘備録を残しておく。
(1)watchのタスクが動かない
【解決策】
gulp.watch('src/scss/**/*.scss',['sass']); // gulp 3 の記法
↓
gulp.watch(['src/scss/**/*.scss'], gulp.parallel('sass')); // gulp 4 の記法
gulp 3 では、watchはただ単に['sass']のように指定すればよかったのだが、gulp 4からは gulp.parallel('sass'))のような記法が必要となった。 並行処理が不要であれば、gulp.series('sass')や、gulp.task('sass')でも良いらしいが、並行処理ができるならばgulp.parallel('sass')のほうが好ましいらしい。
(2)watchのタスクが止まる
gulp 3 の書き方では特にコールバック的なreturnは不要だったが、エラーを返さないなりのものに対する自作関数に対してもreturnを入れなければならないようだ(仮定)
例えば以下のようなgulpファイルの構文があるとする。
gulp.task('sass',function(){ gulp.src(['src/scss/**/*.scss']) .pipe(sass()) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(autoPrefixer()) .pipe(cssComb()) .pipe(cmq({log:true})) .pipe(concat('main.css')) .pipe(gulp.dest('dist/css')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCss()) .pipe(gulp.dest('dist/css')) });
これではいくらwatchで'sass'を指定してもエラーで止まってしまう。
なので以下のように追加修正してみる。
gulp.task('sass',function(){ return gulp.src(['src/scss/**/*.scss']) .pipe( sass({ outputStyle: "expanded" }) .on("error", sass.logError) ) .pipe(plumber({ handleError: function (err) { console.log(err); this.emit('end'); } })) .pipe(autoPrefixer()) .pipe(cssComb()) .pipe(cmq({log:true})) .pipe(concat('main.css')) .pipe(gulp.dest('dist/css')) .pipe(rename({ suffix: '.min' })) .pipe(cleanCss()) .pipe(gulp.dest('dist/css')) });
見ての通り、関数に対してreturnを追加していたり、sassに対しては({outputStyle: "expanded"}).on("error",sass.logError)などを追加している。 こうするとwatchが止まらないで続けてファイル監視をしてくれるようになった。