前序:网上很多css与js合并打包工具,其中最流行的就是ant结合yui-compressor,鉴于学习与工作需要今天就学习了一下这种方式,供大家学习交流。
步骤:1、安装jdk,并配置其变量环境;有不懂的同学建议学习http://www.cnblogs.com/nicholas_f/articles/1494073.html,哈哈~~~~
2、下载apache-ant,并配置其变量环境;有不懂的同学建议学习http://book.36ria.com/ant/index.html,呃呃~~~~
3、主要就是xml文件内容,有不懂的同学建议学习http://book.36ria.com/ant/index.html,代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<project name="concat" default="build">
<property name="module" value="module"/>
<property name="asset" value="asset"/>
<property name="js" value="asset/js"/>
<property name="css" value="asset/css"/>
<property name="charset" value="utf-8"/>
<!-- yuicompressor -->
<property file="ant.properties" />
<!-- concat_css_js -->
<target name="concat_css">
<!-- delete repeat -->
<delete>
<fileset dir="${css}" includes="**/*" ></fileset>
<fileset dir="${js}" includes="**/*" ></fileset>
</delete>
<echo>concat css js begin</echo>
<concat destfile="${css}/book_detail.css" encoding="${charset}" outputencoding="${charset}" append="false" fixlastline="true">
<path path="module/global/global.css" />
<path path="module/global/btn/_btn.css" />
<path path="module/global/_form.css" />
<path path="module/dialog/_dialog.css" />
<path path="module/dialog/_dialog_login.css" />
<path path="module/header/_header.css" />
<path path="module/global/_announc.css" />
<path path="module/footer/_footer.css" />
<path path="module/book_detail/book_detail.css" />
</concat>
<concat destfile="${js}/book_detail.js" encoding="${charset}" outputencoding="${charset}" append="false" fixlastline="true">
<path path="module/global/global.js" />
<path path="module/book_detail/book_detail.js" />
</concat>
<concat destfile="${css}/order.css" encoding="${charset}" outputencoding="${charset}" append="false" fixlastline="true">
<path path="module/global/global.css" />
<path path="module/global/btn/_btn.css" />
<path path="module/global/_form.css" />
<path path="module/dialog/_dialog.css" />
<path path="module/dialog/_dialog_login.css" />
<path path="module/dialog/_dialog_order_confirm.css" />
<path path="module/header/_mini_header.css" />
<path path="module/footer/_footer.css" />
<path path="module/order/order.css" />
</concat>
<echo>concat css js end</echo>
</target>
<!-- minify-css -->
<target name="minify-css">
<apply executable="java" verbose="true" dest="${css}" failonerror="true" parallel="false">
<fileset dir="${css}" includes="**/*.css"/>
<arg line="-jar"/>
<arg path="${compressor}"/>
<arg line="--charset utf-8"/>
<arg value="--type"/>
<arg value="css"/>
<arg value="-o"/>
<targetfile/>
<mapper type="glob" from="*.css" to="*-min.css"/>
</apply>
<!-- delete concat -->
<delete>
<fileset dir="${css}" includes="**/*" excludes="**/*-min.css"></fileset>
</delete>
</target>
<!-- minify-js -->
<target name="minify-js">
<apply executable="java" verbose="true" dest="${js}" failonerror="true" parallel="false">
<fileset dir="${js}" includes="**/*.js"/>
<arg line="-jar"/>
<arg path="${compressor}"/>
<arg line="--charset utf-8"/>
<arg value="--type"/>
<arg value="js"/>
<arg value="-o"/>
<targetfile/>
<mapper type="glob" from="*.js" to="*-min.js"/>
</apply>
<!-- delete concat -->
<delete>
<fileset dir="${js}" includes="**/*" excludes="**/*-min.js"></fileset>
</delete>
</target>
<!-- build -->
<target name="build" depends="concat_css,minify-css,minify-js">
<echo>Done!</echo>
</target>
</project>
5、我的文件目录:
说明:(1)asset是合并与压缩后的css和js文件;
(2)module是合并压缩前的css和js文件;
(3)ant.properties是yui-compressor.jar包的引用,也可以直接写到build.xml中;
总结:其实这个是很简单的,我语文不好表达不好啊,有问题欢迎吐槽交流!!!!
ゞ╃漃瘼青賰---专注于提升web前端开发技术