什么是Ant?

搞Java开发的人不应该陌生。我没搞过Java开发所以之前没接触过，最近听过一堂Zakas的课后，觉得这东西超好用。关于Ant的解释：
“Ant是一种基于Java的build工具。理论上来说，它有些类似于（Unix）C中的make ，但没有make的缺陷。”(出自http://www.kuqin.com/beginner/ant.html)。

需要一个什么样的前端开发流程?

想想我们是怎么进行前端开发。
写代码 —-> 执行代码 —-> 发布

因为Javascript无法提前编译，所以代码有没有错只能在“执行代码”这个阶段才能发现。前端开发的一个特点是很多潜在的错误或设计缺陷不好预前发现，只有等到发布后不断的使用才能发现，但已给用户造成不好的使用体验。

所以如何保证高质量的代码和规避风险一直是讨论的话题。 雅虎美国的前端工程师Zakas建议建立一个完善的前端开发流程，让我们的前端开发更加井井有条。

一个比较合理前端开发流程：
写代码 —-> 检验语法 —-> 整合代码 —-> 生成文档 —-> 压缩代码 —-> 布署测试环境 —-> 单元测试 —-> 发布

Ant可以轻松的使其中大部分环节自动化，如果再写的复杂点，可以实现全部自动化。

如何创建一个前端开发流程?

用JSLint进行Javascript语法校验。这里要用到JSLint和Rhino。
首先到http://www.jslint.com/lint.html下载fulljslint.js, 再把rhino扩展贴在jslint后面，并修改一下：

if (!JSLINT(input, {rhino: true, passfail: false})) {
print("jslint: 发现问题 " + a[0]);
.......
quit(1);
} else {
......

校验的target：

<property name=”rhino.jar” value=”E:\rhino1_7R1\js.jar” />
<property name=”jslint.js” value=”E:\rhino1_7R1\fulljslint.js” />
<target name=”js.validate”>
<apply executable=”java” parallel=”false” failonerror=”true”>
<fileset dir=”${js.src.dir}” includes=”*.js” />
<arg line=”-jar” />
<arg path=”${rhino.jar}” />
<arg path=”${jslint.js}” />
<srcfile />
</apply>

使用Ant内置的Concat任务合并文件

开发时可以按照功能分成若干个独立的模块开发，在Build时再合并成一个文件。这样更容易维护，而且可以根据不同需求灵活的组合这些模块很方便。
<target name=”js.concat”>
<concat destfile=”${js.build.dir}/${js.build.file}”>
<fileset dir=”${js.src.dir}” includes=”*.js”>
</concat>

使用yuicompressor压缩文件

<property name=”yuicompressor.jar” value=”F:\yuicompressor-2.3.5.jar” />
<target name=”js.compress”>
<apply executable=”java” parallel=”false” failonerror=”true”>
<fileset dir=”${js.build.dir}” includes=”*.js” />
<arg line=”-jar”/>
<arg path=”${yuicompressor.jar}” />
<srcfile/>
<arg line=”-o” />
<mapper type=”glob” from=”*.js” to=”*-min.js” />
<targetfile/>
</apply>

压缩CSS同理，
<target name=”css.compress”>
<apply executable=”java” parallel=”false” failonerror=”true”>
<fileset dir=”${src.dir}” includes=”*.css” />
<arg line=”-jar” />
<arg path=”${yuicompressor.jar}” />
<srcfile/>
<arg line=”-o” />
<mapper type=”glob” from=”*.css” to=”${build.dir}/*-min.css” />
<targetfile/>
</apply>

代码布署

使用copy任务进行本地/局域网内布署
<property name=”local-server.dir” value=”E:\wamp\www” />
<target name=”files.local.deploy”>
<copy todir=”${local-server.dir}”>
<fileset dir=”${js.build.dir}” includes=”*.js” />
</copy>

布署到远程服务器
<target name=”js.deploy”>
<ftp server=”ftp.yourserver.com”
remotedir=”/_demo”
userid=”your_username”
password=”your_password”
depends=”yes”
verbose=”yes”
binary=”no”>
<fileset dir=”${js.build.dir}” includes=”${js.build.file}”/>
</ftp>

或使用SCP，但需要额外安装Ant插件 – jsch (http://www.jcraft.com/jsch/)。
<scp todir=”${remote-server.host}:${remote-server.dir}”>
<fileset dir=”${js.build.dir}” includes=”*.js” />
</scp>

Ant手册中(http://ant.apache.org/manual/index.html)可以看到，Ant有很丰富的内置组件，并且可以很方便引入外部扩展组件。Ant几乎没有不可能完成的任务!

UTF-8的文件有中文一定要指定编码：
<target name=”js.concat”>
<concat destfile=”${js.build.dir}/${js.build.file}” encoding=”UTF-8″>
<fileset dir=”${js.src.dir}” includes=”*.js” />
</concat>

<target name=”js.compress”>
<apply executable=”java” parallel=”false” failonerror=”true”>
<filelist dir=”${js.build.dir}” files=”${js.build.file}” />
<arg line=”-jar” />
<arg path=”${yuicompressor.jar}” />
<arg line=”–charset utf-8″ />
<arg line=”-o ${js.build.dir}/${js.build.file}” />
<srcfile />
</apply>