+-++-++-++-++-++-+ |z||i||p||p||e||r| +-++-++-++-++-++-+
Zipper is a full-featured asset packaging plugin for Maven that aims at optimiziing your project's static resources at build time.
Most of the heavy lifting is done with Google's Closure Compiler and Yahoo's YUI compressor, but you'll also find CSS and JavaScript concatenation and compression, resource cache busting, and automated lint checking with JSLint.
The source code can be found on github. If you're having trouble, please let me know.
0.2 is the current version.
Add the following plugin definition to the build section of your POM file:
<plugin>
<groupId>com.joestelmach</groupId>
<artifactId>zipper</artifactId>
<version>0.2</version>
<executions>
<execution>
<goals>
<goal>zipper</goal>
</goals>
</execution>
</executions>
</plugin>Create a zipper.properties file in the src/main/resources directory:
webroot = src/main/webapp
output.dir = static
js.asset.script = **/*.js
css.asset.style = **/*.cssThis configuration will lint check and optimize all javascript and css files found under src/main/webapp, and then concatenate them to generate script.js and style.css, which will be placed in the target/classes/static directory along with a gzipped version of each.
By default, zipper will automatically be invoked during the package goal, but may be invoked directly:
mvn zipper:zipperZipper uses a properties file for configuration as opposed to the standard block of XML in the POM. This is justified by the need to access the configuration at runtime to support asset tags.
The following describes all possible options, none of which are required.
| option | default | discussion |
|---|---|---|
| webroot | src/main/webapp | The path to your project's web root directory. |
| output.dir | static | The name of the folder placed under target/classes that zipper should populate with optimized assets. |
| lint.skip | false | Forces all JavaScript lint checks to be skipped. |
| lint.exclude | Excludes the files matching the given pattern from lint checks. | |
| lint.failonwarning | false | When true, the Maven build will fail when a lint warning is encountered. |
| lint.option.xxx | Passes the given value for option xxx to JSLint. For example: lint.option.newcap=true | |
| js.optimize.level | WHITESPACE_ONLY | The Closure Compiler optimization level to use: WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, or ADVANCED_OPTIMIZATIONS |
| css.line.break | The column at which a line break should be inserted in the minified CSS. | |
| gzip | true | When true, a gzipped version of each grouped asset will be generated |
| bust.cache | true | When true, each asset's last modified time will be appended to all corresponding URLs, including those found within your CSS files. |
| js.asset.xxx | A pattern list defining a JavaScript asset named xxx. The asset will be a concatentation of the optimized version of all matching files in the order given. | |
| css.asset.xxx | A pattern list defining a CSS asset named xxx. The asset will be a concatentation of the minified version of all matching files in the order given. | |
| environment | development | The environment an asset tag uses to determine which assets to include. |
Concatenating and optimizing multiple assets into one file is a great idea for production environments, since we can significantly reduce both the number of HTTP requests and the size of their payload, but this optimization could lead to a significant decrease in productivity if we need to re-optimize our assets each time a change is made. In order to mitigate this, we need a method for the JSP to selectively include either the original or optimized assets depending on the current environment. Zipper has solved this problem with a custom JSP tag.
To get started, you'll need to add zipper as a dependency in your POM:
<dependency>
<groupId>com.joestelmach</groupId>
<artifactId>zipper</artifactId>
<version>0.2</version>
</dependency>
Then you can use the <zipper:asset> tag in your JSP pages:
<%@ taglib prefix="zipper" uri="http://joestelmach.com/zipper" %>
<zipper:asset type="css" name="style"/>
<zipper:asset type="js" name="script"/>This tag will either include the optimized asset with the given name, or each file the optimized asset consists of, depending on the environment. The last piece of the puzzle is letting zipper know which environment we're running in. This can be done either by setting a System property named environment, or by specifiying the environment option in the zipper.properties file.
When the environment value is development, the original files will be included. All other values will cause the optimized assets to be included. If you change this value at runtime, The JSP page will need to be re-compiled.