壓縮JS腳本在項目開發中是一項必不可少的技能,接下來將詳細說明使用Google Closure Library壓縮一個簡單的JS文件的步驟
准備:
1.安裝python,點擊安裝包,“下一步”到頭,完成后,配置環境變量PATH,添加“python的安裝目錄”
2.解壓closure-library至“closure” ;
解壓closure-compiler,與“closure”平級;新建"myproject"目錄;最終目錄如下:
3.在“myproject”中新建“start.js”和“myproject.html”內容如下:
start.js
1 goog.provide('myproject.start'); 2 3 goog.require('goog.dom'); 4 5 myproject.start = function() { 6 var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 7 'Hello world!'); 8 goog.dom.appendChild(document.body, newDiv); 9 }; 10 11 // 確保在壓縮后myproject.start命名空間不被其它字符替換 12 goog.exportSymbol('myproject.start', myproject.start);
myproject.html
1 <!doctype html> 2 <html> 3 <head> 4 <script src="start-compiled.js"></script> 5 </head> 6 <body> 7 <script> 8 myproject.start(); 9 </script> 10 </body> 11 </html>
4.使用ClosureBuilder計算start.js所依賴的JS內容
python closure/closure/bin/build/closurebuilder.py --root=closure/ --root=myproject/ --namespace="myproject.start"
顯示結果:
1 E:\WorkSpace\doc>python closure/closure/bin/build/closurebuilder.py --root=cl 2 osure/ --root=myproject/ --namespace="myproject.start" 3 closure/closure/bin/build/closurebuilder.py: Scanning paths... 4 closure/closure/bin/build/closurebuilder.py: 1500 sources scanned. 5 closure/closure/bin/build/closurebuilder.py: Building dependency tree.. 6 closure\closure\goog\base.js 7 closure\closure\goog\dom\nodetype.js 8 closure\closure\goog\debug\error.js 9 closure\closure\goog\string\string.js 10 closure\closure\goog\asserts\asserts.js 11 closure\closure\goog\labs\useragent\util.js 12 closure\closure\goog\labs\useragent\platform.js 13 closure\closure\goog\object\object.js 14 closure\closure\goog\array\array.js 15 closure\closure\goog\labs\useragent\browser.js 16 closure\closure\goog\labs\useragent\engine.js 17 closure\closure\goog\useragent\useragent.js 18 closure\closure\goog\dom\tagname.js 19 closure\closure\goog\math\size.js 20 closure\closure\goog\fs\url.js 21 closure\closure\goog\string\typedstring.js 22 closure\closure\goog\string\const.js 23 closure\closure\goog\i18n\bidi.js 24 closure\closure\goog\html\safeurl.js 25 closure\closure\goog\html\trustedresourceurl.js 26 closure\closure\goog\dom\tags.js 27 closure\closure\goog\html\safestyle.js 28 closure\closure\goog\html\safestylesheet.js 29 closure\closure\goog\html\safehtml.js 30 closure\closure\goog\dom\safe.js 31 closure\closure\goog\dom\browserfeature.js 32 closure\closure\goog\math\math.js 33 closure\closure\goog\math\coordinate.js 34 closure\closure\goog\dom\dom.js 35 myproject\start.js
5.使用Compiler.jar壓縮start.js
python closure/closure/bin/build/closurebuilder.py //python腳本路徑
--root=closure/ //ClosureLibrary根目錄
--root=myproject/ //自建項目根目錄
--namespace="myproject.start" //自定義命名空間
--output_mode=compiled //指定輸出模式:編譯
--compiler_jar=compiler.jar //指定Compiler.jar路徑
>myproject/start-compiled.js //指定編譯后文件輸出路徑
6.使用高級模式壓縮start.js
python closure/closure/bin/build/closurebuilder.py //python腳本路徑
--root=closure/ //ClosureLibrary根目錄
--root=myproject/ //自建項目根目錄
--namespace="myproject.start" //自定義命名空間
--output_mode=compiled //指定輸出模式:編譯
--compiler_jar=compiler.jar //指定Compiler.jar路徑
--compiler_flags="--js=closure/closure/goog/deps.js" //編譯標識,用於計算自定義JS所需要的依賴
//編譯標識,指定編譯的等級,ADVANCED_OPTIMIZATIONS:高級,
//其它兩種為:SIMPLE_OPTIMIZATIONS:簡單,WHITESPACE_ONLY:僅去空格
--compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS"
>myproject/start-compiled.js //指定編譯后文件輸出路徑
7.至此,一個簡單示例完成了,Google Closure 更高級的功能將在以后的文章中介紹。
引用網頁https://developers.google.com/closure/library/docs/closurebuilder