javascriptember.jsember-clibroccolijs

Ember.js CLI Build Broccoli Funnel not working


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?


Solution

  • 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);
    };