听起来是不是很惬意？Let's go! 我们出发啦～ 这期，我们会使用 [url=http://ant.apache.org/]Ant[/url] 将上期编写、整理的代码文件按指定的先后顺序合并成单一的源文件，然后压缩这个文件。这是构建 JavaScript 项目的基本步骤。Ant 是 Apache 的一个顶级开源项目，网上对它的介绍和安装，已经有很多文章，这里就不再赘述了。在构建之前，我们先来看看已有的文件布局：

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

现在，我们要让它“丰满”起来： [list] [*]组件根目录下添加： [list]

README: 介绍 Smart Queue 组件 [/*][*]LICENSE: 组件的授权信息 [/*][*]build.xml: Ant 使用的配置文件 [/*][/list]

[*]组件根目录下添加 lib 子目录：存放构建过程中需要使用的外部程序和库文件 [list]

lib 子目录下添加 yuicompressor.jar: 我们用 [url=http://developer.yahoo.com/yui/compressor/]YUI Compressor[/url] 压缩 JavaScript [/*][/list]

[*]组件根目录下添加 test 子目录：存放测试组件所需的文件（下期介绍） [/*][*]src 目录下添加 intro.js: 介绍组件的版本及说明信息 [/*][/list] 麻雀虽小，五脏俱全。现在 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>

仔细观察一下，除了 [code]name, description[/code] 这些名字都很容易理解外，其他可以看到的规律包括： [list] [*][code]project[/code] 元素的 [code]default[/code] 属性值对应某个 [code]target[/code] 元素的 [code]name[/code] 属性； [/*][*][code]target[/code] 元素的 [code]depends[/code] 属性值对应其他某些 [code]target[/code] 元素的 [code]name[/code] 属性； [/*][*][code]${somename}[/code] 可以引用 [code]property[/code] 中定义的值。 [/*][/list] 下面我们开始写自己的 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"/>

接着，定义一个用于初始化的 [code]target[/code], 它负责创建 build 子目录：

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

然后定义名为 [code]concat[/code] 的 [code]target[/code], 负责将 src 里的 3 个 JavaScript 文件按先后顺序连接起来。运行它要先运行前面定义的 [code]init[/code]:

  <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 文件，下面的 [code]target[/code] 负责压缩这个文件，显然它依赖于 [code]concat[/code], 也依赖于 [code]init[/code], 但是不必显式指定对 [code]init[/code] 的依赖——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>

大功告成，[code]compress[/code] 处理后的文件就可以部署到生产系统上去了。最后我们做一下清理工作，使你在生成文件后还可以回到最初的状态:

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

到此可以说基本的配置就写完了。怎么使用它呢？以命令行方式进入到组件根目录（或者说 build.xml 所在的目录），然后： [list] [*]运行 [code]ant concat[/code], 将得到 ./build/smart-queue.source.js [/*][*]运行 [code]ant[/code], 将选择 [code]<project>[/code] 中 [code]default[/code] 引用的那个 [code]target[/code], 即 [code]compress[/code], 所以会得到 ./build 下的 smart-queue.source.js 和 smart-queue.js [/*][*]运行 [code]ant clean[/code], 将删除 ./build 目录，回到最初的状态 [/*][/list] 这些前提是你已经正确安装或者说设置好了 JDK 和 Ant, 如果有错误提示出来，则可能需要检查它们是否已准备妥当。 一路看下来，是不是觉得本期介绍的东西很简单？那是当然了，构建工具就应该简单易用，否则把大量的时间花在那上面岂非不值？工具的价值在于提升生产力，从而创造更多价值。 最后，你可以在[url=http://ant.apache.org/manual/index.html]这里[/url]查看 Ant 的帮助文档（里面有很多好玩的东东哦），也可以在[url=http://code.google.com/p/janlay/source/browse/trunk/smart-queue/build.xml]这里[/url]查看本期完整的 build.xml 文件。