= Closure Builder = [[http://code.google.com/intl/ja/closure/library/docs/closurebuilder.html]]の訳（予定） == ClosureBuilderの使用 == Getting Started with the Closure Library illustrates how to start working with Closure Library in your project. This article outlines how to use ClosureBuilder and Closure Compiler with your project to shrink your files into one, small, minimized JavaScript file. == なぜclosurebuilder.py? == If you did the Hello World exercise in Getting Started with the Closure Library, you may have noticed that the browser made several HTTP requests during page load. For each Closure Library file required by goog.require(), a new script tag is created to load the file. Each Closure Library file is loaded as a separate HTTP request. This works well for development, since one can see the uncompiled source and use existing debugging tools. But it's not good for serving to users. Loading all these files individually is unnecessary and slow. For a live application serving to real users, you're going to want to serve a "compiled" version of your app. Closure Compiler takes your code and the required Closure Library files, strip comments, does some optimizations, and creates one larger file as output. Your server can then just serve that one file rather than many individual files. closure/bin/buildディレクトリにあるclosurebuilder.pyツールはコンパイル済JavaScriptを生成するのに使用される。これは君のファイルとclosure libraryのファイルをスキャンし、依存順序を計算する。そして、その依存順にスクリプトのファイル名あるいはその中身を出力する、あるいはClosure Compilerにそれらを渡し、コンパイル済バージョンを生成する。 == closurebuilder.pyによるClosure Libraryの依存解決 == この例では、closurebuilder.pyを使って必要なものすべてを単一のスクリプトファイルに格納する。まだやっていないようなら、Getting Startedの指示に従って、Closure Libraryをダウンロードして解凍しておくこと。 closure-libraryを格納したディレクトリの中にmyprojectという名称のディレクトリを作成しておこう。 myprojectディレクトリの中にstart.jsを作成し、以下のコードを記述する。 {{{ goog.provide('myproject.start'); goog.require('goog.dom'); myproject.start = function() { var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!'); goog.dom.appendChild(document.body, newDiv); }; // Ensures the symbol will be visible after compiler renaming. goog.exportSymbol('myproject.start', myproject.start); }}} 同じディレクトリ中に、このスクリプトを起動するためのmyproject.htmlという単純なHTMLファイルを作成する。 {{{ }}} このページをブラウザにロードすると、"Hello, World!"というメッセージが表示されるはずだ。 == 依存の計算 == closure-libraryとmyprojectを含むディレクトリで、以下のコマンドを実行してみよう。 {{{ closure-library/closure/bin/build/closurebuilder.py \ --root=closure-library/ \ --root=myproject/ \ --namespace="myproject.start" }}} 注意：これらのツールは実行可能Pythonスクリプトで、UNIXシステムでは、/usr/bin/envによって解釈される（訳注？）。Windowsの場合にはpythonドキュメントを参照すること。出力は以下のようになる（これは、標準出力と標準エラーを混ぜている）。 {{{ closure-library/closure/bin/build/closurebuilder.py: Scanning paths... closure-library/closure/bin/build/closurebuilder.py: 596 sources scanned. closure-library/closure/bin/build/closurebuilder.py: Building dependency tree.. closure-library/closure/goog/base.js closure-library/closure/goog/debug/error.js closure-library/closure/goog/string/string.js closure-library/closure/goog/asserts/asserts.js closure-library/closure/goog/array/array.js closure-library/closure/goog/dom/classes.js closure-library/closure/goog/object/object.js closure-library/closure/goog/dom/tagname.js closure-library/closure/goog/useragent/useragent.js closure-library/closure/goog/math/size.js closure-library/closure/goog/math/coordinate.js closure-library/closure/goog/dom/dom.js myproject/start.js }}} == 何をやっているのか == 各-rootフラグはClosureBuilderに.jsファイルをスキャンさせるディレクトリを示す。各ファイルについてgoog.provide及びgoog.require文がスキャンされるが、これらはnamespaceの供給と、他のファイルによって供給されるnamespaceの要求を示している。 ClosureBuilderは全ファイルをスキャンすることによって、全namespaceの依存ツリーをメモリ上に構築する。 --namespaceフラグにによってClosureBuilderは、このツリー上でmyproject.startというnamespaceから開始して、そのすべての依存を取得するように指示される。デフォルトでは、その出力は依存順のファイルリストになる。このリスト中では、すべての要求されるnamespaceは別のファイルによって供給されるが、それらはリストの中で前に現れることになる。 == ClosurebuilderとClosure Compilerによるコードの短縮 == 君のコードのコンパイルされ短縮されたバージョンを得るには、--output_modeを使う（訳注？）。コンパイル出力を得るには、Closure Compiler実行形式jarファイルが必要であり、ClosureBuilderにその場所を教える必要がある。リポジトリからjarファイルをダウンロードし、closure-libraryディレクトリのあるディレクトリに置いておこう。 closurebuilder.pyには二つのフラグを与える。つまり、コンパイル済出力の要求とcompiler.jarの位置の指示だ。 {{{ closure-library/closure/bin/build/closurebuilder.py \ --root=closure-library/ \ --root=myproject/ \ --namespace="myproject.start" \ --output_mode=compiled \ --compiler_jar=compiler.jar \ > myproject/start-compiled.js }}} ClosureBuilderはコンパイラの出力を標準出力に書きこむ。これをstart-compiled.jsというファイルにリダイレクトする。 --output_filesフラグを使う方法もある（Unixスタイルのパイプに親しみの無い場合はこの方が簡単だろう）。 start-compiled.jsファイルをmyproject.htmlと同じ場所に置き、コンパイル済バージョンを使うようにhtmlを変更しよう。 {{{ }}} このファイルは君のオリジナルのコードと同一のふるいまいをするはずだが、しかし、ダウンロードすべきJavaScriptは一つの小さなものになる。 == ClosureBuilderをWebサーバ中とビルドシステム中にて使用する == Generally, developers using Closure Library implement the ability to serve in debug and compiled modes. In debug mode, the server serves the uncompiled files. In the HTML, the head tag includes script tags that point at Closure Library's base.js and the project .js files, as in the example above. There may also be additional dependency files as described in the DepsWriter documentation. In compiled mode, the server does not serve the uncompiled files. In the head tag, there is just one script tag that points at the compiled JavaScript file, as in the example above. The served web page should have the appropriate