0

を実行するember buildと、ブロッコリー プラグインが正しく実行され、スプライト CSS ファイルとスプライト PNG ファイルが assets ディレクトリに出力されます。

を実行するember serveと、最初も同じことが起こります。ただし、任意のファイルを保存すると、ブロッコリーがそのツリーを再構築し、スプライトの CSS および PNG ファイルがメインのアプリ ツリーにマージされなくなり、ページがライブ リロードから更新されると、ページにスプライトされた画像が表示されなくなります。

  • なぜこれが起こるのですか？
  • プラグインからの出力が毎回マージされるようにするにはどうすればよいですか?

詳細：

この質問をした後、懸賞金をかけたにも関わらず回答が得られなかったので、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とブロッコリーの両方にかなり慣れていないので、これが1つである場合、初心者のエラーを許してください.

#2

では、次の新しいツリーを含めるようBrocfile.jsに拡張します。EmberAppsprites

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;
};
4

1 に答える 1

1

Ember CLI の次のリリースでは、アドオンのファースト クラス サポートが提供されます。ロバート・ジャクソンに感謝。

https://github.com/rjackson/ember-cli-esnextを見て、Ember CLI 用の broccoli-sprite をパッケージ化する方法を理解してください。

将来のアプリで使用することを楽しみにしています:)

于 2014-06-16T06:32:22.533 に答える