UglifyJS使用入門

1、簡介

UglifyJS是個包含JS解釋器、代碼最小化、壓縮、美化的工具集，是前端開發(fā)打包的最常用工具之一。
CocosCreator引擎采用gulp管理構(gòu)建流程，其中也使用UglifyJS來做代碼的合并和壓縮。

UglifyJS目前只能壓縮JS代碼，且只支持到ES5語法，尚不支持ES6。

2、安裝

UglifyJS基于Node.js開發(fā)，所以首先確保安裝了Node.js環(huán)境。
如果想以一個獨(dú)立命令的方式運(yùn)行，則使用以下命令安裝

npm install uglify-js -g

安裝完成后，輸入 uglifyjs-V 查看版本號，檢測安裝是否成功。

如果想作為一個模塊通過代碼調(diào)用，則使用以下命令安裝

npm install uglify-js --save-dev

3、用法

UglifyJS的命令格式如下

uglifyjs [input files] [options]

輸入文件既可以是單個，也可以是多個，建議傳參時先傳文件，再傳選項(xiàng)。UglifyJS會根據(jù)傳入選項(xiàng)，把文件放在隊(duì)列中依次解釋。

例如，有一個名為 copy.js的js代碼文件如下。

var fs = require('fs');
function main(argv) {
  fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]));
}
var args = process.argv.slice(2);
if (!!args && args.length === 2) {
  main(args);
} else {
  console.log('args is invalid.');
}

我們現(xiàn)在來測試UglifyJS的幾個常用選項(xiàng)。

3.1 -o 輸出

uglifyjs copy.js -o min.js

上面命令傳入 copy.js，輸出到 min.js，結(jié)果如下。

var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);if(!!args&&args.length===2){main(args)}

可以看到，效果是代碼去空格且合并到一行，但函數(shù)和變量名都不變。

3.2 -c 壓縮

uglifyjs copy.js -c -o min.js

上面命令傳入 copy.js，壓縮輸出到 min.js，結(jié)果如下。

var fs=require("fs");function main(argv){fs.createReadStream(argv[0]).pipe(fs.createWriteStream(argv[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);

和上一命令的效果基本相同，但把 if語句簡化了。

3.3 -m 混淆

uglifyjs copy.js -m -c -o min.js

上面命令傳入 copy.js，混淆+壓縮輸出到 min.js，結(jié)果如下。

var fs=require("fs");function main(r){fs.createReadStream(r[0]).pipe(fs.createWriteStream(r[1]))}var args=process.argv.slice(2);args&&2===args.length&&main(args);

可以看到，混淆+壓縮的效果，就是在前面基礎(chǔ)上，把函數(shù)參數(shù)用最簡字母代替了。

整體說來，UglifyJS的混淆比較輕量，只是簡化了函數(shù)參數(shù)和變量名，而不會修改語法樹。

3.4 輸入多文件

uglifyjs copy.js copy2.js -m -c -o min.js

上面命令傳入 copy.js、 copy2.js，混淆+壓縮輸出到 min.js，結(jié)果如下。

var fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);var args;fs=require("fs");function main(e){fs.createReadStream(e[0]).pipe(fs.createWriteStream(e[1]))}(args=process.argv.slice(2))&&2===args.length&&main(args);

可以看到，效果就是在前面基礎(chǔ)上，把多個輸入文件順序合并到同一行了，同時對變量重復(fù)命名做了規(guī)避。

下面是其他網(wǎng)友的補(bǔ)充

需要先安裝node，進(jìn)入命令行，查看node，npm是否正確安裝。

接下來安裝UglifyJS，命令如：npm install uglify-js -g

最后別忘了把node和npm添加到環(huán)境變量中，我的分別是

C:\Program Files (x86)\nodejs\;

C:\Users\taozhou\AppData\Roaming\npm;

現(xiàn)在就可以使用uglifyjs就行壓縮了，如

uglifyjs folder/dom.js -> folder/dom-min.js

會把目錄folder下dom.js壓縮，保存在同一個目錄下。

詳細(xì)參數(shù)參考： https://github.com/mishoo/UglifyJS

最新評論