使用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 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
前端面试知识点目录一览
Apr 15 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
小程序实现上传视频功能
Aug 18 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php中去除所有js,html,css代码
2010/10/12 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python timestamp和datetime之间转换详解
2017/12/11 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
室内趣味活动方案
2014/08/24 职场文书
4s店活动策划方案
2014/08/25 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
物资采购管理制度
2015/08/06 职场文书
法院执行局工作总结
2015/08/11 职场文书