gulp には標準で watch というメソッドがありこれを使えば
簡単にファイルを監視して, 変更時に特定の処理を行うといったことができます.

Usage

使い方は

gulp.watch(["監視したいファイル"], ["行いたいタスク"])  

です.

Example

実際に gulp.watch を使った例です.

gulpfile.js に下記のコードを書いて

var gulp = require("gulp");

gulp.task("change", function() {  
  console.log("変更されたよ")
});

gulp.task("watch", function() {  
  var targets = [
    './scripts/**/*.js',
  ];
  gulp.watch(targets, ['change']);
});

$gulp watch を実行すると ./scripts/**/*.js にあるファイルを変更した際に change タスクが実行されて, console に "変更されたよ" というメッセージが表示されます.

EvetListener Example

イベントリスナー形式で同じようなことを実現できます.

var gulp = require("gulp");

gulp.task("change", function() {  
  console.log("変更されたよ")
});

gulp.task("watch", function() {  
  var targets = [
    './scripts/**/*.js',
  ];
  var watcher = gulp.watch(targets, ['change']);
  watcher.on('change', function(evt) {
      console.log('file: ' + evt.path + ', ' + 'type: ' + evt.type);
  });
});

1. watch で watcher が生成される
2. 1 で生成された watcher に change イベントを登録
3. (ファイルが変更されると watcher の change イベントが発火する)
4. (event オブジェクトを渡されたコールバックが呼ばれる)
5. ゴニュゴニョやる

って流れになってます.

また event オブジェクトには

• path ... 変更されたファイルのパス
• type ... 変更タイプです. "added", "changed" or "deleted".

grunt と違ってこういった機能が標準であるってのが良いですね♪