Ember-CLI: Is there a way to copy a (vendor) directory to /public/assets?

Question

In an Ember-CLI project, if I add a directory containing webfonts and their CSS stylesheets to the public/assets directory, I can use them with something like @import 'assets/font/regular/stylesheet.css. This works fine.

Ideally though, I'd like to keep these assets out my git repository, and instead bower install them as client-side dependencies, but how can these assets be used in the Ember-CLI build?

The documentation mentions app.import(FILE) in Brocfile.js, which works for CSS stylesheets, but not for a WOFF font file:

$ 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)

Also, I would like to specify a directory, which is app.import() refuses.

Is there an Ember-CLI / Brocolli way of doing this?

Answer 1

I thought I was stuck on this issue, but apparently a cup of tea and explicitly phrasing the question on StackOverflow pushed me in the right direction…

If you install a client-side dependency with bower, then in an Ember-CLI project these will end up in vendor/. To use (parts of) them without changing them, we can use Broccoli's slightly awkwardly named broccoli-static-compiler. First, install two build-time dependencies:

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

In Brocfile.js add at the top below the EmberApp import:

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

And at the bottom of 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]);

Here our client-side dependency is a font-opensans, which refers to a local git repository containing a copy of the Open Sans webfont.

That is all! To use the web-font, link to assets/ from index.html:

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

This was tested with ember-cli 0.0.40 and a few earlier versions.