Closure Tools的用法
Closure Tools包含了三個部份
Google I/O 2010的介紹影片:
Closure Library使用方法
Closure Library為了解決這個問題, 它還提供了一個Dependency Calculation Script. 用法如下.
- A JavaScript optimizer
- A comprehensive JavaScript library
- An easy templating system for both Java & JavaScript
Google I/O 2010的介紹影片:
Closure Library使用方法
- 在你的project目錄下, 打"svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library-read-only
" - 會透過svn到Google code的server上抓回它最新的source. 放在closure-library-read-only目錄下.
- 寫一個簡單的java script檔, 例如hello.js
- 再寫一個簡單的HTML檔, 例如hello.html
- 結果再用browser去開hello.html就可以啦.
goog.require('goog.dom');
function sayHi() {
var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
<html> <head> <script src="closure-library/closure/goog/base.js"></script> <script src="hello.js"></script> </head> <body onload="sayHi()"> </body> </html>
Closure Library為了解決這個問題, 它還提供了一個Dependency Calculation Script. 用法如下.
- 執行calcdeps.py
- 這樣就會產生hello-calc.js這個檔, 看看內容, 它把前面說的base.js跟其它因為goog.require()會被包進來的java script檔, 全部都放到hello-calc.js檔裡. 所以在hello.html裡, 就不用分別include base.js跟hello.js, 只要include這個新的hello-calc.js就好了!
closure-library-read-only/closure/bin/calcdeps.py -i hello.js -p closure-library/ -o script > hello-calc.js
- 下載Closure compiler. 這是一個zip檔, 解壓縮後把compiler.jar放在project目錄下.
- 執行calcdeps.py
- 如果執行環境有支援Java 6的話, 應該可以順利跑完, 並且產生hello-compiled.js檔. 這個檔案只有56k, 而且功能跟hello-calc.js完全等價. 原本的hello.html只要include這個檔就可以, loading時間可以瞬間變成1/4.
closure-library-read-only/closure/bin/calcdeps.py -i hello.js -p closure-library/ -o compiled -c compiler.jar > hello-compiled.js
留言