- 浏览: 1431182 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
ant 是 java 方面有用的构建工具,贯穿开发的编译,打包,测试,部署等各个阶段,其实对于前端开发,如果合理利用同样能够大幅减少繁琐的构建过程,摆脱各个平台晦涩异化的批处理脚本。
1.文件与目录准备操作
主要包括前期的一些准备工作:例如最常用的将源码复制到构建目录,准备进一步的操作,主要利用 copy 任务
<copy todir="目的地目录" encoding="读取编码" outputencoding="写入编码"> <fileset dir="文件来源目录" includes="**/*(文件名称正则)"/> </copy>
其中 fileset 表示无序文件集合,若要求有序,可替换为 filelist 有序列表以及广义的 path。 注意点为 fileset 的 includes 与 excludes 属性,其中 ** 匹配0个或多个目录,*匹配0个或多个文件。在copy过程中也可进行一些过滤处理,设置过滤器集合对源码进行一些标记替换,如加入构建时间:
<!--设置日期格式--> <tstamp> <format property="timestamp.isoformat" pattern="yyyy-MM-dd' 'HH:mm:ss" locale="en"/> </tstamp> <copy ..."> <fileset ... /> <filterset> <filter token="TIMESTAMP" value="${timestamp.isoformat}"/> </filterset> </copy>
即将源码中的预设标记 @TIMESTAMP@,替换为当前时间。其它还有 mkdir , move 等类似对对应批处理命令的加强。
2.压缩
对应于编译型语言构建的编译阶段,压缩优化 源码 ,推荐 css采用 yuicompressor ,JavaScript采用 google closure-compiler 。ant 可以通过 java 任务来方便地调用外部 java 程序,并且在同一 jvm 内运行也避免了通过 exec 执行外部程序的效率问题。不过由于压缩器每次只能针对单个源文件进行操作,这时就需要使用 ant 的 批处理任务(bulk task):apply
<apply executable="java" dest="目的地" failonerror="true" parallel="并行执行" > <fileset dir="css源地址" includes="**/*.css"/> <arg line="-jar"/> <arg path="yuicompressor.jar"/> <arg line="--charset ${charset}"/> <srcfile/> <arg line="-o"/> <targetfile/> <mapper type="regexp" from="^(.*)\.(css|js)$" to="\1-min.\2"/> </apply>
两个比较关键的元素为 srcfile 与 targetfile ,srcfile 注意用fileset的每个文件替换掉 srcfile,并且经过 mapper 转换后,用转换后包含完整路径的文件名替换掉 targetfile,达到了对文件集合中的每个文件逐一执行 yuicompressor 的目的。
3.打包
对于前端代码,打包的意义在于减少http链接数 ,主要用到的 ant 任务:concat ,将多个文件合并为一个文件
<concat destfile="目的文件" encoding="读取编码" outputencoding="写入编码"> <filelist .../> </concat>
同 copy 类似,若要求合并后的文件内容顺序,则使用filelist,否则使用fileset即可。
注意:
windows 下保存 utf-8 编码的文件时常带 bom 标记 ,而多个 bom 文件如果使用 concat 原封不动合并起来,那么实际上该合并后的脚本是语法错误的,这时合并时需要使用 filterchain 来消除文件中的 bom 标记:
<concat destfile="z-pkg.js" encoding="utf-8" outputencoding="utf-8"> <path location="x"/> <path location="y"/> <filterchain> <deletecharacters chars="" /> </filterchain> </concat>
而另一方面 ie 载入 utf-8 格式的文件如果不带 bom ,则会有奇异问题(缓存情况下的动态加载报错),这是最好合并后再使用 header 把 bom 加上:
<concat destfile="z-pkg.js" encoding="utf-8" outputencoding="utf-8"> <header filtering="no" trimleading="yes"></header> <path location="x"/> <path location="y"/> <filterchain> <deletecharacters chars="" /> </filterchain> </concat>
4.部署编码注意
2010-09-25 update:
打包与压缩只是单单对文本进行变换处理,并没有改变文件的编码,而最终部署到应用环境时,常常要求对编码的普适性,在中文环境中则不可避免会遇到各种各样的乱码,还好 javascript 支持 unicode 转义字符 ,
In string literals, regular expression literals, and identifiers, any character (code unit) may also be expressed as a Unicode escape sequence consisting of six characters, namely \u plus four hexadecimal digits.
通过 native2ascii 任务(yui compressor 可忽略这步),可以将代码中的中文字符转换为 "\uxxxx" 对应的 unicode 表示。
<native2ascii encoding="${charset}" src="${build.dir}" dest="${build.dir}" includes="**/*-pkg-min.js" > <mapper type="regexp" from="^(.*)\.js$" to="\1-ascii.js"/> </native2ascii>
属性同 copy 部分,mapper 同 apply 部分。
5.分支与循环
如果想要对构建过程进行细粒度的控制,例如根据依赖条件进行特定的构建,则可使用 ant contrib 第三方任务包的 if 任务 。if的判断条件可以直接使用ant的condition 任务的条件。
xmlns:ac="antlib:net.sf.antcontrib" <ac:if> <!--能否上网?--> <http url="http://www.github.com"/> <ac:then> <!--能--> </ac:then> <ac:else>. <!--不能--> </ac:else> </ac:if>
另外如果代码依赖于目录组织结构,相互间具备平行关系,则可使用循环 for 任务,依次对所有目录进行操作,使得构建具备良好的扩展性。
<ac:for param="biz"> <path> <dirset dir="循环目录集合父目录" includes="*"/> </path> <sequential> <!--通过 @{biz} 得到单个枚举--> </sequential> </ac:for>
6.多模块组织
当项目中多个模块间构建文件具备明显的重复目标(target)时,可通过 import 任务,利用 template 模式抽像公共目标为模板,各个子模块引入公共模板后进行特化的目标重写或者更简单的属性重定义。
公共模板:
<project> <target name="common"> 取 属性 ${p1} 进行操作 </target> </project>
子模块
<project> 定义 p1 属性 导入公共目标模板 <import ...> </project>
子模块可继承公共模板的所有目标,只需定义相应属性即可。
7.多模块构建
目前为止,一个项目的所有子模块都有了自己独立的构建文件,若我们想一次将整个项目构建,则需要对所有的子模块运行各自的构建,这时就需要 subant 任务,运行构建文件的集合。
<subant target="所有的构建目标" inheritall="子构建同父构建属性独立"> <fileset dir="所有构建文件来源" includes="**/build.xml"/> </subant>
其中fileset 即为构建文件的集合。
8.扩展 ant 命令
待续
总结
ant 初始是作为声明式语言而设计,而由于其接口开放性,自从出现了 ant contrib 等第三方任务包,使其具备了过程化,越来越接近于传统的批处理脚本,并且由于 java 天生的跨平台性以及 xml 完善的描述性语法,相信在 java 构建之外也会有广阔的天地。
评论
为了保持文件名不变,我试过用 <identitymapper/> ,但是没有任何效果...不知为啥?
仔细看:http://ant.apache.org/manual/Types/mapper.html例子,
使用正则表达式任何转换都可以达到
试试:
<mapper type="regexp" from="^(.*)/([^/]+\.(css|js))$" to="\1/min/\2"/>
为了保持文件名不变,我试过用 <identitymapper/> ,但是没有任何效果...不知为啥?
发表评论
-
continuation, cps
2013-09-12 16:49 2707起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3336一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14005cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5273目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4916最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6322css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7270promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2761closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2839首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6367兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3156背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2881如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2778简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2782场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2193分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6923作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2668html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2405这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2225深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3184场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
Ant 项目构建教程,可以正确指导如何搭建。
android使用ant自动构建,打包,更多参考文章 http://www.67tgb.com/?p=629
NULL 博文链接:https://loveseaside.iteye.com/blog/695644
使用ant构建helloworld,怎么使用ant构建一个项目,包括build。xml的结构和编写
在eclipse中使用ant灵活构建web应用.docx
Ant design前端UI框架使用教程.zip
ant-1.9.6.jar的构建工具,需要使用的朋友自行下载 具体的环境变量配置以及使用方法,可以去我博客中找,在此不进行详述了
从SVN获取源代码,及使用ANT来构建launchrj来打包工程
ant工具可以构建web应用,ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用ant工具可以构建web应用
介绍ANT的使用 技巧,介绍ant的脚本的使用方法,具体脚本命令。
ant是构建工具 2,什么是构建 概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个 3,ant的好处 跨平台 --因为ant是使用java实现的,所以它跨...
ant 自动化构建eclipse web项目, 并且打包发布,启动tomcat和浏览器
使用Ant构建批量压缩js、css文件脚本
使用Ant从svn更新项目、编译、打包,一键完成。
Apache Ant是一个基于Java的构建工具,它可以用于构建多种项目,但是目前主要被用于Java项目的构建, Ant是用Java语言编写,可以在多个操作系统中运行,目前在绝大部分的Java开源项目中,都选择使用Ant作为构建项目...
build.xml ant构建配置文件
Antdesign,Axure前端设计资源包,前端设计必备,移动终端兼容。
ant脚本构建工具,有详细的注释、用于构建程序war包,执行编译、修改、拷贝、远程上传程序war包、远程发布程序、远程重启服务器(tomcat)