使用YUI Compressor壓縮JS和Css,批處理,右鍵,註冊表,打包

對於大量使用JavaScript和CSS的AJAX應用來說，如果JavaScript和CSS大小很大，則傳輸到用戶端的時間會很久，網站效能不佳。而壓縮JavaScript和CSS是自然的事情（其中YUI Compressor的壓縮率大約為50%）

YUI Compressor - The Yahoo! JavaScript and CSS Compressor

YUI Compressor 壓縮 JavaScript 的內容包括：

1. 移除注釋
2. 移除額外的空格
3. 細微最佳化
4. 標識符替換（Identifier Replacement）

Download : http://yuilibrary.com/downloads/#yuicompressor
The YUI Compressor requires Java version >= 1.4. （機器需要Java 1.4以上的環境）所以需先下載JDK，配置環境。

---------------------------------------------華麗分割線---------------------------------------

一、Java環境配置JDK環境變數配置的步驟如下：1.我的電腦-->屬性-->進階-->環境變數.2.配置使用者變數:　　　　　　　　a.建立 JAVA_HOME　　　　　　　　　　   C:\Program Files\Java\j2sdk1.5.0 （JDK的安裝路徑）　　　　　　　　b.建立 PATH　　　　　　　　　　　  %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin　　　　　　　　c.建立 CLASSPATH　　　　　　　　　　　 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar3.測試環境變數配置是否成功：　　　開始-->運行--〉CMD　　　鍵盤敲入： JAVAC　　　　　　　　出現相應的命令，而不是出錯資訊，即表示配置成功！

---------------------------------------------華麗分割線---------------------------------------

二、使用YUI Compressor壓縮JS和Css

常用樣本（在cmd中執行）

 java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js 

 java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css 

–type指定要打包的檔案類型，可選的有 js和css
–charset 指定字元集
-o 指定輸出的檔案名稱，如果不指定這個參數將會把壓縮後的內容輸出到命令列上
最後的my.js和my.css是要打包的debug版源檔案

如果沒有給定charset參數，則字元集預設是系統的，此處指定了UTF-8，更加你的實際需要修改。具體文法和其他參數參考：http://www.julienlecomte.net/yuicompressor/

使用YUI Compressor和DOS批處理指令碼壓縮JavaScript和CSS，加上IIS的GZIP，加起來能得到85%左右的壓縮率。（其中YUI Compressor的壓縮率大約為50%）也可以修改參數獲得更多的壓縮率。

---------------------------------------------華麗分割線---------------------------------------

三、製作批處理工具

三個檔案：
批次檔：yuicompressor.bat
註冊表檔案：yuicompressor.reg
壓縮jar包：yuicompressor-2.4.6.jar

檔案目錄：D:\server\f2etools\yuicompressor

yuicompressor.bat批處理使用方法：
對整個檔案夾右鍵點擊【YUI-Compressor JS/CSS】批量壓縮操作產生-min.css或-min.js,源檔案不變，項目平時開發時引用源檔案，上線前引用壓縮檔測試正常後再上線。

yuicompressor.bat批次檔代碼：

cd "%1"
for /f %%a in ('dir /b *-min.js') do call:ProcessDel: %%a
for /f %%a in ('dir /b *-min.css') do call:ProcessDel: %%a
for /f %%a in ('dir /b *.js') do call:ProcessCompress: %%a
for /f %%a in ('dir /b *.css') do call:ProcessCompress: %%a

:ProcessDel

IF NOT [%1]==[] call:DeleteMinFiles: %1

GOTO:EOF

:ProcessCompress

IF NOT [%1]==[] call:CompressFiles: %1

GOTO:EOF

:DeleteMinFiles

IF EXIST "%CD%\%1" del "%CD%\%1"

GOTO:EOF

:CompressFiles

java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar %1 -o %~n1-min%~x1

GOTO:EOF

yuicompressor.reg註冊表功能：選中檔案夾後，右鍵，會多一個選項【YUI-Compressor JS/CSS】
yuicompressor.reg註冊表檔案代碼：

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files]
@="YUI-Compressor JS/CSS"

[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files\command]
@="D:\\server\\f2etools\\yuicompressor\\yuicompressor.bat %1"

：http://heiniu.me/tools/yuicompressor.rar

注意事項：請修改兩個檔案中的目錄路徑
批次檔：yuicompressor.bat和註冊表檔案：yuicompressor.reg

---------------------------------------------華麗分割線---------------------------------------

四、打包壓縮pack-all-min.js

檔案如下：
批次檔：pack-js.bat
需要打包的目錄檔案：pack-list.txt

pack-js.bat 代碼：

for /f %%i in (packList.txt) do type %%i >> pack-all.js

java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar --type js --charset utf-8 pack-all.js -o pack-all-min.js

pack-list.txt

jquery.ui.datepicker.js
jquery.ui.dialog.js
jquery.ui.draggable.js
jquery.ui.mouse.js

使用方法：
在當前js檔案夾裡放入這兩個檔案，平時開發用多個源檔案，運行pack-js.bat後查看頁面效果，上線前打包成一個壓縮檔，測試無誤後再上線。