gulp.watch() の上位互換 Gulp-Watch パッケージを使う

gulp.watch() はファイルの新規生成を検知できないようなので、ファイルの新規生成も検知できる Gulp-Watch というパッケージを使うことにする。

$ npm i -D gulp-watch

以下のような書き方になる。

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();

gulp.task('watch', () => {
  $.watch('./src/css/**/*.scss', () => {
    return gulp.start(['css'])
  });
  $.watch('./src/js/**/*.js', () => {
    return gulp.start(['js']);
  });
  
  // 通常の gulp.watch() だとこんな感じ
  // gulp.watch('./src/css/**/*.scss', ['css']);
  // gulp.watch('./src/js/**/*.js', ['js']);
});

ココでは2つの監視タスクを1度に実行している。SCSS ファイルを書き換えたら「css」タスクを、JS ファイルを書き換えたら「js」タスクを呼ぶ、という塩梅だ。

通常の gulp.watch() と異なり、呼び出すタスクは gulp.start() を用いて指定している。実際の挙動は通常の gulp.watch() と変わらないので、特に意識する必要はない。