项目build实战—ant入门指南（9）
2014-05-28 02:26
387 查看
项目build实战—ant入门指南（9）
前面8篇ant教程，基本上没有太复杂的地方，在实际项目build中会遇到些复杂的场景。今天这篇教程，明河将通过一个真实的项目build过程，来综合演练下ant的用法，同时演示下如何处理ant中的循环任务。
用途：kissy的form组件包
源码地址：https://github.com/minghe/kissy-form
KF目前还在开发阶段，完成的组件只有Uploader（异步文件上传），日后会发布更多的form组件，有兴趣的朋友可以关注下。
Uploader场景足够复杂，足以覆盖ant的大部分常用用法，请先下载KF源码到本地，找到Uploader的build.xml文件（form/src/uploader/build.xml）。
合并src下的所有js为render-pkg.js（排除themes、demo、auth、tests目录下的文件）
将render-pkg.js移动到build目录下，并改名为render.js
copy一份themes目录到build/form/uploader
遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js
删除除了index-pkg.js外的所有js文件
将index-pkg.js改名为index.js
压缩build目录下的所有js文件
copy一份uploader.swf文件到build目录下
任务是不是很多,也许你会觉得明河搞得这么复杂很蛋疼，实际上这些任务跟明河实际要实现的构建目标有关，不是本文重点，这里不讨论。
接下来来看明河是如何实现这些目标的。
由于需要用到第三方类库ant-contrib-1.0b3.jar，请先下载该文件到你的ant/lib目录下。
点此下载
关于concat的用法可以看《认识基础任务标签（上）—ant入门指南（3）》。
将render-pkg.js移动到build目录下，并改名为render.js
改名操作不一定要用rename标签，使用move标签也可以间接实现。
copy一份themes目录到build/form/uploader，并删除目录下的html文件
这部分的目标也非常简单，使用copy和delete即可实现。
遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js。删除除了index-pkg.js外的所有js文件。>将index-pkg.js改名为index.js
好，进入本文的重点内容，这个任务目标有个难点，就是如何在ant中处理循环？
如上图所示，build和src下的themes目录必须保持一致，而且必须遍历每个子目录合并该目录的js，所以需要用到循环。这时候你也许会想到编程语言中常用的for，ant有for标签吗？很影响ant并不是编程语言，没有直接的for标签，但通过第三方类库可以实现for循环，我们来看代码。
请确保你的本机上的ant下的lib目录下有ant-contrib-1.0b3.jar文件。
增加新的命名空间
给你的project增加ac命名空间：mlns:ac=”antlib:net.sf.antcontrib”。
遍历themes下的每个目录
使用ac:for开启循环，param为参数名，供后面循环时更换文件路径时使用。
定义文件路径。取每个子目录下的index.js。
sequential标签，与for标签配合使用，标志循环开始。
ac:var定义var.dir变量（即子目录路径）可更改，留意ant定义的property是无法更改的。
dirname获取文件对应的子目录路径。
接下来具体执行任务：
压缩build目录下的所有js文件
关于如何使用ant压缩脚本可以看《ant结合yui-compressor和closure-compiler—ant入门指南》。
其他简单的部分不再累述。
转自：http://www.36ria.com/5003
前面8篇ant教程，基本上没有太复杂的地方，在实际项目build中会遇到些复杂的场景。今天这篇教程，明河将通过一个真实的项目build过程，来综合演练下ant的用法，同时演示下如何处理ant中的循环任务。
项目简介
项目名：KF(KISSY-FORM)用途：kissy的form组件包
源码地址：https://github.com/minghe/kissy-form
KF目前还在开发阶段，完成的组件只有Uploader（异步文件上传），日后会发布更多的form组件，有兴趣的朋友可以关注下。
Uploader场景足够复杂，足以覆盖ant的大部分常用用法，请先下载KF源码到本地，找到Uploader的build.xml文件（form/src/uploader/build.xml）。
build目标
build（构建后的打包发布文件）必须和src（源码目录）目录结构保持一致。合并src下的所有js为render-pkg.js（排除themes、demo、auth、tests目录下的文件）
将render-pkg.js移动到build目录下，并改名为render.js
copy一份themes目录到build/form/uploader
遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js
删除除了index-pkg.js外的所有js文件
将index-pkg.js改名为index.js
压缩build目录下的所有js文件
copy一份uploader.swf文件到build目录下
任务是不是很多,也许你会觉得明河搞得这么复杂很蛋疼，实际上这些任务跟明河实际要实现的构建目标有关，不是本文重点，这里不讨论。
接下来来看明河是如何实现这些目标的。
由于需要用到第三方类库ant-contrib-1.0b3.jar，请先下载该文件到你的ant/lib目录下。
点此下载
ant实战
合并src下的所有js为render-pkg.js（排除themes、demo、auth、tests目录下的文件）<target name="concat">
<concat destfile="render-pkg.js" encoding="${charset}" outputencoding="${charset}">
<fileset dir="${src.dir}" includes="**/*.js" excludes="tests/*.js,demo/**/*.js,auth/*.js,themes/**/*.js"/>
<filterchain>
<deletecharacters chars=""/>
</filterchain>
</concat>
</target>关于concat的用法可以看《认识基础任务标签（上）—ant入门指南（3）》。
将render-pkg.js移动到build目录下，并改名为render.js
<target name="move"><br />
<move file="render-pkg.js" tofile="${uploader.build.dir}/render.js"/>
</target>改名操作不一定要用rename标签，使用move标签也可以间接实现。
copy一份themes目录到build/form/uploader，并删除目录下的html文件
<target name="move-theme">
<copy todir="${uploader.build.dir}/themes" overwrite="true">
<fileset dir="${src.dir}/themes"/>
</copy>
<delete>
<fileset dir="${uploader.build.dir}/themes" includes="**/*.html"/>
</delete>
</target>这部分的目标也非常简单，使用copy和delete即可实现。
遍历themes下的每个目录，将子目录下的所有js合并成index-pkg.js。删除除了index-pkg.js外的所有js文件。>将index-pkg.js改名为index.js
好，进入本文的重点内容，这个任务目标有个难点，就是如何在ant中处理循环？
如上图所示，build和src下的themes目录必须保持一致，而且必须遍历每个子目录合并该目录的js，所以需要用到循环。这时候你也许会想到编程语言中常用的for，ant有for标签吗？很影响ant并不是编程语言，没有直接的for标签，但通过第三方类库可以实现for循环，我们来看代码。
请确保你的本机上的ant下的lib目录下有ant-contrib-1.0b3.jar文件。
增加新的命名空间
<project name="uploader.build" default="build" basedir="." xmlns:ac="antlib:net.sf.antcontrib"> </project>
给你的project增加ac命名空间：mlns:ac=”antlib:net.sf.antcontrib”。
遍历themes下的每个目录
<target name="build-theme" depends="move-theme">
<ac:for param="file">
<path>
<fileset dir="${uploader.build.dir}/themes" includes="**/index.js"/>
</path>
<sequential>
<ac:var name="var.dir" unset="true"/>
<dirname property="var.dir" file="@{file}"/>
<echo>concat ${var.dir}</echo>
</sequential>
</ac:for>
</target>使用ac:for开启循环，param为参数名，供后面循环时更换文件路径时使用。
<path>
<fileset dir="${uploader.build.dir}/themes" includes="**/index.js"/>
</path>定义文件路径。取每个子目录下的index.js。
<sequential>
<ac:var name="var.dir" unset="true"/>
<dirname property="var.dir" file="@{file}"/>
<echo>concat ${var.dir}</echo>
</sequential>sequential标签，与for标签配合使用，标志循环开始。
ac:var定义var.dir变量（即子目录路径）可更改，留意ant定义的property是无法更改的。
dirname获取文件对应的子目录路径。
接下来具体执行任务：
<concat destfile="${var.dir}/index-pkg.js" encoding="${charset}" outputencoding="${charset}">
<fileset dir="${var.dir}" includes="*.js"/>
<filterchain>
<deletecharacters chars=""/>
</filterchain>
</concat>
<delete>
<fileset dir="${var.dir}/" includes="*.js" excludes="index-pkg.js"/>
</delete>
<rename src="${var.dir}/index-pkg.js" dest="${var.dir}/index.js"/>压缩build目录下的所有js文件
<target name="minify" depends="crlf">
<apply executable="java" verbose="true" dest="${uploader.build.dir}" failonerror="true" parallel="false">
<fileset dir="${uploader.build.dir}" includes="**/*.js"/>
<arg line="-jar"/>
<arg path="${compiler}"/>
<arg line="--charset utf8"/>
<arg value="--warning_level"/>
<arg value="QUIET"/>
<arg value="--js"/>
<srcfile/>
<arg value="--js_output_file"/>
<targetfile/>
<mapper type="regexp" from="^(.*)\.js$" to="\1-min.js"/>
</apply>
</target>关于如何使用ant压缩脚本可以看《ant结合yui-compressor和closure-compiler—ant入门指南》。
其他简单的部分不再累述。
完整代码如下：
<project name="uploader.build" default="build" basedir="." xmlns:ac="antlib:net.sf.antcontrib">
<description>Uploader Build File</description>
<property name="charset" value="utf-8"/>
<property name="tool.dir" location="../../../tool"/>
<property name="compiler" location="${tool.dir}/closure-compiler/compiler.jar"/>
<property name="form.build.dir" location="../../../build/form"/>
<property name="src.dir" location="."/>
<property name="uploader.build.dir" location="${form.build.dir}/uploader"/>
<!--合并源码文件，排除模板js-->
<target name="concat"> <concat destfile="render-pkg.js" encoding="${charset}" outputencoding="${charset}"> <fileset dir="${src.dir}" includes="**/*.js" excludes="tests/*.js,demo/**/*.js,auth/*.js,themes/**/*.js"/> <filterchain> <deletecharacters chars=""/> </filterchain> </concat> </target>
<!--移动合并后源文件到build目录下-->
<target name="move">
<move file="render-pkg.js" tofile="${uploader.build.dir}/render.js"/>
</target>
<!--删除build目录下的所有文件-->
<target name="clean-build">
<delete>
<fileset dir="${uploader.build.dir}" includes="**/*.js,**/*.css,**/*.swf"/>
</delete>
</target>
<!--移动uploader.swf-->
<target name="move-swf">
<copy file="plugins/ajbridge/uploader.swf" todir="${uploader.build.dir}/plugins/ajbridge"/>
</target>
<!--移动模板的源码文件到build目录下-->
<target name="move-theme"> <copy todir="${uploader.build.dir}/themes" overwrite="true"> <fileset dir="${src.dir}/themes"/> </copy> <delete> <fileset dir="${uploader.build.dir}/themes" includes="**/*.html"/> </delete> </target>
<!--构建模板，合并模板下的js文件，生成index-pkg.js，删除源文件，将index-pkg.js改成index.js-->
<target name="build-theme" depends="move-theme">
<ac:for param="file">
<path> <fileset dir="${uploader.build.dir}/themes" includes="**/index.js"/> </path>
<sequential>
<ac:var name="var.dir" unset="true"/>
<dirname property="var.dir" file="@{file}"/>
<echo>concat ${var.dir}</echo>
<concat destfile="${var.dir}/index-pkg.js" encoding="${charset}" outputencoding="${charset}"> <fileset dir="${var.dir}" includes="*.js"/> <filterchain> <deletecharacters chars=""/> </filterchain> </concat> <delete> <fileset dir="${var.dir}/" includes="*.js" excludes="index-pkg.js"/> </delete> <rename src="${var.dir}/index-pkg.js" dest="${var.dir}/index.js"/>
</sequential>
</ac:for>
</target>
<!--压缩前去除页面多余空白-->
<target name="crlf">
<fixcrlf includes="*.js" srcdir="${uploader.build.dir}" encoding="utf8" eol="crlf"></fixcrlf>
</target>
<!--压缩脚本-->
<target name="minify" depends="crlf">
<apply executable="java" verbose="true" dest="${uploader.build.dir}" failonerror="true" parallel="false">
<fileset dir="${uploader.build.dir}" includes="**/*.js"/>
<arg line="-jar"/>
<arg path="${compiler}"/>
<arg line="--charset utf8"/>
<arg value="--warning_level"/>
<arg value="QUIET"/>
<arg value="--js"/>
<srcfile/>
<arg value="--js_output_file"/>
<targetfile/>
<mapper type="regexp" from="^(.*)\.js$" to="\1-min.js"/>
</apply>
</target>
<target name="build" depends="concat,clean-build,move,build-theme,minify,move-swf">
</target>
</project>
转自：http://www.36ria.com/5003
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [转贴]Rational Rose 入门指南：项目经理学习路径
- Rational ClearCase入门指南: 项目经理学习路径
- Rational ClearCase入门指南: 项目经理学习路径
- 百度JavaScript项目Tangram 入门指南 - 高级篇
- 百度JavaScript项目Tangram 入门指南 - 初级篇
- Java的Build工具——Ant应用指南
- ant入门指南—web前端开发七武器（1）
- Ant 入门 Build.xml
- NDK入门项目实战
- ANT 发布项目中 build.xml 文件的详细配置
- Java的Build工具—Ant应用指南（1）
- Symbian入门指南－项目文件;命名规范
- 项目中，使用ant，最基本的build.xml文件的书写方式
- 使用ANT构建项目实例2步骤1: build.xml
- Java的Build工具—Ant应用指南（1）
- Java的Build工具——Ant应用指南
- Java的Build工具——Ant应用指南
- Java的Build工具—Ant应用指南（2）
- NDK入门项目实战
- Eclipse 中给项目自动创建ant的build.xml文件