使用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 相关文章推荐
网页防止tab键的使用快速解决方法
Nov 07 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
js实现随机抽奖
2020/03/19 Javascript
Vue实现手机计算器
2020/08/17 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[17:36]VG战队纪录片
2014/08/21 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python ORM编程基础示例
2020/02/02 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
门卫工作岗位职责
2013/12/17 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
英语教师个人总结
2015/02/09 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书