Corredor

ウェブ、プログラミングの勉強メモ。

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.pathsrc から dist に書き換えて、del パッケージでファイルを削除する、ということをしている。

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

フロントエンドエンジニアのための現在とこれからの必須知識

フロントエンドエンジニアのための現在とこれからの必須知識

  • 作者: 斉藤祐也,水野隼登,谷拓樹,菅原のびすけ,林優一,古沢宏太
  • 出版社/メーカー: マイナビ出版
  • 発売日: 2016/01/28
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る