Closure LibraryをClosure Compilerで圧縮（設定編）

Google Chrome ExtensionのHistory Plusを開発しているときのMemo. 開発段階では、Closure LibraryのRepositoryに直接Linkして（下記のようにheaderに書いて）利用していた。

< 2011/10/08 modified >
※本格的に開発する場合は、localにcheckoutしてdeps.jsを作った方が圧倒的に開発効率がいい。deps.jsはこちらの記事を参考に。

次の段階として、Releaseに向けてClosure Compilerを使って圧縮する方法を試してみた。

環境はWindows 7 Home Premium 64bit （英語版）

参考にした記事は下記。Subversion Client "TortoiseSVN"のInstallとかも下記を参考に。

まずはpythonのInstall. Official SiteからPython 2.x系の最新版をDownload. 現時点では、2.7.2が最新。

Installが完了したらCommandを叩く。cmd.exeを使うよりPowerShellを使った方が見やすい。詳しくは前の記事を参考に。

開発用Folderに移動
> cd "C:\Users\Owner\Develop\Google Chrome Extension\"

※このFolderにclosure-libraryがCheckoutされている。↓Folderの階層構造はこんな感じ。

まずは、動作確認も含めて、一つのJS Fileに統合するCommandを実行してみる。
> C:\Python27\python.exe
    "closure-library\closure\bin\build\closurebuilder.py"
    --root="closure-library"
    --root="History+\src\js"
    --namespace="historyplus.SearchController"
    --output_mode=script
    --output_file="History+\history.combine.js"

見やすくするために改行してあるけど、実際は１行で実行。これを実行すると、History+\src\jsにあるjs fileの中から
goog.provide('historyplus.SearchController');
の記述があるFileを元に結合してくれる。

各Optionの意味はclosurebuilder.pyのSource Code（のHelp）が一番詳しい。

この時点でhistory.combine.jsは1,207KB。

goog/base.jsを削除して、history.jsをhistory.combine.jsに置き換えれば動くはず。

次はClosure Compilerを使ってScript Fileを圧縮。

Official Siteの「Download the application」をClickして、「compiler-latest.zip」をDownloadする。

Javaで動くのでJRE(Java Runtime Environment)を事前にInstallしておく必要あり。Java Official Site.

compiler.jarをCurrent Directoryに置いて次のCommandを実行。

> C:\Python27\python.exe
   "closure-library\closure\bin\build\closurebuilder.py"
   --root="closure-library"
   --root="History+\src\js"
   --namespace="historyplus"
   --output_mode=compiled
   --compiler_jar="compiler.jar"
   --output_file="History+\history.min.js"

すると下記Error

python.exe : closure-library\closure\bin\build\closurebuilder.py: Scanning paths...
At line:1 char:23
+ C:\Python27\python.exe <<<< closure-library\closure\bin\build\closurebuilder.py --root=closure-library --root=History+\src\js --namespace=history
plus --output_mode=compiled --compiler_jar=compiler.jar --output_file=History+\history.min.js
    + CategoryInfo          : NotSpecified: (closure-library...anning paths...:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError

closure-library\closure\bin\build\closurebuilder.py: 771 sources scanned.

closure-library\closure\bin\build\closurebuilder.py: Building dependency tree..

Traceback (most recent call last):
File "closure-library\closure\bin\build\closurebuilder.py", line 254, in <module>
    main()
File "closure-library\closure\bin\build\closurebuilder.py", line 239, in main
    options.compiler_flags)
File "C:\Users\Owner\Develop\Google Chrome Extension\closure-library\closure\bin\build\jscompiler.py", line 48, in Compile
    if not (distutils.version.LooseVersion(_GetJavaVersion()) >
File "C:\Users\Owner\Develop\Google Chrome Extension\closure-library\closure\bin\build\jscompiler.py", line 29, in _GetJavaVersion
    proc = subprocess.Popen(['java', '-version'], stderr=subprocess.PIPE)
File "C:\Python27\lib\subprocess.py", line 679, in __init__
    errread, errwrite)
File "C:\Python27\lib\subprocess.py", line 893, in _execute_child
    startupinfo)
WindowsError: [Error 2] The system cannot find the file specified

何やらjava -versionを実行するときにErrorになっているっぽい。JREをInstallしたときに自動でPATHに追加されないんだっけ？と思いながら環境変数に追加。

Computer → Properties → Advanced system settings → Environment Variables ... → System variables → Path → Edit...

Javaは下記FolderにInstallされていると思うのでこれを追記

C:\Program Files (x86)\Java\jre6\bin

確認はcmd.exeで「path」を入力。PowerShell ISEを起動し直して、もう一度先ほどのCommandを叩くと今度は成功。411KBまで圧縮。

次回はADVANCED_OPTIMIZATIONSをつけて、名前まで置き換えてしまう積極的な圧縮を試してみようと思う。

このとき作成したGoogle Chrome Extension "History Plus"はGitHubで公開しているので、興味がある人はそちらも参考に。

< Related Posts >