Uglifyjs壓縮工具使用

1、Uglifyjs壓縮工具的使用1、 安裝node 下載地址/download/推薦下載.exe版,(以下以.exe版為準(zhǔn)),將下載的.exe加入都path中,進(jìn)入doc模式輸入node v 檢查是否配置好node2、 安裝npm , 在/dist/npm/可查看npm的最新版本并下載,這里下載的是，解壓并將npm.cmd加入到path中,最好的做法是新建一個(gè)目錄node,然后將node.exe與npm.zip解壓到該目錄,然后將該目錄加入到path例如：新建 F:node 將node.exe 和 npm.zip解壓后的文件都放到該

2、目錄中環(huán)境變量 path=F:node;運(yùn)行npm v3、 UglifyJS，命令如：npm install uglify-js g4、 概述：在控制臺(tái)/命令行中輸入uglifyjs help，如果出來(lái)幫助信息，表明uglifyjs可以正確使用了。uglifyjs input files options舉個(gè)栗子：/ 有個(gè)叫main.js的待壓縮/美化的文件uglifyjs main.js -o main-min.js -cuglifyjs的作者建議的就是先把文件放在前面，再把一些壓縮/美化的參數(shù)跟在后邊。一些常用的參數(shù)列表-o,-output 指定輸出文件，默認(rèn)情況下為命令行-b,-beaut

3、ify 美化代碼格式的參數(shù)-m,-mangle 改變變量名稱（ex：在一些例如YUI Compressor壓縮完的代碼后你可以看到a,b,c,d,e,f之類的變量，加了-m參數(shù)，uglifyjs也可以做到，默認(rèn)情況下，是不會(huì)改變變量名稱的）-r,-reserved 保留的變量名稱，不需要被-m參數(shù)改變變量名的-c,-compress OK，主角登場(chǎng)了，這是讓uglifyjs進(jìn)行代碼壓縮的參數(shù)?？梢栽?c后邊添加一些具體的參數(shù)來(lái)控制壓縮的特性，下文中會(huì)具體介紹。-comments 用來(lái)控制注釋的代碼的3. 變量名壓縮你需要傳入-m來(lái)進(jìn)行變量名的壓縮（將一系列很長(zhǎng)的變量名壓縮為a,b,c,d,e,

4、f云云）。當(dāng)使用了-m參數(shù)進(jìn)行改變變量名時(shí)，如果還想保留一些變量名讓他們不被改變，就需要用reserved (-r) 。例如uglifyjs . -m -r '$,require,exports'4. 進(jìn)行壓縮的選項(xiàng)當(dāng)使用了compress (-c) 參數(shù)時(shí)，就啟用了uglifyjs對(duì)代碼的壓縮的功能。你可以在-c后邊傳入一系列逗號(hào)分開的選項(xiàng)來(lái)指定壓縮的具體特性。對(duì)于這些選項(xiàng)使用的方法，可以參考下文中的“代碼美化選項(xiàng)”部分。（巴拉巴拉巴拉，此處省去一千字就不做具體的介紹了?？偠灾憧梢宰寀glifyjs可選的除去你在代碼中留下的debugger的等等關(guān)鍵字，或是各種變態(tài)的注

5、釋等等，一般用戶這里忽略了，如真有特殊需求，可以自己翻閱文檔。）4.1 預(yù)編譯選項(xiàng)你可以使用define (-d)來(lái)定義一些給uglifyjs壓縮/美化代碼的時(shí)候使用的變量，此話怎講呢？說(shuō)著玄乎，其實(shí)舉個(gè)例子就能明白了。為了調(diào)試代碼，你可以在你的代碼中加入如下的示例if (DEBUG) console.log("debug stuff");當(dāng)然，在最后發(fā)布的時(shí)候。普通的碼農(nóng)呢，會(huì)勤勤懇懇的一個(gè)個(gè)把這樣的調(diào)試代碼給刪除掉，但是萬(wàn)一工程過于龐大，溜掉了一兩個(gè)也是無(wú)可厚非的。聰明的碼農(nóng)呢，就會(huì)用到了uglifyjs中的-m這個(gè)選項(xiàng)了。首先要保證的就是DEBUG不是一個(gè)本地的變量，

6、再使用如下命令uglifyjs -o main-min.js main.js -c -define DEBUG=true得到的main-min.js文件中，上邊的調(diào)試代碼就不見了。是不是很cool？還有種使用預(yù)編譯選項(xiàng)的方式，就是把預(yù)編譯的所有選項(xiàng)放到一個(gè)js文件中。例如，有個(gè)define文件，有如下內(nèi)容const DEBUG = false;const PRODUCTION = true;/ etc.注：必須要使用const來(lái)聲明需要預(yù)編譯的變量。用如下的方式編譯你的代碼uglifyjs build/defines.js js/foo.js js/bar.js. -c最終起到的效果和上面是一

7、樣的。5. 代碼美化選項(xiàng)從博主的個(gè)人角度來(lái)講，覺著這個(gè)有必要學(xué)習(xí)下，代碼規(guī)范在什么時(shí)候都是一個(gè)碼農(nóng)離不開的話題。為了保證在一個(gè)大型項(xiàng)目中，你的代碼具有良好的可讀性，可以由jsdoc之類的工具生成一份具體的文檔供別人閱讀是很有重要的。uglifyjs提供的代碼美化的選項(xiàng)比較有限，就算是代碼壓縮功能的一個(gè)附屬小功能吧。這里需要強(qiáng)調(diào)下的是，美化中的所有選項(xiàng)，是對(duì)-b參數(shù)而言的，就是說(shuō)在使用的時(shí)候，這些選項(xiàng)需要放在-b后邊，例如：beautify 進(jìn)行代碼的美化，默認(rèn)的情況下等于-b beautify=true，你也可以吧beautfy設(shè)置為false跳過美化步驟。indent-level 設(shè)置代碼縮

8、進(jìn)，例如github默認(rèn)的情況下縮進(jìn)是2個(gè)tab，默認(rèn)的數(shù)值為4，例如（uglifyjs -o main-min.js main.js -b "indent-level=2"）indent-start 對(duì)代碼進(jìn)行整體縮進(jìn)默認(rèn)值為0，可以這么使用（uglifyjs -o main-min.js main.js -b "indent-start=4,indent-level=8"）quote-keys 默認(rèn)為false。如果設(shè)置為true，則將所有對(duì)象中的鍵用引號(hào)引起來(lái)space-colon 會(huì)在一個(gè)單引號(hào)后邊插入一個(gè)空格ascii-only 轉(zhuǎn)義Unico

9、de字符inline-script 轉(zhuǎn)義js代碼字符串變量中的script標(biāo)簽width 設(shè)置代碼的寬度，默認(rèn)情況下是805.1 保留copyright字樣或者是其他的一些注釋默認(rèn)的情況下uglifyjs只會(huì)保留符合jsdoc規(guī)范的注釋。你可以在comments后面加上一串正則表達(dá)式，來(lái)匹配出你需要保留的注釋，例如comments /foo|bar/。如果在comments后加了個(gè)all，則保留了所有的注釋。Css壓縮 安裝npm install clean-css gnpm install * g 將包安裝到全局環(huán)境中type *.css | cleancss -o all_min.css圖片壓縮 安裝