Ant的故事

Ant的来历

前段时间在学习淘宝的前端框架Kissy，在项目开发指南中看到了Ant，由于以前听过，所以来了兴趣。正如上篇文章所说，前端实践非常重要，于是就从头到尾研究起Ant来。。

说来，Ant来自Java，是一个基于Java的build工具。和Unix/Linux c中的make工具类似，不过由于Java的原因具有跨平台的优势。那么Ant和前端有半毛线关系么？答案是，哈哈~~

对前端来说，Ant可以

• 合并js和css文件
• 压缩js和css文件
• 生成jsDOC文档
• 连接FTP，将代码上传到指定服务器
• 自动上传到SVN，自动打包成zip文件 + …. frontend 当然这些都是网上抄来的，没有一一实验。喜欢的还是合并、压缩、文档，也都自己从0开始慢慢摸索了下，总结记录一下，方便对她有兴趣的朋友..

Ant的入门

首先我们安装Ant的环境。

安装jdk的步骤就不细说，度娘那里有很多。

下载Ant，传送门:apache-ant-1.9.0 .解压到你喜欢的位置，我是F:\apache-ant-1.9.0.

在path里面添加：F:\apache-ant-1.9.0.\bin

在DOS里面输入ant，验证安装是否完成。出现下面的结果就算成功了

 Buildfile：build.xml does not exist! 

 Build failed 

牛刀小试

新建test的java项目，里面建立src目录，在src里面写一个hello.java，内容如下

public class HelloWorld {

   public static void main(String[] args) {

       System.out.println("hello world!");

   }

}

在test目录里面建立build.xml文件。内容如下：

<?xml version="1.0" ?>

<project name ="javacTest" default="run" basedir=".">

    

    <target name="compile">

        <mkdir dir ="${basedir}/build/classes"/>

        <javac srcdir ="${basedir}/src" destdir ="${basedir}/build/classes"/>

    </target>

    <target name="run"  depends ="compile">

        <java classname ="HelloWorld">

            <classpath>

               <pathelement path="${basedir}/build/classes"/>

            </classpath>

       </java>

    </target>

</project>

用命令行进入test目录里面，执行ant。你会发现build里面多了classes目录，classes里面多了hello.class。在命令行里面会有hello world输出。如下图：

这次不准备讲ant的api，有兴趣的童鞋可以去看官方文档。这里我把遇到的讲一下，相信这样你也能掌握常见的语法了~

上面的build.xml中，就是我们的主角Ant了。每个Ant都有且只能有一个project，多个target(可理解为任务块)，depends=”compile”指必须名字为compile的target先执行，他们存在依赖关系。其他的就不解释了。

Ant和前端。

合并js

在test目录里面建四个js文件内容依次为console.log(“hello, i am from 1/2/3/4”);然后建立build.xml内容为：

<?xml version="1.0"?>

<project name="concat" default="build">

    <property name="concat.note" value="//合并js" />

    <target name="build">

        <echo>生成src目录</echo>

        <mkdir dir="src"/>

        <echo>开始合并文件</echo>

        <concat destfile="src/fs.js">

            <header trimleading="yes">${concat.note}

            </header>

            <path path="1.js"/>

            <path path="2.js"/>

            <path path="3.js"/>

            <path path="4.js"/>

        </concat>

    </target>

</project>

CMD切换到test目录，执行ant。输出

在src里面多了fs.js文件，内容为：

现在解释上面的build.xml。property定义一个名为concat.note的变量，内容为”//合并js”，下面会用${concat.note}引用。header是给fs.js最上面加一行。下面的合并就那样，都看得懂，记住格式就好了。提示一点是header那里有换行，如果不换，自己试试后果，呵呵。

有些童鞋就在想了，要是我有20个js，是不是要写20个path呢？当然不是！为了解决这个问题，我们的dadaType标签就闪亮登场啦~

把path变成

<fileset dir = "./" includes = "**/*.js">

就可以代替20个path！dataType常用除了我们见过的fileset/path，还有我们在压缩和生成文档要用的argument。fileset还有一个常用的语句，如下：

<fileset dir = "./">

    <include name = "**/*.js" if = "test">

    <exclude name = "my.js" unless = "my">

</fileset>

如果设置了test属性，读取所有js，如果没有设置my属性，则排除my.js

压缩js

先下载YUICompressor

运行解压过后的install.cmd。(用管理员身份运行，否则会出错哦)

然后随便右键一个文件就就会多一个Process with YUICompressor了。

把刚才解压的YUICompressor放到test目录中，新建一个min文件夹。把build.xml改成如下：

<?xml version="1.0"?>

<project name="refund" default="build">

<dirname property="current.dir" file="${ant.file.uploader}"/>

    <property name="src.dir" location="${current.dir}/src/"/>

    <property name="yuicompressor.path"   location="${current.dir}/yuicompressor/yuicompressor.jar"/>

    <target name="build">

        <apply executable="java" dest="${current.dir}/min">

            <fileset dir="${src.dir}" includes="*.js"/>

            <arg line="-jar"/>

            <arg path="${yuicompressor.path}"/>

            <arg value="-o"/>

            <targetfile/>

            <mapper type="glob" from="*.js" to="*-min.js"/>

        </apply>

    </target>k

</project>

然后运行ant命令。在min文件夹里面就会出现：

解释上面的build.xml.dirname用来获取文件的目录路径。注意到里面有个变量指向yuicompressor.jar，这样才能用YUICompressor。这里的arg提供给apply一些参数。-jar为YUICompressor中的.jar路径，就是刚才提到的那个变量。mapper定义源文件和目标文件的关联方式，这里是把.js变成-min.js。

生成文档的方式和压缩差不多，用的是jsdoc toolkit。偷下懒，这里就不演示了。

对于我们来说，如果压缩的文件就那么两个，手动就好了。如果多了，就要用Ant了。合并的时候要注意我们的js的顺序，比如jquery一定要在bootstrap.js的前面，注意他们的依赖关系。

本文的参考文章:

明河的电子书

Apache Ant手册

Top 15 Ant Best Practices