JavaScript自动化(二) 文件合并
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/xwzhj/2019/0611/355.html
前端使用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文件时,我们就可以把我们想要的信息“前置”或者“追加”到生成文件中。