Managing Sprites with SmartSprites and Smartsprites-Maven-Plugin

Jangaroo is not only about ActionScript-to-JavaScript compilation, but generally about providing free, Open Source tools for Enterprise Web Developers. So today's about a small tool we just added to the stack that integrates assembly of CSS sprites into your Maven build process.

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.

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