[英]How to add a broccoli plugin to ember-cli app with live-reload?
When I run ember build
, the broccoli plugin runs correctly, and outputs the sprite CSS file and sprite PNG file into the assets directory. 当我运行
ember build
,西兰花插件正确运行,并将sprite CSS文件和sprite PNG文件输出到assets目录。
When I run ember serve
, the same thing happens initially too. 当我运行
ember serve
,最初也会发生相同的情况。 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. 但是,当我保存任何文件,导致Broccoli重建其树时,该sprite CSS和PNG文件不再合并到主应用程序树中,并且当页面从实时重新加载刷新时,该页面将不再显示拼接后的图像。
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 问了这个问题 ,尽管悬赏十足,也没有得到任何回应,我决定为CSS图像精灵生成编写自己的broccoli插件: broccoli-sprite
What I have tried so far : 到目前为止我尝试过的是 :
#1 #1
I am merging the output from my plugin with that of the main app using this in Brocfile.js
我正在使用
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. 我知道这可能不是要走的路,而且我对ember-cli和西兰花都比较陌生,所以请原谅新手错误,如果这是一个错误。
#2 #2
In Brocfile.js
, extend EmberApp
to include a new tree for sprites
: 在
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;
};
The next release of Ember CLI will have first class support for add-ons. 下一版本的Ember CLI将具有对附件的一流支持。 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. 看看https://github.com/rjackson/ember-cli-esnext ,以了解如何为Ember CLI打包西兰花精灵。
I look forward to using it in future apps :) 我期待在未来的应用程序中使用它:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.