MacでClosure Compilerを簡単にするAntの導入

GoogleのClosure CompilerはJavaScriptの圧縮ツールですが
コメントや改行の除去以外にも、複数のJSファイルを結合することもできます。

開発時は機能ごとにファイルを分けて管理して
リリース時には1ファイルに結合、という感じに使ってます。

ただ、ターミナルからいちいちコマンドを打つのが面倒だったのですが
Antというビルドツールを導入すると、コマンド一発で圧縮と結合を行えます。

Macには、JavaとAntがすでにインストールされてるので
Ant用の設定ファイルをつくってしまえば即利用できます。
サンプルも用意したのでぜひ試してみてください。

Closure Compilerのインストール

Closure Compilerをまだ持っていなければ
下記URLからダウンロードして、解凍後に任意の場所へ移してください。

http://closure-compiler.googlecode.com/files/compiler-latest.zip

使用にはJava 1.6が必要です。
優先するバージョンを変更するには
アプリケーション>ユーティリティ>Java Preferences.appから行います。


Java SE 6を一番上にします。
リスト内になければ、ソフトウェアアップデートをかけて最新にしてください。

コマンドラインからバージョンを確認するには
アプリケーション>ユーティリティ>ターミナル.appを起動して次を入力します。

java -version

いちおうAntもチェック。

ant -version

エラーがでなければ、準備が整いました。

コンパイルサンプル

http://dl.dropbox.com/u/498311/closure-compiler-sample.zip

index-dev.htmlをブラウザで開くと、カーソルキーでキャラクターを動かせるサンプルがでます。
JSはこんな感じで、5ファイルに分けてます。

<script src="./src/ui/Keyboard.js"></script> 
<script src="./src/display/Element.js"></script> 
<script src="./src/display/Sprite.js"></script> 
<script src="./src/display/Player.js"></script> 
<script src="./src/init.js"></script> 

いっぽうのindex.htmlは、5ファイルを結合した "./bin/app.js" を読み込ませようとしてますが
まだ作成していないためエラーになります。

ちなみに、この5ファイルをClosure Compilerで
結合・圧縮するならこんなコマンドになります。

java -jar compiler.jar --js ./src/ui/Keyboard.js --js ./src/display/Element.js --js ./src/display/Sprite.js --js ./src/display/Player.js --js ./src/init.js --js_output_file ./bin/app.js
ファイル数によってはさすがに面倒です。
これを設定用のXMLに記述して、Antにやってもらおうというわけです。

Antを使ったコンパイル(圧縮)の手順

フォルダ内の build.xmlテキストエディタで開きます。
AntはこのXMLファイルの設定に従ってビルドを行います。

圧縮対象のJSはすでに記述してあるので、Closure Compilerの場所を追記します。

<taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask" classpath="コンパイラまでのパス"/>

要素の classpath属性を適宜修正してください。
サンプルでは、/Developer/SDKs/compiler-latest/compiler.jar にあると仮定してます。

XMLの修正が完了したら、ターミナルでサンプルファイルまで移動します。
移動にはcdコマンドで "移動先のパス" を入力します。

サンプルファイルをダウンロードフォルダで解凍したのならば、こんな感じです。

cd Downloads/closure-compiler-sample

無事に移動できたら、ant と入力して実行します。

処理が進んで BUILD SUCCESSFUL と表示されたら成功です。
サンプルファイル内に bin/app.js が出力されているでしょうか?
これでindex.htmlのJSも正常に動くようになってると思います。

まとめ

build.xmlのファイル名を変えた場合は、ant -f ファイル名.xml とします。

コンパイル対象のJSが増えたりしたら、build.xmlを修正します。
指定はファイル毎に追記し、ディレクトリ単位での指定はできません。

また結合順もこれに従うので注意が必要です。
(HTMLのscript要素の並びと同等と考えれば大丈夫です)

オプションとして、コンパイルレベルの指定や型チェックなどもありますが
Antでの設定項目はいまのところ限られてるようです。

ですので、この使い方は開発支援というよりは
リリースファイルの作成用に的を絞った使い方です。