使用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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
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
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
python 网络编程常用代码段
2016/08/28 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
通俗讲解python 装饰器
2020/09/07 Python
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
大学生村官任职感言
2014/01/09 职场文书
毕业留言寄语大全
2014/04/10 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年实习期工作总结
2014/11/27 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android