您的位置:首页 > Web前端

ant入门指南—web前端开发七武器(1)

2011-09-09 10:25 190 查看


武器档案

名称: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,代码如下:

<?xml version="1.0"?>

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

<target name="build">

<echo>Hello world!</echo>

<concat destfile="a_b.js">

<path path="a.js"/>

<path path="b.js"/>

</concat>

</target>

</project>

再准备二个用于合并的js文件,比如a.js和b.js,(随便在二个文件中加些js代码)。

进入cmd界面,敲入ant,留意必须先将目录指向build.xml的根目录。





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





build.xml中的代码是什么意思呢?别急,下一篇教程明河将讲解ant的build文件。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: