使用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 学习6 操纵元素显示效果的函数
Feb 07 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
3分钟了解vue数据劫持的原理实现
May 01 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
js运动应用实例解析
2015/12/28 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python异常和文件处理机制详解
2016/07/19 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python3排序的实例方法
2020/10/20 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
小学安全汇报材料
2014/08/14 职场文书
先进党组织事迹材料
2014/12/26 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
python中sys模块的介绍与实例
2021/04/17 Python