Question

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

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

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

详情：

在询问this question后，尽管给予了赏金，但没有得到回应，我决定为CSS图像精灵生成编写自己的broccoli插件： 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和西兰花都很新，所以请原谅新手错误，如果是这样的话。

＃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的下一个版本将为附加组件提供一流的支持。感谢Robert Jackson。

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

我期待在将来的应用中使用它：）

如何通过live-reload为ember-cli app添加西兰花插件？

1 个答案: