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
运行解压过后的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的前面，注意他们的依赖关系。
本文的参考文章: