Ember.js CLI Build Broccoli Funnel not working

Question

I am trying to use the Broccoli Funnel package to pull a complete directory into my assets folder in an Ember CLI build. Please find my ember-cli-build.js file below:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var Funnel = require('broccoli-funnel');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    //
  });

  var extraAssets = new Funnel('vendor/images/frames/artist/64', {
    destDir: '/assets/images'
  });

  app.toTree(extraAssets);

  return app.toTree();
};

The directory "vendor/images/frames/artist/64" only contains .png image files and I would like to have them all available after the build at "assets/images/64/". After a build process, there is no images folder created in my assets directory.

Can you help advise where I have gone wrong? Are there any debugging tools to show what Broccoli Funnel is trying to add to the build and where those files are being distributed to?

Answer 1

You should use MergeTrees:

return new BroccoliMergeTrees([app.toTree(), extraAssets]);

instead of

app.toTree(extraAssets);

return app.toTree();

Answer 2

app.ToTree accepts an array of transformed nodes (trees in broccoli 1.x.x).

Also, you have to return the node transformed by your app.toTree call.

So instead of,

...

app.toTree(extraAssets);

return app.toTree();

You would do,

return app.toTree([extraAssets])

---

Like Lux suggests, using broccoli-merge-trees is encouraged.

var EmberApp   = require('ember-cli/lib/broccoli/ember-app'),
    Funnel     = require('broccoli-funnel'),
    MergeTrees = require('broccoli-merge-trees');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    //
  }),
  nodes = [];

  nodes.push(new Funnel('vendor/images/frames/artist/64', {
      destDir: '/assets/images'
  }));

  nodes.push(app.toTree());

  return new MergeTrees(nodes);
};    

---

Debugging Broccoli Trees/Nodes

For debugging your broccoli plugin output, use broccoli-stew. Here's a quick sample to list out the files that are present just after the Funnel step.

var EmberApp   = require('ember-cli/lib/broccoli/ember-app'),
    Funnel     = require('broccoli-funnel'),
    MergeTrees = requre('broccoli-merge-trees'),
    log        = require('broccoli-stew').log;

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    //
  }),
  loggedNode,
  nodes = [];

  funnelOutput = new Funnel('vendor/images/frames/artist/64', {
      destDir: '/assets/images'
  }));

  nodes.push(log(funnelOutput))

  nodes.push(app.toTree());

  return new MergeTrees(nodes);
};