Web制作の効率化に役立つGulpを使って、CSSファイルの容量を軽量化する方法を以下のページに書きました。

ところで、軽量化する元となるファイルを変更するたびにタスクを毎度実行するのは手間がかかりますね。そこで、特定のファイルが変更されたら自動的にタスクを実行するように監視する「gulp-watch」を使ってもっと効率化させます。

以下にその流れを書きましたので、興味がありましたらご参考ください。

gulp-watchのインストール

コマンドプロンプト（またはターミナル）を起動して、gulpがインストールされている作業フォルダ（今回はデスクトップ上のhtdocsフォルダとします）内で以下のコマンドを実行します。

npm install --save-dev gulp-watch

gulp-watchを読み込む

インストールが完了したら、作業フォルダ内にある「gulpfile.js」ファイルをテキストエディターで開いて、以下のように書いてgulp-watchを読み込みます。

var gulp = require('gulp'),
 CSSmin = require('gulp-cssmin'),
 watch = require('gulp-watch');

CSSファイルの容量を軽量化するために必要な「gulp-cssmin」はインストール、読み込み済みとします。gulp-cssminについて知りたい方は、以下のページに書いてありますのでご参考ください。

監視用のタスクを書く

次に、同じく「gulpfile.js」ファイルに以下のように監視用のタスクを書きます。

gulp.task('watch', function () { //「watch」タスクについて書く
 watch('style.css', function () { //「style.css」ファイルを監視する
  gulp.start( 'cssmin' ); //ファイルの変更があれば「cssmin」タスクを実行する
 });
});

監視を実行しよう

コマンドプロンプト（またはターミナル）を起動して、作業フォルダ内で以下のコマンドを実行します。

gulp watch

コマンドを実行すると、以下のようにwatchタスクが実行されます。

ここで、作業フォルダ内のstyle.cssファイルを変更して保存すると、自動でcssminタスクが実行されてCSSファイルの容量が軽量化されます。

watchタスクが動いている間は、style.cssファイルを変更して保存するたびに自動でcssminタスクが実行されます。

つまり、watchタスクを実行して「style.cssファイルが変更されるまで待機している状態」とイメージするとわかりやすいかもです。

今回はstyle.cssファイルを監視してCSSファイルの容量を軽量化するcssminタスクを実行する方法だけ書きましたが、もちろん応用次第で他のタスクと組み合わせることもできます。

おまけ：複数のファイルを監視したい場合はこう書く

監視したいファイルが複数ある場合は、以下のように書けばOKです。

複数のファイルを監視

gulp.task('watch', function () {
 watch( ['a.css', 'b.css'], function () { //監視するファイルを複数指定
  gulp.start( 'cssmin' );
 });
});

特定の拡張子のファイル全部なども監視できます。

拡張子でファイルを監視

gulp.task('watch', function () {
 watch( '*.css', function () { //拡張子が「css」のファイル全部を監視する
  gulp.start( 'cssmin' );
 });
});

まとめ

以上がgulp-watchの使い方でした。さらに詳しい使い方を知りたい場合はドキュメントに書いてありますので、ご参考ください。