Ant+YUICompressor 合并壓縮JS和CSS代碼執行個體

在實際項目中，推薦的是一個html對應一個JS檔案和一個CSS檔案。這樣做可以減少HTTP請求，眾所周知，一個HTTP請求的延遲遠比下載一個大點的檔案大得多。

所以從程式員來看：我要分檔案，分模組寫。不然代碼太混亂了。（多檔案）

客戶（網站的使用者）來看：我要良好的使用者體驗，越快越好。（少檔案，檔案一多HTTP請求會很多）

這就產生了衝突，不過有需求就有市場，我們聰明的前端攻城獅也有自己的方法解決。——連結檔案與壓縮大法，也就是標題“使用Ant和YUICompressor連結合并壓縮你的JS和CSS代碼”。

Ant，中文翻譯過來就是“螞蟻”。嗯嗯這是Apache的一個項目，基於Java的build工具，可以將一些項目的代碼檔案合并或者複製。具體的東東可以自行Google或者Baidu

官網：http://ant.apache.org/

YUICompressor，雅虎公司的一個代碼壓縮公用程式，貌似壓縮比例也挺高的。網上一搜一堆的在線壓縮網站有的也是這個做得。也是基於Java的。

第一步：配Java環境

這一步就跳過吧，這麼簡單是吧？Ant和YUICompressor都是基於Java來做得，不懂得自行Google或者Baidu，這裡說的是環境變數那裡的配置。不是Eclipse裡面的。嗯我知道你們想到了-_-!!。估計很多都配過了就不多說了。

第二步：建立項目

Eclipse下建立一個新的項目，Dynamic Web Project。開啟Project Explorer視窗（window->show View）

如圖所示，我建立了一個AntTest項目，然後在WebContent下面建立了三個檔案夾,

    build 這個檔案夾是用來放連結合并和壓縮公用程式的
    build_output 這個檔案夾是用來放項目上線的前端代碼和頁面的
    web 這個是用來放一些代碼的各個未連結壓縮的部分的，平常編輯代碼的話就在這個檔案夾下面編輯和修改

第三步：建立具體檔案

這張圖是web檔案夾下面的具體的檔案模組，其實jQuery有一些模組沒用到的話可以拆開載入的。

第四步：放置工具檔案到build檔案夾裡面

 

這是Ant和YUICompressor的檔案夾。直接解壓放裡面就可以。

Ant的話也要配環境的，比如下面的

ANT_HOME    D:/ apache-ant-1.9.0
path             D:/ apache-ant-1.9.0/bin
classpath      D:/apache-ant-1.9.0/lib

第五步：設定設定檔build.xml

我們這裡是用

<?xml version="1.0" encoding="UTF-8"?> <project default="compress" basedir="D:\eclipseWorkSpace\AntTest\WebContent\web" name="core">    <!-- 項目的 web 路徑，也就是我們修改代碼的那個web檔案夾的路徑 -->    <property name="path" value="D:\eclipseWorkSpace\AntTest\WebContent\web" />    <!-- 部署的輸出路徑 也就是項目的連結合并壓縮的輸出檔案夾的路徑-->    <property name="targetDir" value="D:\eclipseWorkSpace\AntTest\WebContent\build_output\asset" />    <!-- 源檔案路徑(src) -->    <property name="code.src" value="src" />    <property name="baseService" value="baseService" />    <!-- !!! YUI Compressor 路徑 !!! -->    <property name="yuicompressor" value="D:\eclipseWorkSpace\AntTest\WebContent\build\yuicompressor-2.4.6\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar"/>             <!-- =================================          target: concat 拼接（合并）檔案            ================================= -->              <target name="concat" depends="" description="concat code">        <echo message="Concat Code Files Begin!!!" />        <!-- 需要注意這裡的拼接順序depends是優先連結合并的檔案，也就是依賴的意思 --><!-- JS -->        <concat destfile="${targetDir}/js/source/all.js" encoding="utf-8" fixlastline="on">            <fileset dir="${code.src}/js" includes="jquery-1.5.1.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.core.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.widget.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.draggable.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.droppable.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.button.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.dialog.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.accordion.js" />            <fileset dir="${code.src}/js" includes="jquery.ui.autocomplete.js" />        </concat>        <!-- CSS -->        <concat destfile="${targetDir}/css/source/all.css" encoding="utf-8">            <fileset dir="${code.src}/css" includes="jquery.ui.core.css" />            <fileset dir="${code.src}/css" includes="jquery.ui.button.css" />            <fileset dir="${code.src}/css" includes="jquery.ui.dialog.css" />            <fileset dir="${code.src}/css" includes="jquery.ui.accordion.css" />            <fileset dir="${code.src}/css" includes="jquery.ui.autocomplete.css" />        </concat>         <echo message="Concat Code Files Finished!!!" />    </target>     <!-- =================================           target: copy 拷貝檔案          ================================= -->     <target name="copy_asset" depends="concat" description="copy the asset file">        <echo message="Copy Asset Begin" />        <!-- main.html -->        <copy todir="${targetDir}/../" overwrite="true">            <fileset dir="${path}/" includes="*.html"/>        </copy>        <!-- img *.png -->        <copy todir="${targetDir}/img" overwrite="true">            <fileset dir="${path}/asset/img" includes="*.png" />        </copy>         <echo message="Copy Asset Finished" />    </target>      <!-- =================================           target: compress 壓縮 js && css           ================================= -->     <target name="compress" depends="copy_asset" description="compress code">        <echo message="Compress Code Begin" />         <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/js">            <fileset dir="${targetDir}/js/source" includes="*.js"/>            <arg line="-jar"/>            <arg path="${yuicompressor}" />            <arg line="--charset utf-8" />            <arg line="-o" />            <targetfile/>            <mapper type="glob" from="*.js" to="*.js" />        </apply>                 <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/css">            <fileset dir="${targetDir}/css/source" includes="*.css"/>            <arg line="-jar"/>            <arg path="${yuicompressor}" />            <arg line="--charset utf-8" />            <arg line="-o" />            <targetfile/>            <mapper type="glob" from="*.css" to="*.css" />        </apply>         <echo message="Compress Code Finished" />         <echo message="Clean Begin" />         <!--<delete verbose="false" failonerror="true">            <fileset dir="${path}" includes="${targetDir}/*-o.js" />        </delete> -->         <echo message="Clean Finished" />     </target></project>

在命令提示字元（CMD）下用ant的指令運行（別告訴我你不會。。。。。），學過Java的應該都懂的，javac嘛，一個道理：

其實到這裡大概流程就差不多了，但是呢，懶人總有偷懶的方法，上面還要打命令提示字元，然後，自己做了個簡單的批次檔。

第六步：建立build.bat批次檔自動執行ant指令

滑鼠右鍵建立一個txt檔案，然後打入

@echo off
ant
pause

這裡build.bat和build.xml是放在同一個路徑下的。所以可以這樣直接調用指令，如果你想放在別的地方是要改路徑的。

然後儲存，尾碼txt改成bat就可以了。

以後，修改完代碼之後按下build.bat鍵盤F3（Eclipse開啟檔案快速鍵）就可以連結合并壓縮你的JS和CSS代碼了。

當然，如果你不想壓縮只想合并的話呢，把build.xml壓縮那塊刪了就可以了。

上面這樣做其實還是有一些小問題的，後台開發人員如果要去設定路徑映射那些的話其實是要去build_output檔案夾下面做的，因為這個檔案夾才是頁面真正的地址（代碼已被合并壓縮）。

記得跟他們說一下就好了。





使用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 的內容包括：

    移除注釋
    移除額外的空格
    細微最佳化
    標識符替換（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.jar
3.測試環境變數配置是否成功：
　　　開始-->運行--〉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後查看頁面效果，上線前打包成一個壓縮檔，測試無誤後再上線。