これからはじめる Gulp シリーズこれからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみるでgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作成しました。今回はそのタスクをベースにSCSSファイルの変更を監視してタスクを実行するようにします。

watchタスクを作る

まず、前回のgulpfile.jsをお復習いです。Sassを実行するだけのsassという名前のタスクが作られています。コメントの部分にwatchタスクを作ります。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//ここにwatchタスクを作る

gulp.task('default', ['sass']);

Gulpを使ったファイルの監視

Gulpにはgulp.watchというメソッドがあり、Grunt（grunt-contrib-watch）のように別のモジュールを入れる必要はありません。gulp.watchメソッドはAPIドキュメントに詳しく書かれています。

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

watchタスクを定義する

gulp.watchメソッドはタスク内で利用するため、まずはwatchという名前のタスクを定義します。

gulp.task('watch', function(){
    //watch task
});

ちなみにタスクの依存関係はgulp.taskメソッドの第2引数に事前に処理させたいタスクを指定できます。例えば監視を開始する前に必ず1度Sassタスクを走らせたい場合、以下のようにします。

gulp.task('watch', ['sass'], function(){
    //watch task
});

監視を定義する

gulp.watch(glob [, opts, cb]の通り、globにパスのパターンを指定し、optionに走らせるタスクを指定します。これでSCSSファイルの変更を監視し、変更された時にSassタスクが走ります。

gulp.task('watch', function(){
    gulp.watch('./src/scss/*.scss', ['sass']);
});

gulpfile.jsの完成イメージは下記の通り。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

gulp.task('watch', function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
});

gulp.task('default', ['sass']);

watchタスクを試してみる

gulpfileを保存してwatchタスクを実行してみます。

$ gulp watch
[20:16:57] Using gulpfile ~/Projects/marke.io/vccw/www/wordpress/wp-content/themes/marke.io/gulpfile.js
[20:16:57] Starting 'watch'...
[20:16:57] Finished 'watch' after 6.15 ms

この状態で監視が行われています。 試しにstyle.scssに手を加えてみます。

[20:20:54] Starting 'sass'...
[20:20:54] Finished 'sass' after 16 ms

しっかり監視していますね。監視状態を抜けるには`control + C'を押します。

変更されたファイル情報をログに流す

イベントリスナーかcallbackイベントを使って、変更されたファイルの情報をログに流すことができます。

イベントリスナーを使った方法

APIドキュメントのソースをそのまま利用します。Node.jsの.on(event, listener)メソッドについてはこちらのドキュメントを参照してください。

gulp.task('watch', ['sass'], function(){
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

これでwatchタスクを実行し、SCSSファイルに手を加えるとファイルのパスとイベントタイプがログに流れます。

File /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/src/scss/style.scss was changed, running tasks...
[20:24:45] Starting 'sass'...
[20:24:45] Finished 'sass' after 6.21 ms

ちなみにこのeventオブジェクトの中身はこれだけです。

{ type: 'changed',
  path: '/Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/src/scss/style.scss' }

これでwatchは完璧ですね。
今回はここまで。明日はgulp-connectを使ったWebサーバーを紹介します。

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す