使用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标签切换效果代码
Mar 27 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 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.ini中文版
2006/10/09 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
python读取Android permission文件
2013/11/01 Python
python批量导出导入MySQL用户的方法
2013/11/15 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
书法大赛策划方案
2014/06/04 职场文书
七年级话题作文之执着
2019/11/19 职场文书
vue实现简易音乐播放器
2022/08/14 Vue.js