代码改变世界

使用ANT对Js/Css文件进行合并和压缩处理 [转]

2012-03-07 20:58  VVG  阅读(3262)  评论(0)  编辑  收藏  举报

  • 使用ANT对Js/Css文件进行合并和压缩处理

    Tag：javascript css ant
     
     

    减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的.

    这里介绍利用ANT来自动进行文件合并和压缩.

    3.1. javascript文件合并

    在开发阶段常常会把javascript文件分成几部分来写, 比如模块式的开发或多人合作, 或者使用一些外部库. 在生产环境下将比较小的文件合并成一个可以减少HTTP请求的次数, 从而达到优化的目的.

    这里假设你对ANT有一定了了解, 如果没有可以参考[ANT简单介绍].

    Example 1: 例子

    比如现在需要把 js 目录下的 1.js 2.js 3.js 4.js 四个文件合并的成 all.js 一个文件, ANT文件可以这样写.

    <target name="concatenate"> <concat destfile="all.js"> <fileset dir="js" includes="*.js" /> </concat> </target>

    fileset 中设置目录和 *.js 即可.

    当几个js文件后依赖关系的时候, 合并的顺序则会比较重要了, 这里演示比如需要把 1.js 2.js 两个文件按顺序放在合并文件的最前面, 而 3.js 的 4.js 和其他的文件的顺序并不重要的写法:

     <property name="core.files" value="1.js, 2.js" /> <target name="concatenate"> <concat destfile="js"> <filelist dir="js" files="${core.files}" /> <fileset dir="js" includes="*.js" excludes="${core.files}" /> </concat> </target>

    这里我们现在filelist里面定义几个需要讲究顺序而必须放在合并最开头的几个文件, 比如一个core文件, 然后在fileset里面把几个文件设为 excludes , 则可保存这几个文件放在最开头.

    3.2. 压缩javascript文件

    这里使用 Google Closure 来进行压缩, 需要 Java 运行环境. Clocure 并不接收一次压缩多个文件的选项, 所以这里使用 Ant 的 apply 来完成批量压缩.

    <target name="minify"> <apply executable="java" parallel="false"> <fileset dir="${js.dir}"> <include name="*.js" /> </fileset> <arg line="-jar" /> <arg path="${closure-jar}" /> <arg value="--warning_level" /> <arg value="QUIET" /> <arg value="--compilation_level" /> <arg value="SIMPLE_OPTIMIZATIONS" /> <arg value="--js_output_file" /> <targetfile /> <arg value="--js" /> <mapper type="glob" from="*.js" to="${js.dir}/*.min.js" /> </apply> </target>

    如果你用过 Closure 的命令行工具, 那么这里就会觉得比较熟悉了, 其实就和命令行下的管道命令差不多.

    这里关键的主要在于 fileset 和 mapper , 前者是类似命名行下的 find 命名,利用文件名匹配来找到需要压缩的文件列表, 然后 mapper 的功能在与利用原文件名来设置输出文件名, 一般行的都是把类型 script.js 命名为 script.min.js 即可.

    ${closure-jar} 定义的是 Closure 的jar文件路径, 可以从Google Closure Code 下载.

    3.3. 压缩CSS文件

    这里使用 yuicompressor 来进行CSS文件的压缩, 同样需要 Java 运行环境.

    <!-- minify css files --> <apply executable="java" parallel="false"> <fileset dir="${public.dir}/css"> <include name="*.css" /> <exclude name="*.min.css" /> </fileset> <arg line="-jar" /> <arg path="${yuicompressor-jar}" /> <arg line="--charset utf-8" /> <arg line="-v" /> <srcfile /> <arg line="-o" /> <mapper type="glob" from="*.css" to="${public.dir}/css/*.min.css" /> <targetfile/> </apply>

    这里和压缩js的结构一样, 只是参数不太相同而已.

    ${yuicompressor-jar} 可以从 Yahoo Yui 上下载.

    原文：http://lds2008.blogbus.com/logs/115112756.html