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

posted @ 2016-01-23 09:41 夜幽儿阅读(2891) 评论(0) 收藏举报

刷新页面返回顶部