In this tutorial, we will show you how to use PrimeFaces extensions – Maven plugin, to compress and combine JavaScript and CSS files, a web resources optimization example, to make web site load faster.

Tool tested :

  1. PrimeFaces 3.3
  2. PrimeFaces-Extensions 0.5
  3. Maven 3.0.3
Note
This guide is example-driven, for detail explanation and all other plugin tags and options, please visit this excellent guide – PrimeFaces – Getting Started Closure Compiler.

1. Project Structure

See following project structure. It consists of 3 CSS files, and 2 JavaScript files. Later we will compress n combine these files.

project structure

2. Copy Resources

First, uses maven-resources-plugin to copy all resources (js and css) to “target” folder, but bootstrap-dropdown.js will be excluded.


<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>
copy resources

3. Compress and Combine

Define resources-optimizer-maven-plugin to compress and combine those resources into a single file. And copy back to the “source” folder.


<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>

In this build, 3 CSS files will be compress or minimize and combine into a projectname.aggr.css, and JavsScript files into projectname.aggr.js

after-combine-copy-back

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.

Download Source Code

Download complete pom.xml – pom.xml.zip (1 KB)

References

  1. Google Closure Compiler
  2. PrimeFaces Extensions
  3. Getting started with Closure Compiler
  4. Maven build life cycles