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

ember-cli, ember.js

Solution

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.

Problem

Original source