Gruntってアレですね、JSでホゲホゲっと設定ファイルを書いてJSとかCSSのファイルをminify/unifyとかするヤツです。
最近よく聞くので、機会があったら使ってみようと思っていたのですが、最近とあるウェッブページをPlay!Frameworkで作ってみたりしていたので、それのJS/CSSのビルドに使ってみました。
もろもろやりたいことを実現したらこんな感じに。本当はもうちょっと綺麗に書けるのではないかと思います。
https://gist.github.com/3738650
僕のやりたかったことは、
- JS/CSSのunify
- JS/CSSのminify
- JS/CSSのgzip (for Play!)
- timestampをつけたファイル名の生成
- 作成されたfileどものclean
- conf, templateの文字列置換。@@timestampをtimestampに置換するなど。 (for Play!)
だったのですが、pluginっぽいものを導入したら全部いけました。おおむねのサイトで必要になるJS/CSSのpreprocessingは大体いけそうな感じですね。いい感じですね。
timestampをつけたり何だりしているのは、該当ウェッブページでは「max-ageに一年後を指定してずーっとブラウザキャッシュにのせてもらって、更新があった場合はファイル名を変える」というよくあるキャッシュ戦略をとっているからですね。このブラウザキャッシュに頼ったキャッシュ戦略はスマートフォンではそこまでいけてない（主にiOSのブラウザキャッシュがオンメモリ限定だったり、デスクトップブラウザよりブラウザキャッシュ全体のサイズが小さいため比較的早く追い出しが発生することから）と思うのですが、JSをlocalStorage/WebSQLにキャッシュする x3.js (x3-js - JavaScript rapidly reloader - Google Project Hosting) を使うなどしてもうちょっとマシになるよう努力しています。x3.js、素敵です。
ちょっと脱線しましたが、Grunt自体はよいツールです。何がよいのかというと、
- サーバサイドのプログラミング言語に依存しない
- JSで完結する
という所ですね。こういうツールが特定のフレームワーク/言語前提で書かれていると、「えーそれじゃ俺ら使えないじゃーん」「えー他の言語でサーバサイド書きたい場合に移行できないじゃーん」問題が発生するのですがGruntの場合はNode.jsというJavaScriptで小粒なツールを作るための環境にのっかっているので誰でも気楽に使えます。JSやらCSSのファイルをゴニョゴニョするためだけに他のプログラミング言語に登場してもらうのは忍びない、という奥ゆかしい事情もありますね。
とはいえ、v0.4になったらまた微妙にインタフェースが変わるとか、現存しているpluginのインタフェースに今ひとつ統一感がないとか「うーむ…数ヶ月後には俺の書いたgrunt.jsは動かないんじゃないだろうか...」という気分になってしまう部分も多いので、その辺は今後に期待したいところです。
