使用UglifyJS合并/壓縮JavaScript的方法
更新時間：2012年03月07日 10:31:42 作者：
在UglifyJS入門中主要記錄了UglifyJS的安裝，配置。篇末在命令行中使用了一個簡單命令來壓縮一個JS文件。這篇以編程的方式去壓縮JS文件。即寫一個build.js文件，使用node命令執(zhí)行該文件
build.js中的代碼會去調(diào)用UglifyJS的接口函數(shù)以執(zhí)行壓縮任務。
1，去github下載最新的UglifyJS。兩種方式下載，如果安裝了git，進入git控制臺使用如下命令
git clone git://github.com/mishoo/UglifyJS.git
或者使用http方式下載，點擊zip下載。解壓后其目錄結(jié)構(gòu)如下
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，打開命令行，執(zhí)行compress.js
// 讀取一個文件，壓縮之
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目錄中
示例代碼UglifyJS_test
1，去github下載最新的UglifyJS。兩種方式下載，如果安裝了git，進入git控制臺使用如下命令
git clone git://github.com/mishoo/UglifyJS.git
或者使用http方式下載，點擊zip下載。解壓后其目錄結(jié)構(gòu)如下
2，新建一個項目（文件夾）myApp，將uglify-js.js和lib目錄拷貝到自己的項目中。如下
3，在myApp中新建一個compress.js，內(nèi)容如下
復制代碼 代碼如下:
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，打開命令行，執(zhí)行compress.js
控制臺輸出了壓縮后的代碼。好了，就這么簡單。
5，既然在node環(huán)境下，當然可以寫一個函數(shù)直接讀取源文件，壓縮后輸出到指定的目錄。將以上代碼封裝到一個函數(shù)中，如下
復制代碼 代碼如下:
// 讀取一個文件，壓縮之
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
相關文章
下面小編就為大家?guī)硪黄钊肫饰鯦avaScript:Object類型。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了深入探討javascript中的數(shù)據(jù)類型,需要的朋友可以參考下
2015-03-03 
javascript中substr,substring,slice.splice的區(qū)別說明
某些情況下,負數(shù)的參數(shù)不識別.所以盡量不要用負數(shù)作參數(shù).免得瀏覽器不兼容,造成程序的出錯.
2010-11-11 
分享javascript實現(xiàn)的冒泡排序代碼并優(yōu)化
本文給大家匯總介紹了幾個個人收藏的JavaScript實現(xiàn)冒泡排序的代碼，都是非常的不錯，有需要的小伙伴可以參考下
2016-06-06 
這篇文章主要介紹了淺談javascript 函數(shù)內(nèi)部屬性的相關資料,需要的朋友可以參考下
2015-01-01 
這篇文章主要介紹了JavaScript中布爾對象的屬性解析,包括對constructor屬性和prototype構(gòu)造器的簡單介紹,需要的朋友可以參考下
2015-10-10 
這篇文章主要介紹了JavaScript中字符串拼接的基本方法,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-07-07 
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解,實例修正版。
2009-07-07 
JavaScript基礎語法與數(shù)據(jù)類型介紹
這篇文章介紹了JavaScript基礎語法與數(shù)據(jù)類型，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-02-02