UglifyJS使用入門(mén)

1、簡(jiǎn)介

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

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

2、安裝

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

npm install uglify-js -g

安裝完成后，輸入 uglifyjs-V 查看版本號(hào)，檢測(cè)安裝是否成功。

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

npm install uglify-js --save-dev

3、用法

UglifyJS的命令格式如下

uglifyjs [input files] [options]

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

例如，有一個(gè)名為 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)在來(lái)測(cè)試UglifyJS的幾個(gè)常用選項(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語(yǔ)句簡(jiǎn)化了。

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ù)用最簡(jiǎn)字母代替了。

整體說(shuō)來(lái)，UglifyJS的混淆比較輕量，只是簡(jiǎn)化了函數(shù)參數(shù)和變量名，而不會(huì)修改語(yǔ)法樹(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ǔ)上，把多個(gè)輸入文件順序合并到同一行了，同時(shí)對(duì)變量重復(fù)命名做了規(guī)避。

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

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

接下來(lái)安裝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

會(huì)把目錄folder下dom.js壓縮，保存在同一個(gè)目錄下。

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