使用Google Closure Library压缩JS文件(一)
压缩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