網頁制作poluoluo文章簡介：這期，我們會使用 Ant 將上期編寫、整理的代碼文件按指定的先後順序合並成單一的源文件，然後壓縮這個文件。這是構建 JavaScript 項目的基本步驟。Ant 是 Apache 的一個頂級開源項目，網上對它的介紹和安裝，已經有很多文章，這裡就不再贅述了。
我們走到哪兒了？前兩期思考了太多東西，你是否已有倦意？別擔心，本期的話題很輕松，你只需要簡單了解一些語法，寫幾行配置，就能驅使系統按你預設的方式自動完成一些工作。聽起來是不是很惬意？Let’s go! 我們出發啦～
這期，我們會使用 Ant 將上期編寫、整理的代碼文件按指定的先後順序合並成單一的源文件，然後壓縮這個文件。這是構建 JavaScript 項目的基本步驟。Ant 是 Apache 的一個頂級開源項目，網上對它的介紹和安裝，已經有很多文章，這裡就不再贅述了。在構建之前，我們先來看看已有的文件布局：
smart-queue // 組件的根目錄
+--- src // JavaScript源文件目錄
+--- lang.js // 前文提到的“外部文件”
+--- smart-queue.js // Smart Queue 主文件
現在，我們要讓它“豐滿”起來：
麻雀雖小，五髒俱全。現在 Smart Queue 看上去像是比較專業的 JavaScript 項目了：
smart-queue // 組件的根目錄
+--- lib // JavaScript外部程序和庫文件目錄
+--- yuicompressor.jar // YUI Compressor
+--- test // 測試文件目錄
+--- src // JavaScript源文件目錄
+--- intro.js // 介紹和版本信息
+--- lang.js // 前文提到的“外部文件”
+--- smart-queue.js // Smart Queue 主文件
+--- README // 組件自述文件
+--- LICENSE // 組件授權信息
我們計劃將構建出來的文件存放到組件根目錄下的 build 子目錄，還要通過構建工具創建並銷毀它。首次嘗試構建前，建議先大概了解一下 Ant 的配置文件——build.xml 的結構：
<project name="MyProject" default="dist" basedir=".">
<description>
simple example build file
</description>
<!-- set global properties for this build -->
<property name="src" location="src"/>
<property name="build" location="build"/>
<property name="dist" location="dist"/>
<target name="init">
<!-- Create the time stamp -->
<tstamp/>
<!-- Create the build directory structure used by compile -->
<mkdir dir="${build}"/>
</target>
<target name="compile" depends="init"
description="compile the source " >
<!-- Compile the java code from ${src} into ${build} -->
<javac srcdir="${src}" destdir="${build}"/>
</target>
<target name="clean"
description="clean up" >
<!-- Delete the ${build} and ${dist} directory trees -->
<delete dir="${build}"/>
<delete dir="${dist}"/>
</target>
</project>
仔細觀察一下，除了 name, description 這些名字都很容易理解外，其他可以看到的規律包括：
網頁制作poluoluo文章簡介：這期，我們會使用 Ant 將上期編寫、整理的代碼文件按指定的先後順序合並成單一的源文件，然後壓縮這個文件。這是構建 JavaScript 項目的基本步驟。Ant 是 Apache 的一個頂級開源項目，網上對它的介紹和安裝，已經有很多文章，這裡就不再贅述了。
下面我們開始寫自己的 build.xml.
首先，配置項目的基本信息，以及相關目錄名稱，將要使用的編碼等等：
<project name="Smart Queue" default="compress" basedir=".">
<description>Build file for Ant</description>
<property name="src" location="src" />
<property name="build" location="build" />
<property name="lib" location="lib"/>
<property name="inputencoding" value="utf-8"/>
<property name="outputencoding" value="gbk"/>
接著，定義一個用於初始化的 target, 它負責創建 build 子目錄：
<target name="init">
<mkdir dir="${build}"/>
</target>
然後定義名為 concat 的 target, 負責將 src 裡的 3 個 JavaScript 文件按先後順序連接起來。運行它要先運行前面定義的 init:
<target name="concat" depends="init">
<concat destfile="${build}/smart-queue.source.js" encoding="${inputencoding}" outputencoding="${outputencoding}">
<filelist dir="${src}" files="intro.js, lang.js, smart-queue.js" />
</concat>
</target>
這樣，就可以得到一個可以工作的 JavaScript 文件，下面的 target 負責壓縮這個文件，顯然它依賴於 concat, 也依賴於 init, 但是不必顯式指定對 init 的依賴——Ant 能處理這種依賴關系。這裡調用 YUI Compressor 並傳入適當的參數：
<target name="compress" depends="concat">
<java jar="${lib}/yuicompressor.jar" fork="true">
<arg line="--type js --charset utf-8 -o ${build}/smart-queue.js ${build}/smart-queue.js"/>
</java>
</target>
大功告成，compress 處理後的文件就可以部署到生產系統上去了。最後我們做一下清理工作，使你在生成文件後還可以回到最初的狀態:
<target name="clean">
<delete dir="${build}"/>
</target>
到此可以說基本的配置就寫完了。怎麼使用它呢？以命令行方式進入到組件根目錄（或者說 build.xml 所在的目錄），然後：
這些前提是你已經正確安裝或者說設置好了 JDK 和 Ant, 如果有錯誤提示出來，則可能需要檢查它們是否已准備妥當。
一路看下來，是不是覺得本期介紹的東西很簡單？那是當然了，構建工具就應該簡單易用，否則把大量的時間花在那上面豈非不值？工具的價值在於提升生產力，從而創造更多價值。
最後，你可以在 這裡 查看 Ant 的幫助文檔（裡面有很多好玩的東東哦），也可以在 這裡 查看本期完整的 build.xml 文件。