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 will need to install at least 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',
},
});
โฆ 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 install
ing 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.
There are a few things to note though:
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.
- Make work with live-reload
- Make it work as an ember-cli registry plugin, so that there is no need to extend
EmberApp
inBrocfile.js
- Dependent on ember-cli release where plugin registry is exposed. See this issue,
- Reference example: ember-cli-esnext
- Landed with ember-sprite
- Dependent on ember-cli release where plugin registry is exposed. See this issue,
- Integrate into
EmberApp.styles()
such that CSS for sprites is concatenated and minifed together with CSS of app- Generated sprite images exported into
style
tree - Works in conjunction with registry plugin system, so that there is no need to extend
EmberApp
inBrocfile.js
- Landed with ember-sprite
- Generated sprite images exported into
- Add caching to speed up incremental builds
Maintained by bguiz.
Additional contributions from: