jdk、apache-ant结合yuicompressor配置的CSS与JS合并压缩工具

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前序：网上很多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>