在線測試地址 http://lisperator.net/uglifyjs/
下面都是基於linux系統的安裝使用.
UglifyJS是遵循了CommonJS規范寫成的,可以在支持CommonJS模塊系統的javascript環境中運行。當然,這是官方的說法,通俗的說,就是可以在瀏覽器里和node.js的環境中兼可運行了。
UglifyJS的作者在今年9月份的時候,開始了UglifyJS2的項目,作者本人也是比較推崇UglifyJS2,因此,本文就只是關於UglifyJS2的一些介紹。下文中所有的UglifyJS都是指代UglifyJS2。
UglifyJS其實不僅僅是個js的壓縮工具,同時可以對代碼進行最小化,和美化的工具包。
擔心篇幅太長,在這里只做關於node.js環境下使用UglifyJS的介紹。
1. 安裝:
—— 從npm安裝
npm install uglify-js
—— 從github安裝
git clone git://github.com/mishoo/UglifyJS2.git cd UglifyJS2 npm link .
2. 概述:
在控制台/命令行中輸入uglifyjs –help,如果出來幫助信息,表明uglifyjs可以正確使用了。
uglifyjs [input files] [options]
舉個栗子:
// 有個叫main.js的待壓縮/美化的文件 uglifyjs main.js -o main-min.js -c
uglifyjs的作者建議的就是先把文件放在前面,再把一些壓縮/美化的參數跟在后邊。
一些常用的參數列表
-o,--output 指定輸出文件,默認情況下為命令行 -b,--beautify 美化代碼格式的參數 -m,--mangle 改變變量名稱(ex:在一些例如YUI Compressor壓縮完的代碼后你可以看到 a,b,c,d,e,f之類的變量,加了-m參數,uglifyjs也可以做到,默認情況下,是不會改變變量名稱的) -r,--reserved 保留的變量名稱,不需要被-m參數改變變量名的 -c,--compress OK,主角登場了,這是讓uglifyjs進行代碼壓縮的參數。可以在-c后邊添加 一些具體的參數來控制壓縮的特性,下文中會具體介紹。 --comments 用來控制注釋的代碼的
3. 變量名壓縮
你需要傳入-m來進行變量名的壓縮(將一系列很長的變量名壓縮為a,b,c,d,e,f雲雲)。當使用了-m參數進行改變變量名時,如果還想保留一些變量名讓他們不被改變,就需要用–reserved (-r) 。例如
uglifyjs ... -m -r '$,require,exports'
4. 進行壓縮的選項
當使用了–compress (-c) 參數時,就啟用了uglifyjs對代碼的壓縮的功能。你可以在-c后邊傳入一系列逗號分開的選項來指定壓縮的具體特性。
對於這些選項使用的方法,可以參考下文中的“代碼美化選項”部分。
(巴拉巴拉巴拉,此處省去一千字就不做具體的介紹了。總而言之,你可以讓uglifyjs可選的除去你在代碼中留下的debugger的等等關鍵字,或是各種變態的注釋等等,一般用戶這里忽略了,如真有特殊需求,可以自己翻閱文檔。)
4.1 預編譯選項
你可以使用–define (-d)來定義一些給uglifyjs壓縮/美化代碼的時候使用的變量,此話怎講呢?說着玄乎,其實舉個例子就能明白了。為了調試代碼,你可以在你的代碼中加入如下的示例
if (DEBUG) { console.log("debug stuff"); }
當然,在最后發布的時候。普通的碼農呢,會勤勤懇懇的一個個把這樣的調試代碼給刪除掉,但是萬一工程過於龐大,溜掉了一兩個也是無可厚非的。聰明的碼農呢,就會用到了uglifyjs中的-m這個選項了。
首先要保證的就是DEBUG不是一個本地的變量,再使用如下命令
uglifyjs -o main-min.js main.js -c --define DEBUG=true
得到的main-min.js文件中,上邊的調試代碼就不見了。是不是很cool?
還有種使用預編譯選項的方式,就是把預編譯的所有選項放到一個js文件中。例如,有個define文件,有如下內容
const DEBUG = false; const PRODUCTION = true; // etc.
注:必須要使用const來聲明需要預編譯的變量。
用如下的方式編譯你的代碼
uglifyjs build/defines.js js/foo.js js/bar.js... -c
最終起到的效果和上面是一樣的。
5. 代碼美化選項
從博主的個人角度來講,覺着這個有必要學習下,代碼規范在什么時候都是一個碼農離不開的話題。為了保證在一個大型項目中,你的代碼具有良好的可讀性,可以由jsdoc之類的工具生成一份具體的文檔供別人閱讀是很有重要的。
uglifyjs提供的代碼美化的選項比較有限,就算是代碼壓縮功能的一個附屬小功能吧。
這里需要強調下的是,美化中的所有選項,是對-b參數而言的,就是說在使用的時候,這些選項需要放在-b后邊,例如:
beautify 進行代碼的美化,默認的情況下等於-b beautify=true,你也可以吧beautfy設置為false跳過 美化步驟。 indent-level 設置代碼縮進,例如github默認的情況下縮進是2個tab,默認的數值為4,例如 (uglifyjs -o main-min.js main.js -b "indent-level=2") indent-start 對代碼進行整體縮進默認值為0,可以這么使用 (uglifyjs -o main-min.js main.js -b "indent-start=4,indent-level=8") quote-keys 默認為false。如果設置為true,則將所有對象中的鍵用引號引起來 space-colon 會在一個單引號后邊插入一個空格 ascii-only 轉義Unicode字符 inline-script 轉義js代碼字符串變量中的script標簽 width 設置代碼的寬度,默認情況下是80
5.1 保留copyright字樣或者是其他的一些注釋
默認的情況下uglifyjs只會保留符合jsdoc規范的注釋。
你可以在–comments后面加上一串正則表達式,來匹配出你需要保留的注釋,例如–comments ‘/foo|bar/’。
如果在–comments后加了個all,則保留了所有的注釋。