使用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 THICKBOX弹出层插件
Aug 30 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
js中作用域的实例解析
Mar 16 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
vue中axios请求的封装实例代码
Mar 23 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全局变量和类配合使用深刻理解
2013/06/05 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
简述数据库的设计过程
2015/06/22 面试题
公司年会策划方案
2014/05/17 职场文书
目标责任书格式
2014/07/28 职场文书
责任书格式范文
2014/07/28 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
辞职离别感言
2015/08/04 职场文书
五年级作文之想象作文
2019/10/30 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python