ant入門指南—web前端開發七武器（1）

武器檔案

• 名稱：apache ant
• 最新版本：1.8.2
• 用途：檔案構建工具
• 下載：http://labs.renren.com/apache-mirror//ant/binaries/apache-ant-1.8.2-bin.zip
• ant使用文檔：http://ant.apache.org/manual/index.html
• 必備指數：
• 使用難度：

ant作為目前中國最受歡迎的開源構建工具，廣泛應用於java工程構建。也許你會感到很疑惑，js作為動態語言，並不需要編譯過程，為什麼需要ant這樣的構建工具呢？ant能夠協助前端工程師解決那些問題呢？採用ant構建js和css的優點和缺點是什麼呢？如何使用ant呢？這些問題在這個系列教程中明河將一一解答。

1.為什麼前端工程師需要ant？

來看個經典的應用情境：
在你的頁面中需要引用不少的jquery外掛程式，比如plug-1.js、plug-2.js、plug-3.js…yslow關於前端效能最佳化的第一建議就是頁面應該保持盡量少的js和css引用。明顯這個情境違背了這個建議，所以我們需要合并這些js外掛程式，合并成plug-combine.js檔案，傳統的做法是人肉合并，以前明河也是這麼乾的，但遇到了如下煩惱，plug-1.js是自己寫的外掛程式，經常要更新這個檔案的代碼，每次更新完都要重新人肉更新下plug-combine.js，作為一個懶人，明河在想，“有沒有一個工具可以幫我自動合并檔案呢？當然合并後能夠自動調用壓縮公用程式壓縮檔就更棒了！”。ant這個神奇的小工具就是用來幫前端偷這樣的懶的！

ant能幫前端幹些什麼呢？

• 合并js/css檔案；
• 調用YUI Compressor自動壓縮css檔案，調用Google Closure Compiler自動壓縮js；
• 快速批量複製/刪除指定檔案；
• 調用jsDoc工具，自動產生js文檔；
• 串連FTP，將代碼快速發布到指定伺服器；
• 將檔案自動上傳到svn上；
• 自動打包成zip檔案
• …

ant提供了一整套的工作清單幫你從重複耗時的構建流程中解脫出來！看到ant這隻神奇的螞蟻能做如此多的事，心動了嗎？那麼跟著明河來學學如何使用ant。
明河要強調的一點是ant很簡單，只要你有足夠的耐心，你一個在1天內掌握其使用方法。

2.安裝ant1)下載ant（好吧，這是廢話-_-!）

你下載下來的ant，應該包含如下檔案：

2)安裝java運行環境

ant是java程式，所以依賴於java運行環境，如果你的機子已經安裝JDK，那麼請跳過這一步，如果沒有請先下載JDK，傳送門在此。
（PS:請運行“CMD”，然後鍵入“javac”，如果出現如下介面說明java環境OK。）

如果出現“’javac’ 不是內部或外部命令，也不是可啟動並執行程式或批次檔。”，那麼請設定下java環境變數。
設定方法參見，明河之前寫的《YUI Compressor快速使用指南—web前端開發七武器》，這裡不再累述。

3)配置環境變數

右擊“電腦”，點擊“系統設定”，出現如下介面：

建立系統變數,變數名：ANT_HOME，變數值：d:\soft\ant，變數值指向你本機ant的解壓目錄，請勿直接copy這個變數值。

修改變數：path，在最後添加：%ANT_HOME%\bin;

4)試運行ant

在”CMD”介面，輸入“ant”，如果出現以下內容，說明配置成功！

3.ant版的hello world！

在d盤建立個ant-demo的目錄。
在該目錄下建立個build.xml，代碼如下：

1. <?xml version="1.0"?>
2. <project name="refund" default="build">
3.     <target name="build">
4.         <echo>Hello world!</echo>
5.         <concat destfile="a_b.js">
6.             <path path="a.js"/>
7.             <path path="b.js"/>
8.         </concat>
9.     </target>
10. </project>

再準備二個用於合并的js檔案，比如a.js和b.js，（隨便在二個檔案中加些js代碼）。
進入cmd介面，敲入ant，留意必須先將目錄指向build.xml的根目錄。

你將成功輸出a_b.js檔案，目錄結構如下;

build.xml中的代碼是什麼意思呢？別急，下一篇教程明河將講解ant的build檔案。