How to add a broccoli plugin to ember-cli app with live-reload?

Question

When I run ember build , the broccoli plugin runs correctly, and outputs the sprite CSS file and sprite PNG file into the assets directory.

When I run ember serve , the same thing happens initially too. However, when I save any file, causing Broccoli to rebuild its tree, the sprite CSS and PNG files are no longer merged into the main app tree, and when the page refreshes from live-reload the page no longer displays the sprited images.

• Why does this happen?
• How do I ensure that the outputs from my plugin get merged every time?

---

Details :

After asking this question , and getting no responses despite putting a bounty on it, I decided to write my own broccoli plugin for CSS image sprite generation: broccoli-sprite

What I have tried so far :

#1

I am merging the output from my plugin with that of the main app using this in Brocfile.js

    var app = new EmberApp(/* ... */);
    /* other ember-cli init for app */
    var broccoliSprite = require('broccoli-sprite');
    var spritesTree = broccoliSprite(/* ... */);
    var appTree = app.toTree();
    var broccoliMergeTrees = require('broccoli-merge-trees');
    module.exports = broccoliMergeTrees([spritesTree, appTree]);

I understand that this might not be the way to go, and I am fairly new to both ember-cli and broccoli, so pardon the newbie error, if this is one.

#2

In Brocfile.js , extend EmberApp to include a new tree for sprites :

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var broccoliSprite = require('broccoli-sprite');

EmberApp.prototype.sprites = function() {
  console.log('EmberApp.prototype.sprites');
  var spritesTree = broccoliSprite('public', this.options.sprite);
  return spritesTree;
};
var originalEmberAppToArray = EmberApp.prototype.toArray;
EmberApp.prototype.toArray = function() {
  var sourceTrees = originalEmberAppToArray.apply(this, arguments);
  sourceTrees.push(this.sprites());
  return sourceTrees;
};

Answer 1

The next release of Ember CLI will have first class support for add-ons. Thanks to Robert Jackson.

Take a look at https://github.com/rjackson/ember-cli-esnext to get an idea of how to package up broccoli-sprite for Ember CLI.

I look forward to using it in future apps :)