ant入门指南—web前端开发七武器（1）

武器档案

• 名称：apache ant
• 最新版本：1.8.2
• 用途：文件构建工具
• 下载：http://labs.renren.com/apache-mirror//ant/binaries/apache-ant-1.8.2-bin.zip
• ant使用文档：http://ant.apache.org/manual/index.html
• 必备指数：
• 使用难度：

ant作为目前中国最受欢迎的开源构建工具，广泛应用于java工程构建。也许你会感到很疑惑，js作为动态语言，并不需要编译过程，为什么需要ant这样的构建工具呢？ant能够帮助前端工程师解决那些问题呢？采用ant构建js和css的优点和缺点是什么呢？如何使用ant呢？这些问题在这个系列教程中明河将一一解答。

1.为什么前端工程师需要ant？

来看个经典的应用场景：
在你的页面中需要引用不少的jquery插件，比如plug-1.js、plug-2.js、plug-3.js…yslow关于前端性能优化的第一建议就是页面应该保持尽量少的js和css引用。明显这个场景违背了这个建议，所以我们需要合并这些js插件，合并成plug-combine.js文件，传统的做法是人肉合并，以前明河也是这么干的，但遇到了如下烦恼，plug-1.js是自己写的插件，经常要更新这个文件的代码，每次更新完都要重新人肉更新下plug-combine.js，作为一个懒人，明河在想，“有没有一个工具可以帮我自动合并文件呢？当然合并后能够自动调用压缩工具压缩文件就更棒了！”。ant这个神奇的小工具就是用来帮前端偷这样的懒的！

ant能帮前端干些什么呢？

• 合并js/css文件；
• 调用YUI Compressor自动压缩css文件，调用Google Closure Compiler自动压缩js；
• 快速批量复制/删除指定文件；
• 调用jsDoc工具，自动生成js文档；
• 连接FTP，将代码快速发布到指定服务器；
• 将文件自动上传到svn上；
• 自动打包成zip文件
• …

ant提供了一整套的任务列表帮你从重复耗时的构建流程中解脱出来！看到ant这只神奇的蚂蚁能做如此多的事，心动了吗？那么跟着明河来学学如何使用ant。
明河要强调的一点是ant很简单，只要你有足够的耐心，你一个在1天内掌握其使用方法。

2.安装ant

1)下载ant（好吧，这是废话-_-!）

你下载下来的ant，应该包含如下文件：

2)安装java运行环境

ant是java程序，所以依赖于java运行环境，如果你的机子已经安装JDK，那么请跳过这一步，如果没有请先下载JDK，传送门在此。
（PS:请运行“CMD”，然后键入“javac”，如果出现如下界面说明java环境OK。）

如果出现“’javac’ 不是内部或外部命令，也不是可运行的程序或批处理文件。”，那么请设置下java环境变量。
设置方法参见，明河之前写的《YUI Compressor快速使用指南—web前端开发七武器》，这里不再累述。

3)配置环境变量

右击“计算机”，点击“系统设置”，出现如下界面：

新建系统变量,变量名：ANT_HOME，变量值：d:\soft\ant，变量值指向你本机ant的解压目录，请勿直接copy这个变量值。

修改变量：path，在最后添加：%ANT_HOME%\bin;

4)试运行ant

在”CMD”界面，输入“ant”，如果出现以下内容，说明配置成功！

3.ant版的hello world！

在d盘新建个ant-demo的目录。
在该目录下新建个build.xml，代码如下：

1. <?xml version="1.0"?>
2. <project name="refund" default="build">
3.     <target name="build">
4.         <echo>Hello world!</echo>
5.         <concat destfile="a_b.js">
6.             <path path="a.js"/>
7.             <path path="b.js"/>
8.         </concat>
9.     </target>
10. </project>

再准备二个用于合并的js文件，比如a.js和b.js，（随便在二个文件中加些js代码）。
进入cmd界面，敲入ant，留意必须先将目录指向build.xml的根目录。

你将成功输出a_b.js文件，目录结构如下;

build.xml中的代码是什么意思呢？别急，下一篇教程明河将讲解ant的build文件。