Combine the CSS and JS compression tools configured by jdk and apache-ant with yuicompressor

Preface: Many css and js merge packaging tools are available on the Internet. The most popular tool is ant's combination of yui-compressor. In view of the learning and work needs, I learned this method today, for everyone to learn and exchange.

Step: 1. Install jdk and configure its variable environment. If you do not understand it, you are advised to learn http://www.cnblogs.com/niklas_f/articles/1494073.html, ~~~~

2. Download apache-ant and configure its variable environment. If you are not familiar with it, you are advised to learn http://book.36ria.com/ant/index.html ~~~~

3. The content of the xml file is mainly used. If you do not understand the content, you are advised to learn http://book.36ria.com/ant/index.html. The Code is as follows:

<?xml version="1.0" encoding="UTF-8"?><project name="concat" ="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. My file directory:

(1) asset is the css and js files merged and compressed;

(2) The module is the css and js files before compression;

(3) ant. properties is a reference to the yui-compressor.jar package, can also be directly written to build. xml;

Summary: in fact, this is very simple. I am not good at expressing my language. If you have any questions, please feel free to speak !!!!