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

问题

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?

回答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.

回答2:

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

回答3:

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;

来源：https://stackoverflow.com/questions/23871749/ember-cli-is-there-a-way-to-copy-a-vendor-directory-to-public-assets

标签

ember.js

ember-cli