問題タブ [broccolijs]

broccoli-less を使用してより少ないファイルのディレクトリをコンパイルするように broccolijs を取得しようとしています。「前処理」機能を次のように変更しました。

私のプロジェクト フォルダーには、Brocfile.js に含める「less」というディレクトリがあります。

このプロジェクトをビルドしようとすると、次のエラーが発生します。

フロントエンド アプリケーションの配布可能なソースを構築するために BroccoliJS に依存する ember-cli 0.0.28 を使用しています。私が抱えている問題は、(再) ビルドするたびに、アプリケーションを提供するバックエンドのテンプレート ディレクトリに index.html ファイルをコピー (または移動) する必要があることです。

ビルドの完了後にこれを行うために、ember-cli プロジェクト ディレクトリで Brocfile.js を構成する方法がわかりません。

当分の間、シンボリックリンクを使用しました。これは機能しますが、フロントエンドアプリケーションがember build. grunt-broccoliを使用してビルドを grunt タスクとして実行することは可能だと思いますか?! これが前進かどうかはわかりませんが。

broccoli-file-mover の使用は簡単ですが、将来のツリーではなく、現在のツリーで機能します。

すべての助けに感謝します。

broccoli-compassプラグインを使用しているときに、Ember CLI プロジェクトに CSS ライブラリを追加するのに問題があります。

次の行をブロクファイルに追加しました。

しかし今、私は立ち往生しています。私はもう試した

しかし、これはうまくいきませんapp.styles。

SASSファイルに追加できるimportPathように、コンパス構成に追加しようとしましたが、それも機能しませんでした。@import

コンパスを使用して、 ember-cliプロジェクトで SASS を CSS に前処理できるようにしたいと考えています。

これを行うことbroccoli-sassは簡単で、bower install broccoli-sass必要なことはすべて、それに対するサポートが既に組み込まれているためです。

しかし、これを行うbroccoli-compassのはかなりトリッキーであることが判明しました...どのように？

詳細：

この質問は、 ember-cli v0.0.23 について以前に尋ねられました。その答えは古くなっているようです - 主な問題は、ember-cli が の多くのものを抽象化し、それをを使用しBrocfile.jsて別のファイルに入れることです。したがって、解決策は標準的な外観とは異なります。preprocessor.jsRegistryBrocfile.js

アップデート：

この質問は @saygun によって回答されており、解決策により、broccoli-compass を使用して SCSS --> CSS をコンパイルできます。ただし、いくつかの注意事項があります。

• 軽微な問題: minifyCssmeber-cli の既存のプリプロセッサは機能しません。独自の CSS を縮小するには、compass を構成する必要があります。
• 重大な問題: SCSS ファイルが画像を参照する場合、生成された CSS ファイルには画像へのリンクが含まれており、パスは Broccoli によって作成された一時ツリー フォルダー内にあります。これを回避する方法がわからないので、フォローアップの質問をしました: How to generate image sprites in ember-cli using compass?

更新- 20140614:

この質問または github に対する回答が得られなかった後、私はこの問題に対する独自の解決策を考え出すことにしました。私はコンパスをさまざまなことに使用していましたが、その主な有用性は画像スプライトを生成する機能にありました。他のほとんどのことは、純粋な SCSS を使用して達成できます。

したがって、私はbroccoli-spriteを書きました。これは、 broccoli-sassを使用した SCSS の ember-cli の組み込みサポートと組み合わせて使用​​され、私のニーズを満たすことができました。

プロセスの詳細については、こちらをご覧ください。

したがって、コンパスを自分の ember-cli アプリに統合することに関心がなくなりました。私の解決策は質問に直接答えないため (コンパスを使用しないため)、この質問は未回答と見なします。この質問は、コミュニティ内でそうしたいと考えている他の人にまだ利益をもたらす可能性があるため、私はこれをオープンのままにしておきます。

更新- 20140620:

バウンティの有効期限が切れています。

元の質問:

broccoli-compassを使用するember-cliアプリで、生成された CSS が生成された画像ファイル パスを含め、画像ファイル パスを正しく参照するように構成するにはどうすればよいですか?

コンパスを使用して、次の SCSS:

... は、フォルダー内のすべての画像と、それぞれを表示するための CSS を含む単一の.pngファイルを生成します。icon

ブロッコリー を使用してアセット パイプラインを構築するember-cli 内でコンパスを介して同じことができるようにしたいと考えています。

• ember-cli 内で動作する必要があります - つまり、ember serve または ember build の実行時にビルドする必要があります
• 画像のフォルダーから画像スプライトを生成するには、コンパスを使用する必要があります
• 生成された画像は、アセット フォルダーにコピーする必要があります。
• 生成された CSS は、一時的なツリー フォルダーではなく、assets フォルダーにある画像を指す必要があります。

私がこれまでに試みたこと：

#1

これを行うとcompass、ツリー内で画像ファイルを見つけることができないため、コマンドは失敗します。

#2

試しに、画像ファイルをスタイル ディレクトリにコピーします。今度は compass コマンドは成功しますが、生成された CSS は存在しない画像ファイルを参照します。生成された画像は、期待どおりにアセット フォルダーにコピーされないように見えます (または他の場所にコピーされます)。

詳細：

コンパイルできるようにしたい SCSS (スプライト生成用):

Stylus CSS プリ プロセッサのオプションを設定する方法がわかりません。すべてのファイルを検索すると、次のことがわかります。

node_modules/broccoli-stylus-single/node_modules/.bin/stylus [98]: node_modules/broccoli-stylus-single/node_modules/stylus/bin/stylus [98]:

Ember-CLIフレームワーク/ブロッコリービルドシステムでこのオプションを「true」に設定する正しい/好ましい方法を知っている人はいますか?

どうもありがとう！

このエラーが発生しましたが、修正する方法が見つかりません。を実行しようとすると発生しますbroccoli build。

とをインストールsudo npm install -g broccoliしましsudo npm install -g broccoli-cliた。実行可能ファイルはbroccoli問題ありません。obv:

そのため、インストール プロセスでエラーは発生していませんが、ブロッコリー モジュールが正しくインストールされていないようです。

何か案は？

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

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

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

詳細：

この質問をした後、懸賞金をかけたにも関わらず回答が得られなかったので、CSS 画像スプライト生成用に独自のブロッコリー プラグインを作成することにしました: broccoli-sprite

私がこれまでに試したこと：

#1

これを使用して、プラグインからの出力をメインアプリの出力とマージしていますBrocfile.js

私はこれが進むべき道ではないかもしれないことを理解しており、私はember-cliとブロッコリーの両方にかなり慣れていないので、これが1つである場合、初心者のエラーを許してください.

#2

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