Intellij IDEA下使用Ant構建工具壓縮合並js和css

時間 2019-11-11

標籤 intellij idea 使用 ant 構建工具壓縮合併 css 欄目 Eclipse 简体版

原文原文鏈接

作移動端項目的時候，頁面優化的時候存在一個問題，引入的多個css和js會發出多個http請求,對頁面的響應速度影響很大，全部想到用yahoo的一個js/css壓縮工具YUI Compressor css

這裏用的最新版本2.4.7.前端

在個人idea的工程目錄的webapp目錄下，我創建：java

一：創建了build目錄,放置ant腳本build.xml文件和 build.properties配置文件web

還創建了一個lib文件夾放置bulid的引入jar包服務器

因爲在實際項目中，咱們須要對不一樣的目錄的資源文件壓縮，所以通常經過循環完成多個目錄的壓縮。在本配置文件中，使用了額外的一個ant任務擴展包ant-contrib,自行下載。該包在ant的基礎上擴展了多個自定義任務。app

1;ant腳本build.xml文件代碼以下：webapp

<?xml version="1.0" encoding="UTF-8"?>
<project name="yui-compressor-demo" basedir="." default="yui-compress">
    <description>
        yui-compressor-demo
    </description>

    <!--導入配置文件 -->
    <property file="build.properties"/>
    <tstamp>
        <format property="build.time" pattern="yyyy-MM-dd-HH-mm"/>
    </tstamp>

    <!--設置ant-contrib.jar用於邏輯判斷 -->
    <taskdef resource="net/sf/antcontrib/antlib.xml">
        <classpath>
            <pathelement location="${lib.build.antcontrib}"/>
        </classpath>
    </taskdef>

    <!--設置編譯環境 -->
    <path id="build.classpath">
        <fileset dir="${lib.build}">
            <include name="*.jar"/>
        </fileset>
    </path>

    <!-- 建立build相關目錄 -->
    <target name="init">
        <delete dir="${deploy.dir}"/>
        <mkdir dir="${deploy.resource}"/>
    </target>

    <!--壓縮合並css、js文件 -->
    <target name="yui-compress" depends="init">
        <!-- 因爲須要對css和js壓縮，所以使用antcontrib ant擴展來作循環判斷 -->
        <for list="${resources.include}" param="resoucesPath">
            <!-- param表示在迭代的變量,使用時爲@{resourcesPath} -->
            <sequential>
                <!--建立資源目錄 -->
                <mkdir dir="${deploy.resource}/@{resoucesPath}/"/>
                <!--合併小文件爲一個資源文件 -->
                <concat
                        destfile="${deploy.resource}/@{resoucesPath}/merge-src.@{resoucesPath}"
                        fixlastline="true" encoding="UTF-8">
                    <fileset dir="${resource.dir}/@{resoucesPath}">
                        <exclude name="merge.@{resoucesPath}"/>
                    </fileset>
                </concat>
                <!--壓縮資源文件 -->
                <apply executable="java" parallel="false" failonerror="true">
                    <fileset dir="${deploy.resource}/@{resoucesPath}">
                        <include name="*.@{resoucesPath}"/>
                    </fileset>
                    <arg line="-jar"/>
                    <arg path="${lib.build.yuicompressor}"/>
                    <arg line="--charset UTF-8"/>
                    <srcfile/>
                    <arg line="-o"/>
                    <mapper type="glob" from="*.@{resoucesPath}"
                            to="${deploy.resource}/@{resoucesPath}/merge-min.@{resoucesPath}"/>
                    <targetfile/>
                </apply>
            </sequential>
        </for>
    </target>
</project>

build.properties配置文件代碼以下：ide

##工程根目錄
project.dir=..

##app目錄
resource.dir=${project.dir}/
resources.include=css,js

##依賴包
lib.dir = ${project.dir}/lib
lib.build=${lib.dir}/build
lib.build.yuicompressor= ${lib.dir}/build/yuicompressor-2.4.7.jar
lib.build.antcontrib= ${lib.dir}/build/ant-contrib-1.0b3.jar

#發佈目錄
deploy.dir=${project.dir}/deploy
deploy.resource=${deploy.dir}/resources

2:接着： svn

Ant Build面板中點擊+號，能夠引入一個build.xml配置文件，你能夠引入多個，點擊-號能夠刪除選中的配置文件。引入配置文件以後，選中須要運行的任務，能夠是Project，也能夠是Target，再點擊上面的播放按鈕就能夠Run了工具

3：運行以後的結果：

這個過程就把我原來項目下webapp目錄下的js和css文件夾下的多個js和多個css都壓縮合併到

新建的一個deploy目錄下了，這裏看到，合併的merge-src.css和merge-src.js爲源文件

壓縮合並的merge-min.css和merge-src.js就是我要的。這樣就能夠把這兩個文件部署上去用了，簡潔多了。

這裏我意識到Ant的強大：