使用yuicompressor-maven-plugin插件壓縮JS和CSS靜態資源

本文介紹通過使用yuicompressor-maven-plugin插件實現js及css代碼的自動壓縮，加快訪問速度，同時方便集成到持續集成環境中。

一、更改pom.xml配置文件，添加yuicompressor-maven-plugin插件

	<build>
	
		......
		
		<plugins>
			<plugin>
			  <groupId>net.alchim31.maven</groupId>
			  <artifactId>yuicompressor-maven-plugin</artifactId>
			  <version>1.3.0</version>
			  <executions>
			    <execution>
			      <phase>prepare-package</phase>
			      <goals>
			        <goal>compress</goal>
			      </goals>
			    </execution>
			  </executions>
			  <configuration>
			    <encoding>UTF-8</encoding>
			    <!-- 忽略 js 錯誤警告 -->
			    <jswarn>false</jswarn>
			    <nosuffix>true</nosuffix>
			    <linebreakpos>-1</linebreakpos>
			    
			    <includes>
			      <include>**/**/*.js</include>
			      <include>**/**/*.css</include>
			    </includes>
			    <excludes>
			      <exclude>**/**min.js</exclude>
			    </excludes>
			    <aggregations>
			      <!-- 合併壓縮JS -->
			      <aggregation>
			        <removeIncluded>true</removeIncluded>
			        <insertNewLine>true</insertNewLine>
			        <inputDir>${assetsBasePath}</inputDir>
			        <output>${assetsBasePath}/js/application.js</output>
			        <includes>
			          <include>${assetsBasePath}/js/jquery.js</include>
			          <include>${assetsBasePath}/js/jquery.extend.js</include>
			          <include>${assetsBasePath}/js/bootstrap.js</include>
			          <include>${assetsBasePath}/js/bootstrap-datetimepicker.js</include>
			          <include>${assetsBasePath}/js/locales/bootstrap-datetimepicker.zh-CN.js</include>
			          <include>${assetsBasePath}/js/placeholder.js</include>
			          <include>${assetsBasePath}/js/typeahead.js</include>
			          <include>${assetsBasePath}/js/jquery.validate.js</include>
			          <include>${assetsBasePath}/js/locales/jquery.validate.zh.js</include>
			          <include>${assetsBasePath}/js/jquery.dataTables.js</include>
			          <include>${assetsBasePath}/js/locales/jquery.dataTables.zh.js</include>
			          <include>${assetsBasePath}/js/dataTables.bootstrap.js</include>
			          <include>${assetsBasePath}/js/dataTables.responsive.js</include>
			          <include>${assetsBasePath}/js/init.js</include>
			        </includes>
			        <excludes>
			          <exclude>**/**min.js</exclude>
			        </excludes>
			      </aggregation>
			      
			      <!-- 合併壓縮CSS -->
			      <aggregation>
			        <removeIncluded>true</removeIncluded>
			        <insertNewLine>true</insertNewLine>
			        <inputDir>${assetsBasePath}</inputDir>
			        <output>${assetsBasePath}/css/application.css</output>
			        <includes>
			          <include>${assetsBasePath}/css/bootstrap.css</include>
			          <include>${assetsBasePath}/css/bootstrap-custom.css</include>
			          <include>${assetsBasePath}/css/font-awesome.css</include>
			          <include>${assetsBasePath}/css/bootstrap-datetimepicker.css</include>
			          <include>${assetsBasePath}/css/steps.css</include>
 					  <include>${assetsBasePath}/css/dataTables.bootstrap.css</include>
 					  <include>${assetsBasePath}/css/dataTables.responsive.css</include>
			        </includes>
			        <excludes>
			          <exclude>**/**min.css</exclude>
			        </excludes>
			      </aggregation>
			    </aggregations>					
			  </configuration>
			</plugin>
		</plugins>
	</build>

解釋1：execution表示執行的操作，可以指定操作在maven的哪個生命週期運行，不同的生命週期對打包操作會有影響，如配置在prepare-package階段運行壓縮（配置在這個階段壓縮之後，就不用再通過配置maven-war-plugin插件來防止壓縮文件被覆蓋的問題）：

<executions>
<execution>
  <phase>prepare-package</phase>
  <goals>
	<goal>compress</goal>
  </goals>
</execution>
</executions>

解釋2：經驗證發現該插件運行時所在的位置是項目編譯打包的輸出路徑，比如項目名稱爲abc，當前文件夾應爲project_root/target/abc。maven在打包的時候會把所有編譯的文件、webapp下的文件複製到該目錄中爲打包做準備。

解釋3：include節點用於配置需要壓縮的文件路徑，可以使用通配符，*表示一個文件或路徑名，**表示多個文件或路徑名，exclude節點用於配置排除壓縮的文件路徑，exclude只會排除include中設置的路徑下的文件或路徑。

二、常見錯誤

壓縮js文件時，如果代碼中包含debugger，yuicompressor會認爲其爲保留關鍵字，註釋或刪除可以使打包正常進行，也可以使用eval(‘debugger’)替換debugger。

[ERROR] …srcmainwebappjsScroll.js:line 371:column 11:identifier is a reserved word debugger;

[ERROR] …srcmainwebappjsScroll.js:line 1:column 0:Compilation produced 1 syntax errors.

參考文獻：

1、http://www.chawenti.com/articles/16664.html  使用yuicompressor-maven-plugin壓縮js及css文件 – 我們

2、http://alchim31.free.fr/mvnsites/yuicompressor-maven-plugin/compress-mojo.html 該插件的配置參數說明