年末に作成した「オリジナルテンプレート・ビルド環境2013年版」をGrunt 0.4.xベースへ移行しました。Grunt v0.4.0aの頃は、LiveReloadや画像最適化タスクがあまり良くない印象を持っていたのですが（詳細は忘れました...）、それぞれgrunt-contrib-livereload・grunt-contrib-imageminというプラグインが開発され、テスト利用したところ良い動作だったので、移行に至った次第です。
新しいGruntfileは、参考までにGistのhideki-a / Gruntfile.coffeeに置きました。カンマの打ち忘れ等でエラーになることが時々あったので、CoffeeScriptを利用した記述を採用しました。また、以前試したことのあるYeomanもバージョンアップされたことから、Gruntfileの記述方法などを参考にさせてもらいました。
以下、今回学んだことなどを記しておきたいと思います。
プラグインの読み込みの簡略化
ご存じの通り、Grunt 0.4.xから組み込みタスクがなくなり、全てプラグインで追加する形式になりました。そこで問題になりそうなのが、grunt.loadNpmTasks()を利用してプラグインを読み込むのを忘れそうなことです。実際に読み込みを忘れました...。
これを解決する方法の1つが、「grunt-contribさえあればOK！ | MOL」書かれているように、grunt-contribを利用する方法です。
しかし、Yeomanを見たところ、異なるアプローチ...matchdepモジュールを利用した方法が使われていました。具体的には次のような記述1行でした。
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)
どちらの方法でも良いと思いましたが、必要なプラグインだけnpm installする方が若干早かったり、容量が軽かったりといった利点があるかなと考え、Yeomanが採用している方法を使わせてもらうことにしました。
grunt-contrib-imageminで最適化したファイルを同名で上書きしたい
grunt-contrib-imageminのExample Configを見ると、最適化対象ファイルと処理後の保存パスを対にして記述するようになっていました。ただ、処理対象はたくさんあり1つ1つ記述できないこと、また最適化後は同名で上書きしてほしい（つまりImage Optimみたいに動作してほしい）といった希望がありました。
これもYeomanを見たことがきっかけで、WikiのConfiguring tasksの中に「Building the files object dynamically」の項を見つけました。これを利用することで、ワイルドカードを使用した指定が可能になるようです。解説・サンプルコードを読んだ結果、下記のようにすることで目的を達成することができました。
imagemin:
dist:
optimizationLevel: 3
files: [
expand: true
src: 'htdocs/**/*.{png,jpg,jpeg}'
]
watchで変更されたファイル名を得る方法
以前からwatchタスクで変更を検知した際に、どのファイルが変更されたかを知りたいという話が出ているかと思います。
これは、grunt-regardeプラグインで変更ファイルの監視を行うと、変更が発生した際にgrunt.regarde.changedでファイル名を得ることができるようです。