使用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