Uglifyjs(JS代碼優(yōu)化工具)入門 安裝使用
UglifyJS使用入門
1、簡介
UglifyJS是個(gè)包含JS解釋器、代碼最小化、壓縮、美化的工具集,是前端開發(fā)打包的最常用工具之一。
CocosCreator引擎采用gulp管理構(gòu)建流程,其中也使用UglifyJS來做代碼的合并和壓縮。
UglifyJS目前只能壓縮JS代碼,且只支持到ES5語法,尚不支持ES6。
2、安裝
UglifyJS基于Node.js開發(fā),所以首先確保安裝了Node.js環(huán)境。
如果想以一個(gè)獨(dú)立命令的方式運(yùn)行,則使用以下命令安裝
npm install uglify-js -g
安裝完成后,輸入 uglifyjs-V 查看版本號,檢測安裝是否成功。
如果想作為一個(gè)模塊通過代碼調(diào)用,則使用以下命令安裝
npm install uglify-js --save-dev
3、用法
UglifyJS的命令格式如下
uglifyjs [input files] [options]
輸入文件既可以是單個(gè),也可以是多個(gè),建議傳參時(shí)先傳文件,再傳選項(xiàng)。UglifyJS會根據(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)在來測試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語句簡化了。
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ǔ)上,把多個(gè)輸入文件順序合并到同一行了,同時(shí)對變量重復(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壓縮,保存在同一個(gè)目錄下。
詳細(xì)參數(shù)參考: https://github.com/mishoo/UglifyJS
相關(guān)文章
Javascript 入門基礎(chǔ)學(xué)習(xí)
習(xí).net已經(jīng)近2年了,最近學(xué)習(xí)Ajax時(shí)發(fā)現(xiàn)自己的很多技術(shù)功底很是欠缺,比如JavaScript。今后我會將我正在學(xué)習(xí)的也寫成筆記,有時(shí)間的話將以前的東西整理整理也傳上來。2010-03-03JavaScript中的Number數(shù)字類型學(xué)習(xí)筆記
對數(shù)字類型支持得不夠強(qiáng)大是很多人吐槽JavaScript的原因,anyway...這里整理了JavaScript中的Number數(shù)字類型學(xué)習(xí)筆記,適合入門及基礎(chǔ)知識復(fù)習(xí),需要的朋友可以參考下2016-05-05Javascript 按位與運(yùn)算符 (&)使用介紹
Javascript 按位與運(yùn)算符 (&),用于對兩個(gè) 32 位表達(dá)式執(zhí)行按位“與”運(yùn)算,而一般表達(dá)式里面都是十進(jìn)制整數(shù),此時(shí)需要先轉(zhuǎn)換成對應(yīng)的二進(jìn)制,然后向前加0,補(bǔ)足32位2014-02-02javascript 基礎(chǔ)篇1 什么是js 建立第一個(gè)js程序
javascript是很多東西的基礎(chǔ),比如jsp,ajax等,如果不會這么,那么學(xué)起這些來就比較麻煩,所以要先學(xué)好這個(gè),為將來的學(xué)習(xí)打好經(jīng)濟(jì)基礎(chǔ)2012-03-03