2012年6月21日木曜日

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.jsstyle.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 をインストールしておく必要があります。

コメントを投稿