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?

JeroenHoek · Accepted Answer · 2014-08-29T09:07:01.487

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.

I think we should start specifying the ember cli version we are using, in the question, and definitely in the answer(s). — Stoutie, Aug 29 '14 at 06:47
It only takes a few weeks with ember/ember-cli and the answer no longer applies to the latest version. — Stoutie, Aug 29 '14 at 06:48
I just realized you answered your own question. LOL. So it's safe to assume your answer applies to the same version displayed in the output in your question! Sorry about that. I still think it would be good to mention the version up front. — Stoutie, Aug 29 '14 at 07:19
No you are absolutely right. I've added the ember-cli version. — JeroenHoek, Aug 29 '14 at 09:07

score 10 · Answer 2 · edited Feb 14 '16 at 05:57

The supported answers are a bit out of date. At the time of this writing Ember CLI 0.2.2, there is support for directly copying/fingerprinting vendor folders you want in your assets directory.

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

Documentation here

score 1 · Answer 3 · edited May 23 '17 at 12:24

Similar to answer from JeroenHoek, in ember-cli, version 0.0.40, I ended up doing it right under the app.import before module.exports. I use the augmentation pattern to encapsulate what I'm trying to do so that when/if it's no longer necessary, or there is a more preferred way to do it, I can clean it up easily, and remove modules that aren't used anymore.

/* 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: Is there a way to copy a (vendor) directory to /public/assets?

3 Answers3

Linked