9

在 Ember-CLI 项目中，如果我将包含 webfonts 及其 CSS 样式表的目录添加到public/assets目录中，我可以将它们与@import 'assets/font/regular/stylesheet.css. 这工作正常。

理想情况下，我希望将这些资产保留在我的 git 存储库之外，而是bower install将它们作为客户端依赖项，但是如何在 Ember-CLI 构建中使用这些资产？

中提到的文档app.import(FILE)适用Brocfile.js于 CSS 样式表，但不适用于 WOFF 字体文件：

$ 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 稍微尴尬的名称broccoli-static-compiler。首先，安装两个构建时依赖项：

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]);

这里我们的客户端依赖是 a font-opensans，它指的是包含 Open Sans webfont 副本的本地 git 存储库。

就这些！要使用网络字体，请链接到assets/from index.html：

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

这是使用ember-cli 0.0.40和一些早期版本进行测试的。

于 2014-05-26T14:57:07.770 回答
10

支持的答案有点过时了。在撰写本文时，Ember CLI 0.2.2 支持直接复制/指纹识别您想要在assets目录中的供应商文件夹。

// Brocfile.js
var app = new EmberApp();
...
var extraAssets = new Funnel('bower_components/a-lovely-webfont', {
  srcDir: '/',
  include: ['**/*.woff', '**/stylesheet.css'],
  destDir: '/assets/fonts'
});

module.exports = app.toTree(extraAssets);

文档在这里

于 2015-04-06T22:51:39.023 回答
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 回答