http://code.google.com/intl/ja/closure/ jQueryでは大多数で開発すると限界をちょっと感じたので、試してみる。いろいろなツールの集合体である。けど正直compilerの使い方さえわかれば今は十分な気がする
Closure Compiler
install
使い方
js
compilation_level
extern
ant
closure library
簡単な使い方
サンプル
Closure Compiler 
http://code.google.com/intl/ja/closure/compiler/do... 使用していない変数や圧縮などとにかく最適化してくれる。
日本語訳 http://www37.atwiki.jp/aias-closurecompiler/
日本語訳 http://www37.atwiki.jp/aias-closurecompiler/
install
# javaが必要 yum -y install java cd /usr/local/src curl -LO http://closure-compiler.googlecode.com/files/compiler-latest.zip unzip compiler-latest.zip mkdir -p /usr/local/closure-tools/lib mv compiler.jar /usr/local/closure-tools/lib/ chmod 644 /usr/local/closure-tools/lib/compiler.jarWebUIを使う場合はhttp://closure-compiler.appspot.com/homeを使えばよい
使い方
これさえ覚えていればとりあえずなんとかなる
java -jar /usr/local/closure-tools/lib/compiler.jar --js /path/to/jsfile --js_output_file /path/to/jsfile_compiledjs_output_fileの指定がない場合は標準出力にコンパイル結果が出力される。なので、viなんかでhtml内に書いているjavascriptに対してフィルタリングしたりも可能
js
読みこむjsを指定。複数指定可能。さらにいうと標準入力からも指定できるので、--jsオプションを指定するかわりに以下のようにすることも可能
cat foo.js | java -jar compiler.jar
compilation_level
WHITESPACE_ONLY/SIMPLE_OPTIMIZATIONS/ADVANCED_OPTIMIZATIONS 指定がない場合はSIMPLE_OPTIMIZATIONSになる。ADVANCED_OPTIMIZATIONSはclosure libraryを使うときに真価を発揮しそう
extern
外部JSのproperty/methodを参照しているときにcompilation_levelがADVANCED_OPTIMIZATIONSを指定しているとこれらの名前の最適化をせずに保持する機能だそうな
以下のような警告がでた場合は
- hello.js
var hello = function(message) {
alert("hello, " + message);
evening(message);
}
var notMaking = "aiueo";
hello("あいうえお");
- evening.js
function evening(name) {
var divElement = document.createElement('div');
var textElement = document.createTextNode(text);
divElement.appendChild(textElement);
return divElement;
}
こういう場合にADVANCED_OPTIMIZATIONSで個別にコンパイルするとevening.jsは空白になってしまうため、個別に行わずに全体で一気にコンパイルしないといけないがこの状態でコンパイルするとhello.jsのeveningを実行している箇所がシンボルリネームしてしまう可能性がある。これを防ぐ。extern宣言するjsを作成して- extern.js
function evening(name) {}
closure-compilerに--externsを指して実行するjava -jar compiler.jar --js hello.js --externs extern.js --compilation_level ADVANCED_OPTIMIZATIONS
以下のような警告がでた場合は
extern.js:1: WARNING - accessing name alert in externs has no effectextern.jsに書く内容に実処理などを書いているとこういう警告が出るので
--jscomp_off=externsValidation|をつければ出なくなる
ant
毎回こんな長ったらしいのを実行するのもあれなので、antと組み合わせるとよい。build.xmlは以下のように定義する
<?xml version="1.0"?>
<project name="portal_app" basedir="." default="compile">
<property environment="env" />
<property name="js_dir" value="public/js" />
<property name="compiler" value="build/compiler.jar" />
<property name="js_output_file" value="${js_dir}/compiled.js" />
<taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask" classpath="build/compiler.jar"/>
<target name="compile">
<jscomp compilationLevel="simple" warning="default" debug="false" output="${js_output_file}">
<externs dir="${js_dir}">
<file name="extern.js"/>
</externs>
<sources dir="${js_dir}">
<file name="a.js"/>
<file name="b.js"/>
<file name="c.js"/>
</sources>
<sources dir="${js_dir}/foo">
<file name="bar.js"/>
</sources>
</jscomp>
</target>
</project>
closure library
実戦投入するかはわからないけど、かなり強力そうなので、試す価値はあると思う。これかdojoも捨てがたい。ちなみにpythonツールが付属ではいっているが、3.x系では動かないそうなので、2.7系をインストールしておくとよい
簡単な使い方
ディレクトリ構成は以下とする
project ├─closure-library │ ├─closure └─jsclosure-libraryに本体などもろもろ、jsには独自に作成したjavascript、project直下にhtmlをおくことにする
サンプル
js/app.js。特に何もしていないけど。closure libraryは基本的にはprototypeベースで記述していくっぽい
index.html
js/deps.js
googライブラリの依存関係を解決した状態のjs。depswrite.pyで生成する。
root_with_prefixは解析対象ディレクトリと、closure-library/closure/googから対象ディレクトリまでの相対パスを書く
goog.provide("startup.App");
goog.require('goog.dom');
/* @constructor */
startup.App = function() {
document.write("hello");
}
new startup.App();
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<script src="closure-library/closure/goog/base.js"></script>
<script src="js/deps.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
goog.require("startup.App");
//]>>
</script>
</body>
</html>
必ずbase.jsを読み込むルールらしい。js/deps.jsはjs/app.jsから生成するjs/deps.js
googライブラリの依存関係を解決した状態のjs。depswrite.pyで生成する。
root_with_prefixは解析対象ディレクトリと、closure-library/closure/googから対象ディレクトリまでの相対パスを書く
python closure-library\closure\bin\build\depswriter.py --root_with_prefix="js ../../../js" --output_file=js/deps.js
タグ
最新コメント