gulpのwatchメソッドでscssファイルを監視し、scssファイル更新時にsassを自動コンパイルする場合、scssファイル内に記述エラーがあるとwatchメソッドは停止してしまいます。

gulp-plumberはstream中のエラーでタスクが強制停止するのを防止するパッケージです。gulp-plumberをインストールして確認します。

//gulp-plumberのインストール
npm install gulp-plumber

gulpfile.jsにgulp-plumberの処理を追加します。sassコンパイル時にsrcメソッドでscssファイルを取得する処理の後にgulp-plumberを実行します。

//gulpfile.js
const gulp = require('gulp');
const plumber = require('gulp-plumber');  //gulp-plumberの読み込み
const sass = require('gulp-sass');

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(plumber())  //gulp-plumberの実行
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

function watchFiles() {
  gulp.watch('./src/scss/**/*.scss').on('change', styles);
}

gulp.task('default', gulp.series(styles, watchFiles));

scssファイル監視中、scssファイルの更新で意図的にエラーを発生させます。変数名の記述ミスで定義されていない変数名を参照します。

//_access.scss
@charset "UTF-8";

$fontColor: #ff0000;

.p-access {
  text-align: center;

  &-ttl {
    //変数名の記述ミス
    color: $fontcolor;
  }
}

するとgulp-plumberがエラーを検知してwatchメソッドの停止を防止します。再度エラーのない状態でscssファイルを更新するとwatchメソッドが動作して正常にsassがコンパイルされます。

次にgulp-notifyをインストールして、gulp-plumberで検知したエラーをコマンドラインとデスクトップに通知します。

//gulp-notifyのインストール
npm install gulp-notify

gulpfile.jsにgulp-notifyの処理を追加します。gulp-plumberで検知したエラーはgulp-plumberのオプションerrorHandlerで取得できます。

//gulpfile.js
const gulp = require('gulp');
const plumber = require('gulp-plumber');  //gulp-plumberの読み込み
const notify = require('gulp-notify');  //gulp-notifyの読み込み
const sass = require('gulp-sass');

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      plumber({  //gulp-plumberの実行
        errorHandler: notify.onError('<%= error.message %>'),  //gulp-notifyの実行
      })
    )
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

function watchFiles() {
  gulp.watch('./src/scss/**/*.scss').on('change', styles);
}

gulp.task('default', gulp.series(styles, watchFiles));

再度scssファイル監視中に、scssファイルの更新でエラーを発生させます。gulp-notifyによってコマンドラインとデスクトップにエラーが通知されます。