Question

在Ember-CLI项目中，如果我将包含webfonts及其CSS样式表的目录添加到public/assets目录，我可以使用类似@import 'assets/font/regular/stylesheet.css的内容。这很好。

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

文档提到了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这样做？

Answer 1

我以为我被困在这个问题上了，但显然是喝了一杯茶并且在StackOverflow上明确表达了这个问题，这让我朝着正确的方向前进......

如果您使用bower安装客户端依赖关系，那么在Ember-CLI项目中，这些依赖关系将以vendor/结尾。要使用（部分）它们而不改变它们，我们可以使用西兰花稍微笨拙地命名为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]);

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

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

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

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

Answer 2

支持的答案有点过时了。在撰写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);

文档here

Answer 3

类似于来自JeroenHoek的答案，在ember-cli版本0.0.40中，我最终在app.import之前的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;

Ember-CLI：有没有办法将（供应商）目录复制到/ public / assets？

3 个答案: