A BroccoliJs plugin for creating CSS image sprites

— 1 minute read

NPM

After much frustration attempting to get broccoli-compass to work, including asking a question on Stackoverflow, and getting no responses despite offering a bounty on it, I decided to bite the bullet and write my own BroccoliJs plugin.

It was a little tough, because I am completely new to BroccoliJs, having used GruntJs up until now. In order to build an app using ember-cli, however, switching to BroccoliJs was a necessity.

So I present broccoli-sprite, hot off the presses.

To install it:

npm install broccoli-sprite

To use it:

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-',
  },
});

More detailed instructions in the README.