gulp-sass, gulp-plumberを使うときの注意

gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。

.scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。
.pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。

以下のようにgulpfileを書いたところ解決。

gulpfile.js

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    plumber = require('gulp-plumber')
    ;

gulp.task('compile:sass', () => {
  return gulp.src('src/**/*.scss')
    .pipe(plumber({
      errorHandler: function(err) {
        console.log(err.messageFormatted);
        this.emit('end');
      }
    }))
    .pipe(sass())
    .pipe(gulp.dest('dist'))
  ;
});

gulp.task('watch', () => gulp.watch('src/**/*.scss', ['compile:sass']));

ポイントはplumber のオプションでerrorHandlerを書き換えてるとこ。

gulp, gulp-sass, gulp-plumberのサンプルコードは、結構出回ってるけど、あまり上の書き方を見かけないところを見ると、以前は発生しなかった問題なのかも。