Main Tutorials

PrimeFaces compress and combine JavaScript and CSS

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

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
3 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
searchskull
6 years ago

This site certainly has all of the info I needed about this subject
and didn’t know who to ask.

Will Fischer
9 years ago

Hi, this worked perfectly for me. Thanks a lot for writing it in a easy to understand way. I have a question. Isn’t it easier to compress CSS and JS files in a online compressor (like this one: http://www.giftofspeed.com/javascript-compressor/ or this one: http://iceyboard.no-ip.org/projects/css_compressor ) ?? It seems that often I only have a few of those files and it takes me about 2 minutes to compress and re-upload them. What are your thoughts on this? Thanks!

amarnath
11 years ago

Hi mkyong,

Thanks for the tutorial.
It works and the compressed js and css files got generated in main resource folders.

whether i need to change the js and css paths in all xhtml files to this compressed files[.aggr].

Early response from you will be much helpful. Thanks.