使用Google Closure Library壓縮JS文件(一)


壓縮JS腳本在項目開發中是一項必不可少的技能,接下來將詳細說明使用Google Closure Library壓縮一個簡單的JS文件的步驟

  准備:

      python 2.7安裝包

      closure-library-20160106,

      closure-compiler

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM