9

Ember-CLI プロジェクトで、Web フォントとその CSS スタイルシートを含むディレクトリをディレクトリに追加するとpublic/assets、@import 'assets/font/regular/stylesheet.css. これはうまくいきます。

理想的には、これらのアセットを自分の git リポジトリから除外し、代わりにクライアント側の依存関係として保持したいのですが、bower installこれらのアセットを Ember-CLI ビルドでどのように使用できますか?

ドキュメントでは、CSS スタイルシートでは機能しますが、WOFF フォント ファイルでは機能しない で言及app.import(FILE)されています。Brocfile.js

$ ember build
version: 0.0.28
Build failed.
Error: Path or pattern "nicefont.woff" did not match any files
at Object.multiGlob (/(PATH)/node_modules/ember-cli/node_modules/broccoli-static-compiler/node_modules/broccoli-kitchen-sink-helpers/index.js:216:13)
at /(PATH)/demo/node_modules/ember-cli/node_modules/broccoli-static-compiler/index.js:25:27
at invokeCallback (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
at publish (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
at publishFulfillment (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
at flush (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)

app.import()また、拒否するディレクトリを指定したいと思います。

これを行う Ember-CLI / Brocolli の方法はありますか?

4

3 に答える 3

12

私はこの問題で立ち往生していると思っていましたが、どうやらお茶を飲みながら、StackOverflow に関する質問を明確に表現することで、正しい方向に進むことができたようです…</p>

bower を使用してクライアント側の依存関係をインストールすると、Ember-CLI プロジェクトでは、これらは最終的にvendor/. それら (の一部) を変更せずに使用するには、ブロッコリーの少しぎこちない名前のbroccoli-static-compilerを使用できます。まず、2 つのビルド時の依存関係をインストールします。

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

インポートの下の上部にBrocfile.js追加します。EmberApp

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');

そしての一番下にBrocfile.js：

// Remove this line:
// module.exports = app.toTree()

// Copy only the relevant files:
var fontOpenSans = pickFiles('vendor/font-opensans', {
   srcDir: '/',
   files: ['**/*.woff', '**/stylesheet.css'],
   destDir: '/assets/fonts'
});

// Merge the app tree and our new font assets.
module.exports = mergeTrees([app.toTree(), fontOpenSans]);

ここで、クライアント側の依存関係は ですfont-opensans。これは、Open Sans Web フォントのコピーを含むローカル git リポジトリを参照します。

それだけです！Web フォントを使用するには、 from にリンクしassets/ますindex.html。

<link rel="stylesheet" href="assets/fonts/opensans_regular/stylesheet.css">

これは、ember-cli 0.0.40およびいくつかの以前のバージョンでテストされました。

于 2014-05-26T14:57:07.770 に答える
1

JeroenHoekからの回答と同様に、ember-cli、バージョン 0.0.40 で、app.importbeforeのすぐ下でそれを行うことになりましたmodule.exports。拡張パターンを使用して、やろうとしていることをカプセル化します。これにより、必要がなくなった場合、またはより好ましい方法がある場合は、簡単にクリーンアップし、使用されていないモジュールを削除できます。もう。

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// ... [comments omitted]

app.import('vendor/moment/moment.js');

var tree = app.toTree();

tree = (function mergeFontAwesomeTree(tree) {
  var mergeTrees = require('broccoli-merge-trees');
  var pickFiles = require('broccoli-static-compiler');
  var fontawesome = pickFiles('vendor/fontawesome/fonts', {
    srcDir: '/',
    destDir: '/fonts'
  });
  return mergeTrees([tree, fontawesome]);
})(tree);

module.exports = tree;
于 2014-08-29T07:15:15.830 に答える