キーフレーム・ワールドワイド株式会社のオフィシャルブログ
Closure Compilerで、複数のJSファイルを結合する方法
Posted by nakano, on June 21, 2011 18:45JSでそれなりの規模のアプリをつくることはもはや珍しくありませんが
規模が大きくなると、いつくかのファイルに分けたほうが管理しやすくなります。
下記のサンプルは、カーソルキーでキャラクターを操作するだけのアプリですが
キーコードやキャラクター操作などを機能別にファイル単位で定義しています。
http://keyframe.co.jp/blog/sample/compiler-sample/index-dev.html
<body> <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> </body>
リリース時には、これを一つに結合して読ませています。
http://keyframe.co.jp/blog/sample/compiler-sample/index.html
<body> <script src="./bin/app.js"></script> </body>
ファイルの結合には、Closure Compilerを使っていますが
コマンドラインでの操作なので、ファイルが増えるとちょっとしんどいです。
面倒です。さすがにリリースの度にやってられません。
この操作をXMLで保存しておける、Antタスクを導入してみて
けっこういい感じだったので手順を紹介します。
必要な環境とツール
- Java
- JDK
- Ant
- Closure Compiler
インストール済みのものは飛ばしてください。
Closure Compilerを動かすにはJava 1.6以上が必要です。
なければ最新版を用意していください。
インストールしたらバージョンを確認します。
アクセサリ＞コマンドプロンプトで次を入力してください。
次にAntをインストールします。
http://ant.apache.org/bindownload.cgi
どれかひとつを選んでダウンロード
解凍したら任意のディレクトリに入れてください。
今回は C:\Program Files に置いたとして進めます。
次に環境変数を設定します。
コントロールパネル＞システムプロパティを起動したら、詳細設定のタブを開いてください。
パネル内の「環境変数」を開いて、システム環境変数の「新規」で変数を作成します。
変数の値に、先程のAntを格納したディレクトリを登録します。
変数値 C:\Program Files\apache-ant-1.8.2
apache-ant-x.x.x の数字は適宜調整してください。
次に、変数 PATHを編集します。
システム環境変数内に、PATHという項目があると思うので
これをダブルクリックで編集します。なければ新規に作成してください。
変数値のボックスに、Antの実行ファイルまでのパスを末尾に追記します。
※セミコロンは区切り文字です。
コマンドプロンプトに ant -version と入れてください。
もしかすると、JDKが足りないとエラー出るかもしれません。
このエラーがでたらJDKをインストールしてください。
http://java.sun.com/javase/ja/6/download.html
環境に応じたインストーラーをダウンロードしてください。
Antと同じく環境変数にJDKのパスを新規登録します。
変数値 C:\Program Files\Java\jdk1.6.0_24
数字は適宜調整してください。
再びコマンドプロンプトで ant -version を入れてバージョンが表示されれば成功です。
これでようやく環境がそろいました。
余談ですけれどもMac OSXだったらこれ全部インストールされてます。
便利ですね。
最後にClosure Compilerを用意します。
http://closure-compiler.googlecode.com/files/compiler-latest.zip
解凍したら任意のディレクトリに入れてください。
Closure Compilerの詳しい使い方はここでは紹介しきれないので割愛いたします。
冒頭のサンプルファイルをzipにしてあるので、さっそく試してみてください。
compiler-sample.zip
Closure Compiler単体で圧縮・結合するならこんな感じですが、、、
この処理をAntタスクにやってもらうためにXMLファイルを作ります。
サンプル内のbuild.xmlが、それです。
圧縮・結合するファイルはすでに定義してあるので、
3行目の
では圧縮してみましょう。
コマンドプロンプトで、zipを解凍したディレクトリまで移動してください。
Cドライブ直下ならば次のように入力します。
あとは Antコマンドを実行するだけです。
build.xmlがデフォルトのファイル名なので変更してなければ、antと入れるだけです。
BUILD SUCCESSFULとでて、bin ディレクトリが作成されます
1ファイルに結合されたファイルが無事に生成されたでしょうか。
JSファイルの構成が変わったら、build.xmlの
この程度の規模ではあまり最適化の恩恵はありませんが
複数のファイルをまとめてくれるだけで最高のツールです。
さらにコメントもすべて除去してくれるので、もう躊躇しながらコメントを書くこともありません。
逆に、特定のコメントやライセンス表記などを残して圧縮といった設定もできます。
メンテナンス性を保ちながら、リリースファイルは1本という
まさにコンパイルという名に相応しいツールだと思います。