小tip：我是如何初體驗uglifyjs壓縮JS的

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2946

1、故事總有其背景

年底將至，不少閒適的時間，因而刷刷微博，接觸各類紛雜的信息——美其名曰「學習」。運氣不錯，遇到了一個新名詞，uglifyjs. 聽說是用來壓縮JS文件的，聽說還能優化JS,聽說是基於node的，還聽說比Google Closure Compiler更帶感，哦？激起了個人好奇心。百之谷之，喲，相關的介紹還很多。而後折騰了個把小時，基本上知道了是個怎麼回事。

我以爲吧，仍是有些用的，即便是否是從事node開發的人，抽個小空，share之，因而就有了本文。人總有浮躁的時候，我也不例外，uglifyjs內部深刻的運做是如何的，唉，我是有氣無力，不想去折騰，因此，本文更可能是停留在應用層面。不過嘛，這樣反而受衆面廣一些。畢竟喜歡看《泰囧》的人要比《一代宗師》的多。

2、node相關的固定流程

凡事說起node應用，無非免不了相似下面的流程：

1. 安裝node
2. 安裝nmpnpm
3. 安裝當前應用 – uglifyjs

前兩個網上太多示意了，我以前也講過，sorry, 我很懶。
uglifyjs安裝以下code:

npm install uglify-js -g

一個回車，因而啪啪啪，就有下圖所示的東東：

因而，下面就能夠壓縮JS了。

3、uglifyjs JS壓縮

uglifyjs壓縮有不少的參數，詳見其github託管項目。其中有一些可選參數，以下部分截圖：

什麼美化壓縮，空格多長，變量名是否變成短名字等……您有興趣能夠本身去看看，若是今天不是星期五，若是不是要趕回去買菜，我就會翻譯下的——諸位，請原諒我吧，阿門！

下面演示如何使用uglifyjs壓縮JS.

個人桌面上有個名叫formini的文件夾，我會把要壓縮的文件放在其中，而後再壓縮。如今，我從內部拷貝了一個名叫inet.js的JS文件到這個文件夾中，而後：

1. 打開cmd, 這個不會我就沒有辦法了
2. 目錄引到formini文件夾，cd 而後什麼什麼的，這個不會我也沒有辦法了
3. 以下代碼：

   uglifyjs inet.js -o inet-min.js

4. 再運行以下代碼，測試-m可選參數：

   uglifyjs inet.js -m -o inet.min.js

   以下截圖：
   

噢啦，如今就是看結果了，見下截圖：

90K的是沒有運行-m參數的，70K(69.4)的是運行的。-m參數因此就是把變量名變成a, b, c, d, ...

從實際應用角度講，上線的JS顯然要壓縮變量，減少必定的文件尺寸。

跟YUICompressor相比，大小隻小了0.6K, 不過網上反映uglifyjs相比YUI壓縮很明顯，我這裏的大小僅優化了0.6÷174=0.345%，這隻能說明我寫的代碼還算比較優化，哈哈（忽然想起了老婆的話，不要得瑟，深呼吸……深呼吸……）！

4、uglifyjs壓縮批處理

咱們不可能每次都打開cmd去鍵入壓縮執行代碼，容易寫錯不說（如上面那個結果圖），還耗時，想一想都會讓人瘋掉。懶人有懶法，花了點功夫，折騰了一個批處理文件，之後，想要壓縮JS，只要雙擊運行這個.bat文件就能夠了！完整代碼以下：

@echo off
:: 設置壓縮JS文件的根目錄，腳本會自動按樹層次查找和壓縮全部的JS
SET JSFOLDER=C:\Users\Administrator\Desktop\formini
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在壓縮 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

新建一個txt文檔，任意命名，將上面的代碼粘貼進去，修改JSFOLDER後面的文件夾目錄爲你本身的，而後把.txt後綴改爲.bat就能夠啦！而後雙擊就能夠批量使用uglifyjs壓縮JS文件啦！

4、結束語

對於本身來說，本文內容算做備忘。目前而言，我仍是uglifyjs不能壓縮CSS文件。不過嘛，瞭解下總會有幫助的。行文匆忙，文中要是有表述不許確的地方歡迎指正。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2946

（本篇完）