当我运行ember build
时,西兰花插件运行正确,
并将 Sprite CSS文件和 Sprite PNG文件输出到assets目录中。
当我运行emberserve
时,最初也会发生同样的事情。
但是,当我保存任何文件时,导致西兰花重建其树,
sprite CSS 和 PNG 文件不再合并到主应用程序树中,
当页面从实时重新加载刷新时,页面不再显示 Sprite 图像。
- 为什么会发生这种情况?
- 如何确保每次都合并插件的输出?
详细信息:
询问后this question , 尽管给予了赏金却没有得到任何回应, 我决定编写自己的西兰花插件来生成 CSS 图像 Sprite : 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;
};
最佳答案
Ember CLI 的下一版本将为插件提供一流的支持。感谢罗伯特· jackson 。
看看https://github.com/rjackson/ember-cli-esnext了解如何为 Ember CLI 打包 broccoli-sprite。
我期待在未来的应用程序中使用它:)
关于javascript - 如何通过实时重新加载将西兰花插件添加到 ember-cli 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24235984/