使用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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP中的Memcache详解
2014/04/05 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
js身份证验证超强脚本
2008/10/26 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
HTML的select控件美化
2017/03/27 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
替换python字典中的key值方法
2018/07/06 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
违纪学生保证书
2015/02/27 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书