PrimeFaces压缩,合并JavaScript和CSS

在本教程中，我们将向您展示如何使用primefaces扩展–Maven插件，压缩JavaScript和CSS文件，优化网络资源的例子，使网站的载入速度加快.

更详细的请参照 PrimeFaces – Getting Started Closure Compiler. 

1.工程结构

看下面的项目结构。它由3个CSS文件，和2个JavaScript文件。稍后我们将压缩这些文件。

2.复制资源

首先，使用Maven资源插件复制所有资源（JS和CSS）到“目标”文件夹，但bootstrap-dropdown.js被排除在外。

<properties>
  <project.theme.name>default</project.theme.name>
  <project.resources.home.folder>
	${project.basedir}/src/main/webapp/resources/${project.theme.name}/
  </project.resources.home.folder>
  <project.resources.build.folder>
	${project.build.directory}/temp-resources/${project.theme.name}/
  </project.resources.build.folder>
</properties>
 
<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-resources-plugin</artifactId>
  <version>2.5</version>
  <executions>
    <execution>
	<id>copy-resources</id>
	<phase>generate-resources</phase>
	<goals>
	    <goal>copy-resources</goal>
	</goals>
	<configuration>
	    <outputDirectory>${project.resources.build.folder}/</outputDirectory>
	    <resources>
	      <resource>
		<directory>${project.resources.home.folder}</directory>
		<filtering>true</filtering>
		<includes>
		  <include>**/*.css</include>
		  <include>**/*.js</include>
		</includes>
		<excludes>
		  <exclude>**/bootstrap*.js</exclude>
		</excludes>
	    </resource>
	   </resources>
	</configuration>
    </execution>
  </executions>
</plugin>

3. 压缩与结合

使用resources-optimizer-maven-plugin去整合这些资源为一个文件.并且复制到目标处

<plugin>
  <groupId>org.primefaces.extensions</groupId>
  <artifactId>resources-optimizer-maven-plugin</artifactId>
  <version>0.5</version>
    <executions>
      <execution>
	<id>optimize</id>
	<phase>prepare-package</phase>
	<goals>
		<goal>optimize</goal>
	</goals>
      </execution>
      </executions>
	<configuration>
	  <warningLevel>QUIET</warningLevel>
	  <suffix>-min</suffix>
	  <failOnWarning>false</failOnWarning>
	  <resourcesSets>
	   <resourcesSet>
		<inputDir>${project.resources.build.folder}/css/</inputDir>
		<includes>
			<include>**/*.css</include>
		</includes>
		<aggregations>
		  <aggregation>
			<removeIncluded>false</removeIncluded>
			<outputFile>
			${project.resources.home.folder}/css/${project.artifactId}.aggr.css
			</outputFile>
		  </aggregation>
		</aggregations>
	  </resourcesSet>
	    <resourcesSet>
		<inputDir>${project.resources.build.folder}/js/</inputDir>
		<includes>
		    <include>**/*.js</include>
		</includes>
		  <aggregations>
		   <aggregation>
			<removeIncluded>false</removeIncluded>
			<outputFile>
			${project.resources.home.folder}/js/${project.artifactId}.aggr.js
			</outputFile>
		   </aggregation>
		  </aggregations>
	   </resourcesSet>
	</resourcesSets>
 
  </configuration>
</plugin>

在这里， 3个 CSS 文件将被 压缩 成 projectname.aggr.css ， 和 javsscript 文件压缩到 projectname.aggr.js

4. Cleaning

Before build, remember clean the resources like “target” folder and previous “.aggr” files, to avoid duplicated content.

<plugin>
  <artifactId>maven-clean-plugin</artifactId>
  <version>2.2</version>
  <executions>
    <execution>
	<id>auto-clean</id>
	<phase>generate-resources</phase>
	<goals>
		<goal>clean</goal>
	</goals>
	<configuration>
	  <filesets>
		<fileset>
		<directory>${project.resources.home.folder}</directory>
		<includes>
			<include>**/*.aggr.css</include>
			<include>**/*.aggr.js</include>
		</includes>
		</fileset>
	  </filesets>
	</configuration>
  </execution>
 </executions>
</plugin>

5. Build It

Done, uses command mvn prepare-package to start the compress and combine process.

翻译自: http://www.mkyong.com/jsf2/primefaces/primefaces-compress-and-combine-javascript-and-css/