使用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 该插件的配置参数说明