grunt-contrib-watchで、JavaScriptやCSSの更新時に自動でビルドする。

Gruntで、WEB開発の工程を自動化できることを紹介しました。
JavaScriptやCSSの開発工程を自動化するGruntとは何か？

grunt-contrib-watchでビルドの開始まで自動化

Gruntに設定を書けば全ての工程は自動化できます。コマンド一発でビルド完了です。

grunt

しかし、コマンド一発は叩かなくてはいけません。開発をしていると、コマンド一発すらも面倒くさくなります。
そこで、grunt-contrib-watchです。

gruntjs/grunt-contrib-watch · GitHub
grunt-contrib-watchをGruntの設定に組み込めば、ファイルの更新を監視し、変更があった場合にビルドを自動的におこなってくれます。

package.jsonの設定

grunt-contrib-watchを使うために、package.jsonに依存情報を加えていきます。

{
  // ...(略)...
  "devDependencies": {
    "grunt": "~0.4.4",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.6.1"
  }
}

開発環境ごとに必要なパッケージに加えて、grunt-contrib-watchを加えます。
その後に、npmコマンドでパッケージをインストールしておきます。

npm install

これで、grunt-contrib-watchが使える状態になりました。

Gruntfile.jsの設定

続いて、ビルド工程に組み込むために、Gruntfile.jsを変更します。具体的には、watchを追加します。

module.exports = function(grunt) {
	grunt.initConfig({
		uglify : {
			// ...(略)...
		},
		watch : {
			files : ['*.js'],
			tasks : ['uglify']
		}
	});
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default', ['uglify']);
};

今回は、拡張子がjsのファイルを監視し、変更があった場合にuglifyタスクを実行する、という設定です。
何を監視対象にするかは、環境によって違います。ビルド後に生成されるファイルを監視対象にすると、ビルドが循環してしまう場合があるので注意です。

ファイルの更新監視を実行する

ここまで設定したら、ファイルの更新の監視を実行します。
gruntはパラメータにタスク名を指定できますので、今回はwatchタスクを指定します。

grunt watch

これで、ファイルの監視が始まります。
実際に、監視しているファイルの更新が検知されると、設定されているタスクが実行されます。ここでは、uglifyタスクが実行されます。

$ grunt watch
Running "watch" task
Waiting...
>> File "main.js" changed.
Running "uglify:main" (uglify) task
File main.min.js created: 69 B → 63 B
Done, without errors.
Completed in 0.757s at Mon Apr 07 2014 08:06:04 GMT+0900 (JST) - Waiting...

今までは、watchrというgemでファイルの更新を監視して、Mavenのビルドを実行していました。Mavenは起動に数秒かかるので、gruntの方がビルドが早くて快適でした！