Gulp でファイル削除を監視して変更先のファイルも削除する

Gulp の watch はファイルの追加を検出しないので、Gulp-Watch という Gulp プラグインを使っている。しかし、ファイルを削除した時に、出力先のファイルを削除するようなことは標準ではしてくれなかった。

そこで、ファイル監視の際に src 側のファイルが削除されたら dist 側のファイルも削除する、というスクリプトを書いてみようと思う。

使用するパッケージは以下のとおり。

$ npm i -D gulp gulp-load-plugins del gulp-watch

Gulp スクリプトは以下のようにする。

const gulp = require('gulp');
const $ = require('gulp-load-plugins')({
  pattern: ['del'],        // del パッケージを読み込む
  overridePattern: false,  // デフォルトのパターン ('gulp-*', 'gulp.*', '@*/gulp{-,.}*') を残す
  maintainScope: false     // スコープパッケージを階層化しない
});

gulp.task('watch', () => {
  // gulp-watch を使用し、src ディレクトリ配下の HTML ファイルを監視する
  $.watch('./src/**/*.html', (file) => {
    if(file.event === 'unlink') {
      // ファイルが削除された時は、src ディレクトリのパスを dist に置換し、出力先ファイルを削除する
      return $.del(file.path.replace(/src/, 'dist'));
    }
    // build タスクでは src 配下の HTML ファイルを dist ディレクトリに出力しているテイ
    return gulp.start(['build']);
  });
});

gulp-watch の第2引数に指定する関数には、file を引数に取れる。これが変更を検知したファイルの情報になっていて、file.event でそのファイルが追加・変更・削除されたものかが分かる。unlink というのはファイルが削除されたかリネームされたかで、その名称のファイルが存在しなくなったことを表すので、その時に file.path を src から dist に書き換えて、del パッケージでファイルを削除する、ということをしている。

それ以外の場合は、ファイル変更時に行いたい処理 (ここでは build タスク) を呼ぶようにしておく。