這期，我們會(huì)使用 Ant 將上期編寫(xiě)、整理的代碼文件按指定的先后順序合并成單一的源文件，然后壓縮這個(gè)文件。這是構(gòu)建 JavaScript 項(xiàng)目的基本步驟。Ant 是 Apache 的一個(gè)頂級(jí)開(kāi)源項(xiàng)目，網(wǎng)上對(duì)它的介紹和安裝，已經(jīng)有很多文章，這里就不再贅述了。在構(gòu)建之前，我們先來(lái)看看已有的文件布局：

 smart-queue // 組件的根目錄  +--- src // JavaScript源文件目錄    +--- lang.js // 前文提到的“外部文件”    +--- smart-queue.js // Smart Queue 主文件

現(xiàn)在，我們要讓它“豐滿”起來(lái)：

• 組件根目錄下添加：
  • README: 介紹 Smart Queue 組件
  • LICENSE: 組件的授權(quán)信息
  • build.xml: Ant 使用的配置文件
• 組件根目錄下添加 lib 子目錄：存放構(gòu)建過(guò)程中需要使用的外部程序和庫(kù)文件
  • lib 子目錄下添加 yuicompressor.jar: 我們用 YUI Compressor 壓縮 JavaScript
• 組件根目錄下添加 test 子目錄：存放測(cè)試組件所需的文件（下期介紹）
• src 目錄下添加 intro.js: 介紹組件的版本及說(shuō)明信息

麻雀雖小，五臟俱全。現(xiàn)在 Smart Queue 看上去像是比較專(zhuān)業(yè)的 JavaScript 項(xiàng)目了：

 smart-queue // 組件的根目錄  +--- lib // JavaScript外部程序和庫(kù)文件目錄    +--- yuicompressor.jar // YUI Compressor  +--- test // 測(cè)試文件目錄  +--- src // JavaScript源文件目錄    +--- intro.js // 介紹和版本信息    +--- lang.js // 前文提到的“外部文件”    +--- smart-queue.js // Smart Queue 主文件  +--- README // 組件自述文件  +--- LICENSE // 組件授權(quán)信息

我們計(jì)劃將構(gòu)建出來(lái)的文件存放到組件根目錄下的 build 子目錄，還要通過(guò)構(gòu)建工具創(chuàng)建并銷(xiāo)毀它。首次嘗試構(gòu)建前，建議先大概了解一下 Ant 的配置文件――build.xml 的結(jié)構(gòu)：

<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>

仔細(xì)觀察一下，除了 name, description 這些名字都很容易理解外，其他可以看到的規(guī)律包括：

• project 元素的 default 屬性值對(duì)應(yīng)某個(gè) target 元素的 name 屬性；
• target 元素的 depends 屬性值對(duì)應(yīng)其他某些 target 元素的 name 屬性；
• ${somename} 可以引用 property 中定義的值。

下面我們開(kāi)始寫(xiě)自己的 build.xml.

首先，配置項(xiàng)目的基本信息，以及相關(guān)目錄名稱(chēng)，將要使用的編碼等等：

<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"/>

接著，定義一個(gè)用于初始化的 target, 它負(fù)責(zé)創(chuàng)建 build 子目錄：

  <target name="init">    <mkdir dir="${build}"/>  </target>

然后定義名為 concat 的 target, 負(fù)責(zé)將 src 里的 3 個(gè) JavaScript 文件按先后順序連接起來(lái)。運(yùn)行它要先運(yùn)行前面定義的 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>

這樣，就可以得到一個(gè)可以工作的 JavaScript 文件，下面的 target 負(fù)責(zé)壓縮這個(gè)文件，顯然它依賴(lài)于 concat, 也依賴(lài)于 init, 但是不必顯式指定對(duì) init 的依賴(lài)――Ant 能處理這種依賴(lài)關(guān)系。這里調(diào)用 YUI Compressor 并傳入適當(dāng)?shù)膮?shù)：

  <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 處理后的文件就可以部署到生產(chǎn)系統(tǒng)上去了。最后我們做一下清理工作，使你在生成文件后還可以回到最初的狀態(tài):

  <target name="clean">    <delete dir="${build}"/>  </target>

到此可以說(shuō)基本的配置就寫(xiě)完了。怎么使用它呢？以命令行方式進(jìn)入到組件根目錄（或者說(shuō) build.xml 所在的目錄），然后：

• 運(yùn)行 ant concat, 將得到 ./build/smart-queue.source.js
• 運(yùn)行 ant, 將選擇 <project> 中 default 引用的那個(gè) target, 即 compress, 所以會(huì)得到 ./build 下的 smart-queue.source.js 和 smart-queue.js
• 運(yùn)行 ant clean, 將刪除 ./build 目錄，回到最初的狀態(tài)

這些前提是你已經(jīng)正確安裝或者說(shuō)設(shè)置好了 JDK 和 Ant, 如果有錯(cuò)誤提示出來(lái)，則可能需要檢查它們是否已準(zhǔn)備妥當(dāng)。

一路看下來(lái)，是不是覺(jué)得本期介紹的東西很簡(jiǎn)單？那是當(dāng)然了，構(gòu)建工具就應(yīng)該簡(jiǎn)單易用，否則把大量的時(shí)間花在那上面豈非不值？工具的價(jià)值在于提升生產(chǎn)力，從而創(chuàng)造更多價(jià)值。

最后，你可以在這里查看 Ant 的幫助文檔（里面有很多好玩的東東哦），也可以在這里查看本期完整的 build.xml 文件。

JavaScript技術(shù)：JavaScript 組件之旅（三）：用 Ant 構(gòu)建組件，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。