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

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

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

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

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

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

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

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

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

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

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

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

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

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

あなたにはJavaScriptファイルのグループがあるとします。これらのファイルを1つのファイルにマージし、その後、そのファイルの最小化が実行されるようにしてください。私たちのファイルのいずれかが変更されたときにタスクが実行されるようにしてください。