maven 壓縮、合并 js, css

我們知道在 Web 應用開發中為了提高用戶端響應速度，需要将頁面使用的資源最小化，yuicompressor-maven-plugin 能夠很好的實作js, css的壓縮、合并處理。

先來看看工程結構：

project

└─main

    ├─java

    └─webapp

        ├─app

        │  │  index.html

        │  │  

        │  ├─css

        │  │      style.css

        │  │      

        │  └─js

        │          app1.js

        │          app2.js

        │          jquery-1.9.1.min.js

        │          

        └─WEB-INF

                web.xml

index.html 裡引用 app1.js 和 app2.js， 首先通過 yuicompressor-maven-plugin 對 app1.js，app2.js 進行壓縮、合并。

(http://alchim.sourceforge.net/yuicompressor-maven-plugin/index.html，需翻牆）

pom.xml 配置如下，其中所有已經是 min 化的檔案會被排除比如：jquery-1.9.1.min.js

<plugin>
	<groupId>net.alchim31.maven</groupId>
	<artifactId>yuicompressor-maven-plugin</artifactId>
	<version>1.3.0</version>
	<executions>
		<execution>
			<goals>
				<goal>compress</goal>
			</goals>
		</execution>
	</executions>
	<configuration>
		<encoding>UTF-8</encoding>
		<!-- 忽略 js 錯誤警告 -->
		<jswarn>false</jswarn>
		<nosuffix>true</nosuffix>
		<linebreakpos>-1</linebreakpos>
		<includes>
			<include>app/js/*.js</include>
			<include>app/js/*.css</include>
		</includes>
		<excludes>
			<exclude>**/**min.js</exclude>
		</excludes>
		<aggregations>
			<aggregation>
				<removeIncluded>true</removeIncluded>
				<insertNewLine>true</insertNewLine>
				<inputDir>${project.build.directory}/${project.build.finalName}</inputDir>
				<output>${project.build.directory}/${project.build.finalName}/app/js/app.pack.js</output>
				<includes>
					<include>app/js/app*.js</include>
				</includes>
				<excludes>
					<exclude>**/**min.js</exclude>
				</excludes>
			</aggregation>
		</aggregations>					
	</configuration>
</plugin>
           

這裡我将 app1.js 和 app2.js 合并成 app.pack.js， 但光合并還不行。index.html 裡仍然是引用 app1.js 和 app2.js，是以必須替換掉。

下一步用 maven-replacer-plugin 來完成替換工作。

為了通用性（你不必寫死 js或者css檔案名，并且支援多組的檔案合并和替換），采用一個特殊的辨別在 html 裡來圈定要替換的js，這樣就可以通過這個辨別來尋找替換目标。

index.html

<script type="text/javascript" src="app/js/jquery-1.9.1.min.js"></script>
	<!-- mergeTo:app.pack.js -->
	<script type="text/javascript" src="app/js/app1.js"></script>
	<script type="text/javascript" src="app/js/app2.js"></script>
	<!-- mergeTo -->
           

如上所示，所有 <!-- mergeTo:xxx.js --> ... <!-- mergeTo --> 區間的 js 引用會被替換成 xxx.js 

增加的 maven-replacer-plugin pom 配置如下：

<plugin>
    <groupId>com.google.code.maven-replacer-plugin</groupId>
    <artifactId>replacer</artifactId>
    <version>1.5.2</version>
    <executions>
        <execution>
            <phase>package</phase>
            <goals>
                <goal>replace</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <file>${project.build.directory}/${project.build.finalName}/app/index.html</file>
        <replacements>
            <replacement>
                <token>
                    <![CDATA[
                    <!-- mergeTo:([^\s]*) -->(.*?)<!-- mergeTo -->
                    ]]>
                </token>
                <value>
                    <![CDATA[
                    <script type="text/javascript" src="$1" ></script>
                    ]]>
                </value>
            </replacement>
    	</replacements>      
        <regexFlags>
            <regexFlag>CASE_INSENSITIVE</regexFlag>
            <regexFlag>DOTALL</regexFlag>
        </regexFlags>
    </configuration>
</plugin>
           

maven-replacer-plugin 支援正則替換正好滿足我的需求，注意：

(1) 替換 <!-- mergeTo:xxx.js --> 區間的時候，使用的是正則 "單行” 模式，即 DOTALL

(2) 因為 yuicompressor-maven-plugin 執行在 prepackage 是以 maven-replacer-plugin 的 phase 要修改為 package

這樣在開發時，增加 js 也不用再重複修改 pom 配置，當然 js 檔案命名時最好遵從一定的規則，以便在 compress 時友善篩選。