使用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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
js仿微博动态栏功能
Feb 22 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
小程序实现列表倒计时功能
Jan 29 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP脚本的10个技巧(3)
2006/10/09 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python基础教程之五种数据类型详解
2017/01/12 Python
对python 自定义协议的方法详解
2019/02/13 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python3 配置logging日志类的操作
2020/04/08 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
消防安全员岗位职责
2014/03/10 职场文书
大班开学家长寄语
2014/04/04 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
中学教师个人总结
2015/02/10 职场文书
文明礼貌主题班会
2015/08/14 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
再谈python_tkinter弹出对话框创建
2022/03/20 Python