使用UglifyJS合并/压缩JavaScript的方法


Posted in Javascript onMarch 07, 2012

build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务。

1,去github下载最新的UglifyJS。两种方式下载,如果安装了git,进入git控制台使用如下命令
git clone git://github.com/mishoo/UglifyJS.git

或者使用http方式下载,点击zip下载。解压后其目录结构如下

使用UglifyJS合并/压缩JavaScript的方法

 

2,新建一个项目(文件夹)myApp,将uglify-js.js和lib目录拷贝到自己的项目中。如下

使用UglifyJS合并/压缩JavaScript的方法

3,在myApp中新建一个compress.js,内容如下

var fs = require('fs'); 
var jsp = require("./uglify-js").parser; 
var pro = require("./uglify-js").uglify; var origCode = "var abc = function(){ var one = 5; return one;}"; 
var ast = jsp.parse(origCode); // parse code and get the initial AST 
ast = pro.ast_mangle(ast); // get a new AST with mangled names 
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations 
var finalCode = pro.gen_code(ast); // compressed code here 
console.log(finalCode);

这段代码的大概意思是取fs模块,它是node的文件模块。 接着取UglifyJS的两个模块。后面就是UglifyJS的压缩流程了。

4,打开命令行,执行compress.js

使用UglifyJS合并/压缩JavaScript的方法

控制台输出了压缩后的代码。好了,就这么简单。
5,既然在node环境下,当然可以写一个函数直接读取源文件,压缩后输出到指定的目录。将以上代码封装到一个函数中,如下

// 读取一个文件,压缩之 
function buildOne(flieIn, fileOut) { 
var origCode = fs.readFileSync(flieIn, 'utf8'); 
var ast = jsp.parse(origCode); 
ast = pro.ast_mangle(ast); 
ast = pro.ast_squeeze(ast); var finalCode = pro.gen_code(ast); 
fs.writeFileSync(fileOut, finalCode, 'utf8'); 
}

将我写的ajax-1.0.js压缩,输出到myApp目录中
buildOne('ajax-1.0.js', 'ajax-min.js');

示例代码UglifyJS_test
Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 #Javascript
node.js 一个简单的页面输出实现代码
Mar 07 #Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 #Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 #Javascript
拥抱模块化的JavaScript
Mar 07 #Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 #Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python中字符串前面加r的作用
2015/06/04 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
分享vim python缩进等一些配置
2018/07/02 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
python django model联合主键的例子
2019/08/06 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
产品质量承诺书
2014/03/27 职场文书
研究生求职自荐书
2014/06/23 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
行政答辩状范文
2015/05/21 职场文书
刑事附带民事代理词
2015/05/25 职场文书
严以用权学习心得体会
2016/01/12 职场文书