gulp4（2019）でつまづいたこと

gulp v.4（2019年）でつまづいてしまったことリストの忘備録を残しておく。

（１）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’)のほうが好ましいらしい。

（２）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が止まらないで続けてファイル監視をしてくれるようになった。