coffee, lessなプロジェクトをgruntで便利に

最近ようやくcoffeescriptにもLESSにも慣れてきました。で、そろそろgruntを活用しようかなと先月くらいから使ってみてますが便利です。

1. *.less →(コンパイル)→ style.css →(圧縮)→ style.min.css
2. *.coffee →(コンパイル)→ *.js →(連結)→ app.js →(圧縮)→ app.min.js
3. *-test.coffee →(コンパイル)→ *-test.js →(連結)→ tests.js
4. app.min.js, tests.jsを読み込んでqunitでテスト
5. index.htmlではapp.min.jsとstyle.min.cssを読み込む

こんなかんじの事を簡単にできます。テストもcoffeescriptで書けて良いです。

現在リリースされている grunt v0.3.9 では coffee, less, sqwishに対応したタスクが無いので、カスタムタスクを grunt.js 内で登録して使用してます（pluginとして環境に登録はしていない）。

$ grunt watch &

lessやcoffeeファイルの編集を監視して、自動的にコンパイルして連結して圧縮してくれます。

$ grunt clean

出力ファイルやフォルダを全て削除します。

$ grunt

lessやcoffeeファイルをコンパイルして連結して圧縮して、圧縮したjsを使ってqunitでテストしてくれます。

フォルダ構成

私の場合はほぼ全てのプロジェクトがGoogle App Engine/Javaプロジェクトで、mavenを使っているのでフォルダ構成は次のような状況です。

• src/main/coffee
  • プロダクト用の coffee ファイル
• src/main/less
  • less ファイル
• src/test/coffee
  • テスト用の coffee ファイル
• src/test/qunit
  • qunit.css, qunit.js, sinon.js, qunit.html(war/js/app.min.js, target/tests.js)

出力先となるフォルダ・ファイル。

• target/js
  • プロダクト用の coffee ファイルをコンパイルしたJavaScriptファイル
• target/js.test
  • テスト用の coffee ファイルをコンパイルしたJavaScriptファイル
• target/tests.js
  • テスト用のcoffee ファイルをコンパイルしたJavaScriptファイルを連結したJavaScriptファイル
• war/css/style.css
  • lessをコンパイルしたcssファイル
• war/css/style.min.css
  • lessをコンパイルしたcssファイルを圧縮したファイル
• war/js/app.js
  • プロダクト用のcoffeeファイルをコンパイルしたJavaScriptファイルを連結したJavaScriptファイル
• war/js/app.min.js
  • プロダクト用のcoffeeファイルをコンパイルしたJavaScriptファイルを連結したJavaScriptファイルを圧縮したJavaScriptファイル

grunt.js

次がgruntの定義ですが、これを利用するには、nodejs, npm, phantomjs が必要で、npmでは grunt, less, coffee-script, sqwish をインストールしておく必要があります。