在Eclipse里使用ANT合并压缩JS&CSS

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个流程：

1. target init 进行初始化处理，创建一个目录build，用于暂存文件；
2. target concat 合并两个 js 文件，放到 build 目录下；
3. target compress 调用 Yui Compressor 对合并后的 js 进行压缩
4. 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 文件，相当方便。

This entry was written by  FoxLing, posted on  2010年07月6日 at 00:38, filed under  JS/AJAX/DOM and tagged  ant,  Aptana, eclipse. Bookmark the  permalink. Follow any comments here with the  RSS feed for this post.  Post a comment or leave a trackback:  Trackback URL.

后期会方式测试文件