Gulpでのドキュメント変更の監視

何らかの変換が必要な度にコンソールでコマンドを呼び出すのはあまり便利ではありません。コードを書いていると、これを非常に頻繁に行わなければならないからです。

そのため、Gulpにはファイルの変更を監視するための特別な関数 watch が組み込まれています。監視対象のファイルのいずれかが変更されると、対応するタスクが自動的に起動します。

LESSからCSSへの変換を例に見てみましょう。まず、必要なものをすべて接続します：

javascriptlet {src, dest, watch} = require('gulp');
let less = require('gulp-less');

次に、変換用のタスクを作成します：

javascriptfunction task(cb) {
  return src('src/*.less')
    .pipe(less())
    .pipe(dest('dist'));
}

次に、匿名関数をエクスポートします。この内部でファイルの変更を監視し、その場合に私たちのタスクを呼び出します：

javascriptexports.default = function() {
  watch('src/*.less', task);
};

コマンドラインで起動後、「永久」タスクが実行された状態になります。これは、このターミナルに他のコマンドを入力できなくなることを意味します。このようなタスクの実行を中断するには、ターミナルで Ctrl + C の組み合わせを押します。

異なるファイルグループを監視し、それらに異なるタスクを関連付けることができます：

javascriptexports.default = function() {
  watch('src/*.less', task1);
  watch('src/*.sass', task1);
};

また、一つのグループに対して一連のタスクを実行することもできます：

javascriptexports.default = function() {
  watch('src/*.less', series(task1, task2));
};