如何通过 live-reload 将 broccoli 插件添加到 ember-cli 应用程序？

Question

当我运行ember build 时，西兰花插件运行正常， 并将精灵 CSS 文件和精灵 PNG 文件输出到 assets 目录中。

当我运行ember serve 时，最初也会发生同样的事情。 但是，当我保存任何文件时，会导致 Broccoli 重建其树， sprite CSS 和 PNG 文件不再合并到主应用程序树中， 当页面从实时重新加载刷新时，页面不再显示精灵图像。

• 为什么会这样？
• 如何确保每次都合并插件的输出？

---

详情：

询问this question后， 尽管给予了赏金，但没有得到任何回应， 我决定编写自己的花椰菜插件来生成 CSS 图像精灵： broccoli-sprite

到目前为止我所做的尝试：

#1

我在 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]);

我知道这可能不是要走的路，而且我对 ember-cli 和 broccoli 都很陌生，所以请原谅新手错误，如果这是一个。

#2

在Brocfile.js 中，扩展EmberApp 以包含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

Ember CLI 的下一个版本将对附加组件提供一流的支持。感谢罗伯特·杰克逊。

查看https://github.com/rjackson/ember-cli-esnext，了解如何为 Ember CLI 打包 broccoli-sprite。

我期待在未来的应用中使用它:)