0

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;
};
Community
  • 1
  • 1
bguiz
  • 27,371
  • 47
  • 154
  • 243

1 Answers1

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 :)

Jamie White
  • 341
  • 1
  • 5
  • Thanks for pointing this out Jamie, it should come in handy.Would you happen to know much about why 2nd and subsequent runs of a plugin behave differently from the first run? – bguiz Jun 16 '14 at 06:58
  • I’m not an expert, but I’d guess it may be running on a subtree? – Jamie White Jun 16 '14 at 09:01
  • 1
    +1 and check - that worked out quite well! Just released v0.0.3 of [broccoli-sprite](https://github.com/bguiz/broccoli-sprite) with the fixes. Still only a broccoli plugin, not yet an ember-cli registry plugin - I'll wait for ember-cli@>0.0.34 to be released first, so that I may test it – bguiz Jun 16 '14 at 23:19