Aptana 是一款基于Eclipse的免费开源的软件,非常方便地编写 html, css, js, 有丰富完善的代码提示,包括大部分的 JS 框架的提示,比如 prototype/dojo/jquery/yui 等,相当方便。
由于工作开发环境是 JAVA,于是我用 Eclipse 安装了Aptana 的插件。
ANT,是 Apache 的一个开源项目,用于自动化调用程序完成项目的编译,打包,测试等。
Eclipse 内置了Ant,可以很方便地对JS, CSS进行压缩合并处理。
比如 js, css 文件都放在 web_assets 目录下,那么目录结构如下:
web_assets +-- ant-build //存放ant build xml 配置文件 +-- js.build.xml //处理 js 的配置文件 +-- js //最终的js文件 +-- lib //其它依赖的程序 +-- src //源文件
lib目录下有yuicompressor.jar, 用 YUI Compressor 压缩 JavaScript 和 CSS
ant-bild/js.build.xml 文件内容如下:
<project name="js.build" default="clean" basedir="../"> <description>js.build for ANT</description> <property name="src" location="src" /> <property name="build" location="build" /> <property name="target" location="js" /> <property name="lib" location="lib"/> <property name="charset" value="utf-8"/> <target name="init"> <mkdir dir="${build}"/> </target> <target name="concat" depends="init"> <concat destfile="${build}/core.js" encoding="${charset}" outputencoding="${charset}"> <path path="${src}/core.js" /> <path path="${src}/dialog.js" /> </concat> <replaceregexp match="@DEBUG@" replace="" flags="g" byline="true" file="${build}/core.js" encoding="${charset}" /> </target> <target name="compress" depends="concat"> <java jar="${lib}/yuicompressor.jar" fork="true"> <arg line="--type js --charset utf-8 ${build}/core.js -o ${target}/core.js"/> </java> </target> <target name="clean" depends="compress"> <delete dir="${build}"/> </target> </project>
这个 ant 配置文件要经过4个流程:
- target init 进行初始化处理,创建一个目录build,用于暂存文件;
- target concat 合并两个 js 文件,放到 build 目录下;
- target compress 调用 Yui Compressor 对合并后的 js 进行压缩
- target clean 进行清理动作,删除生成的 build 目录
ANT标签和属性解释:
- project 的 default 对应某个 target 的 name 值,表示默认执行哪个步骤;
- target 的 depends 对应其他某些 target 的 name 属性,表示依赖性;
- ${name} 可以引用 property 中定义的值。
- mkdir 标签创建一个目录
- replaceregexp, 正则表达式替换,将DEBUG标识替换为空,在正式环境不处理DEBUG信息
- 注意设置文件的 encoding 属性,否则可能有乱码情况
关于ANT的详细文档,请看官方手册:http://ant.apache.org/manual/
在 Eclipse 里右击这个文件,选择 Run As -> ANT Build
即可以控制台看到信息:
Buildfile: D:\eclipse\workspace\JS-Test\web_assets\ant-build\build.xml init: concat: compress: clean: [delete] Deleting directory D:\eclipse\workspace\JS-Test\web_assets\build BUILD SUCCESSFUL Total time: 875 milliseconds
这时候 js 目录就生成了合并压缩后的 core.js 文件,相当方便。