首页 文章

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

提问于
浏览 次
0

当我运行 ember build 时，broccoli插件正确运行，并将精灵CSS文件和sprite PNG文件输出到assets目录中 .

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

  • 为什么会这样？

  • 如何确保每次插件的输出合并？

Details ：

在询问了this question之后，尽管给了它一个赏金，但我没有回复，我决定为CSS图像精灵生成编写我自己的broccoli插件：broccoli-sprite

What I have tried so far ：

＃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;
};
javascript ember.js css-sprites ember-cli broccolijs

1 回答

  • 1

    下一版Ember CLI将为附加组件提供一流的支持 . 感谢Robert Jackson .

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

    我期待在将来的应用程序中使用它:)

    回复于

相关问题