Use this plugin in a project built using BroccoliJs to add CSS image sprites to it. Includes instructions for how to integrate into an ember-cli also included, and direct support is planned.
Supported stylesheet formats: SCSS, SASS, LESS, Stylus, CSS
npm install --save broccoli-sprite
You may optionally install one of the following (before installing broccoli-sprite)
- GraphicsMagick
- On Ubuntu:
sudo apt-get install graphicsmagick
- On Windows:
- On Ubuntu:
- node canvas
- Ensure that you have NodeJs version is v0.10.29 (>= v0.11.x will not work)
- On Ubuntu:
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++npm install -g canvas
In Brocfile.js, add the following:
var broccoliSprite = require('broccoli-sprite');
var spritesTree = broccoliSprite('public', {
src: [ 'public/images/sprites/*.png' ],
spritePath: 'assets/sprites.png',
stylesheetPath: 'assets/sprites.css',
stylesheet: 'css',
stylesheetOptions: {
prefix: 'sprite-',
spritePath: '/assets/sprites.png',
},
optiping: (process.env.NODE_ENV === 'production'),
});
… and be sure to merge spritesTree into the main tree.
Note that it is important to specify stylesheetOptions.spritePath,
as otherwise a relative path will be used,
and this will not work with fingerprinting,
which is enabled by default in when building with environment=production.
It used to be rather complicated, but now ember-cli's addon/ plugin system
has more features, and thus it is really as simple as npm installing a module.
You will, however, need to install a different package: ember-sprite. Look for a one-liner installation instruction there!
broccoli-sprite wraps around the excellent
node-sprite-generator
library.
When you call broccoliSprite, it accepts two arguments: tree and options.
This is any broccoli tree.
In an ember-cli app, this would most likely be 'public'.
These options are passed into node-sprite-generator, so
follow the options specified here.
You may also pass in optiping, which is read by
broccoli-sprite.
If true, then optiping
compression will be applied to the generated sprites.
This adds considerable build time,
but can drastically reduce your sprite file size.
There are a few things to note:
src is the full path, not the path within the tree.
Notice that in the example above,
the tree is 'public', and "public" is repeated in the path within src.
The same is not true for output paths though,
spritePath and stylesheetPath,
which must be specified relative to the tree.
Notice that "public" is not repeated within these paths.
Maintained by bguiz.
Additional contributions from: