使用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程序 入门者学习
Jul 09 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript history对象详解
Feb 09 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 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
BBS(php & mysql)完整版(六)
2006/10/09 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery键盘事件介绍
2011/01/31 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
itchat接口使用示例
2017/10/23 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
网络安全方面的面试题
2016/01/07 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
工业自动化专业毕业生推荐信
2013/11/18 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
元旦晚会感言
2014/03/12 职场文书
投标担保书范文
2014/04/02 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
大客户经理岗位职责
2015/04/09 职场文书
工商局调档介绍信
2015/10/22 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python