用Ant構建JavaScript組件

我們走到哪兒了？前兩期思考了太多東西，你是否已有倦意？別擔心，本期的話題很輕鬆，你只需要簡單瞭解一些文法，寫幾行配置，就能驅使系統按你預設的方式自動完成一些工作。聽起來是不是很愜意？Let’s go! 我們出發啦～

這期，我們會使用 Ant 將上期編寫、整理的代碼檔案按指定的先後順序合并成單一的源檔案，然後壓縮這個檔案。這是構建 JavaScript 項目的基本步驟。Ant 是 Apache 的一個頂級開源項目，網上對它的介紹和安裝，已經有很多文章，這裡就不再贅述了。在構建之前，我們先來看看已有的檔案布局：

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

現在，我們要讓它“豐滿”起來：

• 組件根目錄下添加：
  • README: 介紹 Smart Queue 組件
  • LICENSE: 組件的授權資訊
  • build.xml: Ant 使用的設定檔
• 組件根目錄下添加 lib 子目錄：存放構建過程中需要使用的外部程式和庫檔案
  • lib 子目錄下添加 yuicompressor.jar: 我們用 YUI Compressor 壓縮 JavaScript
• 組件根目錄下添加 test 子目錄：存放測試組件所需的檔案（下期介紹）
• src 目錄下添加 intro.js: 介紹組件的版本及說明資訊

麻雀雖小，五髒俱全。現在 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 這些名字都很容易理解外，其他可以看到的規律包括：

• project 元素的 default 屬性值對應某個 target 元素的 name 屬性；
• target 元素的 depends 屬性值對應其他某些 target 元素的 name 屬性；
• ${somename} 可以引用 property 中定義的值。