You may
have heard or even used SmartSprites (http://csssprites.org) by Carrot Search / Stanislaw Osinski.
A small tool that lets you bundle your images into sprite sheets improving your
webapp's performance.
Using SmartSprites
from over and over again, it can be tedious to always start the process manually. Since
we aren't using Ant but Maven more regularly we thought about a slim Maven
integration. While SmartSprites does offer a Maven artifact, we only found an outdated, unfinished Maven plugin to actually apply SmartSprites as part of a Maven build, and so came up with something ourselves.
We arrived at a working first version (in fact it's 1.5 1.8 by now) of such a plugin. It can surely be improved further, but working well for our needs.
Try it out!
The Plugin is available in the Maven central repository. This makes integration into your project really easy.
Just add
the following lines of code in your project’s pom.xml:
<plugin>
<groupId>net.jangaroo</groupId>
<artifactId>smartsprites-maven-plugin</artifactId>
<version>1.8</version>
<configuration>
<rootDirPath>src/main/sprites</rootDirPath>
<cssFiles></cssFiles>
<outputDirPath>${basedir}/target/generated-resources/
META-INF/resources/spritesheets</outputDirPath>
<documentRootDirPath></documentRootDirPath>
<logLevel>WARN</logLevel>
<spritePngDepth>AUTO</spritePngDepth>
<spritePngIeSix>false</spritePngIeSix>
<cssFileEncoding>UTF-8</cssFileEncoding>
<cssFileSuffix></cssFileSuffix>
</configuration>
<executions>
<execution>
<id>createSprites</id>
<phase>generate-resources</phase>
<goals>
<goal>createSprites</goal>
</goals>
</execution>
</executions>
</plugin>
You could
leave out the configuration part completely and default values would be used.
Following you’ll find the complete configuration guide. As all configuration attributes follow their SmartSprites counterparts closely, the description can be taken directly from the SmartSprites documentation.
Below you will find the correct camel case annotation and their default values if given.
Below you will find the correct camel case annotation and their default values if given.
<rootDirPath>
(default: src/main/sprites)<cssFiles>
<outputDirPath>
(default: ${basedir}/target/generated-resources/META-INF/resources/spritesheets)<documentRootDirPath>
<logLevel>
(default: WARN)<spritePngDepth>
(default: AUTO)
<spritePngIeSix>
(default: false)<cssFileEncoding>
(default: UTF-8)<cssFileSuffix>
(default: null)What about a demo application?
Please find
a demo application on github showing you how to bundle your sprites in a webapp.
It is a small example just showing you how to integrate the
SmartSprites-Maven-Plugin into a webapp.
The example
is rather straightforward so you just might want to take a look at the
following files:
- pom.xml
- line 23-40 for the SmartSprites part
- line 42-53 copy the generated ressources
- line 55-69 Jetty
- src/main/webapp/index.jsp
- divs for showing the images, line 16-21
- src/main/sprites/css/flags.css
- css configuration part
The other
files are just for making this example look a bit nicer.
Since we use the SmartSprites Maven plugin ourselves for building an Enterprise software product, it will be maintained for quite a while. So feel free to use it, too, and please don't hesitate to give feedback either here or at the Jangaroo user's group!
Since we use the SmartSprites Maven plugin ourselves for building an Enterprise software product, it will be maintained for quite a while. So feel free to use it, too, and please don't hesitate to give feedback either here or at the Jangaroo user's group!
1 comments:
Much appreciated!
Post a Comment