# 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に対してフィルタリングしたりも可能
cat foo.js | java -jar compiler.jar
var hello = function(message) { alert("hello, " + message); evening(message); } var notMaking = "aiueo"; hello("あいうえお");
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を作成して
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|をつければ出なくなる
<?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>
project ├─closure-library │ ├─closure └─jsclosure-libraryに本体などもろもろ、jsには独自に作成したjavascript、project直下にhtmlをおくことにする
goog.provide("startup.App"); goog.require('goog.dom'); /* @constructor */ startup.App = function() { document.write("hello"); } new startup.App();
<!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から生成する
python closure-library\closure\bin\build\depswriter.py --root_with_prefix="js ../../../js" --output_file=js/deps.js