文章目录

  1. 1. 配置代码
  2. 2. 合并所有源目录中的JavaScript文件
  3. 3. 合并所有源文件中的JavaScript文件,按照优先顺序排序
  4. 4. 合并指定路径的文件
  5. 5. 行尾结束符
  6. 6. 文件头、文件尾

前端使用ant的一个核心任务,就是合并js/css文件以减少http请求。

配置代码

<!-- bulid 用来放置最终构建后的文件,理想情况下这个目录不应该提交。-->
<property name="build" location="build"/>
<!-- src 用来放置所有的源文件,包括用来进行文件分组的子目录-->
<property name="src" location="src"/>
<!-- docs 用来存放文档目录-->
<property name="docs" location="docs"/>
<!-- 编码-->
<property name="charset" value="utf-8"/>

合并所有源目录中的JavaScript文件

<target name="concat">
    <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}">
        <fileset dir="${src}" includes="**/*.js" />
    </concat>
</target>

注意:在构建目录下生成all.js文件,需要注意的是,这些文件按照字母排序的顺序有序链接在一起。

合并所有源文件中的JavaScript文件,按照优先顺序排序

<target name="concat">
    <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}">
        <filelist dir="${src}" files="first.js,second.js" />
        <fileset dir="${src}" includes="**/*.js" excludes="first.js,second.js" />
    </concat>
</target>

合并指定路径的文件

<target name="concat">
    <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}">
        <path path="${src}/common1.js" />
        <path path="${src}/common2.js" />
        <path path="${src}/common3.js" />
    </concat>
</target>

行尾结束符

<target name="concat" fixlastline="yes">
</target>

注意:把文件合并在一起,会遇到最后一行如果没有换行符的情况,如果把这些文件与其他文件合并在一起,可能会导致语法错误,设置fixlastline属性为“yes”,任务就会在最后一行没有换行符的时候自动添加一个换行符。

文件头、文件尾

<target name="concat">
    <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}">
        <header>/* 文件头描述 */</header>
        <fileset dir="${src}" includes="**/*.js" />
        <footer>/* 文件尾描述 */</footer>
    </concat>
</target>

注意:文件头和文件尾不是一定需要添加的,不过有了这个功能,我们可以在其中加入我们想要的内容,当Ant执行build.xml文件时,我们就可以把我们想要的信息“前置”或者“追加”到生成文件中。

(完)

微信公众号

文章目录

  1. 1. 配置代码
  2. 2. 合并所有源目录中的JavaScript文件
  3. 3. 合并所有源文件中的JavaScript文件,按照优先顺序排序
  4. 4. 合并指定路径的文件
  5. 5. 行尾结束符
  6. 6. 文件头、文件尾