How do I get a simple tree of files to concat using broccoli.js

Question

I am trying to get my head around broccoli.js but am running into an error. If you look in my GitHub repo, you will see that I have a brocfile.js that looks like this:

brocfile.js

var compileES6 = require('broccoli-es6-concatenator')
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees')


var app = 'app'
app = pickFiles(app,{
    srcDir: '/',
    destDir: 'app-kit'
})

var appJS = compileES6(app, {
    inputFiles: ['/app-kit/**/*.js'],
    outputFile: '/dist/app.js'
})

module.exports = mergeTrees([appJS]);

and I am getting this error:

Built with error:
Error: ENOENT, no such file or directory 'tmp/static_compiler-tmp_dest_dir-JjclDVEm.tmp/undefined'
    at Object.fs.statSync (fs.js:684:18)
    at addLegacyFile (/Users/cully/Sites/ember-todo/node_modules/broccoli-es6-concatenator/index.js:130:44)
    at /Users/cully/Sites/ember-todo/node_modules/broccoli-es6-concatenator/index.js:47:5
    at invokeCallback (/Users/cully/Sites/ember-todo/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
    at publish (/Users/cully/Sites/ember-todo/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
    at publishFulfillment (/Users/cully/Sites/ember-todo/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
    at flush (/Users/cully/Sites/ember-todo/node_modules/broccoli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
    at process._tickCallback (node.js:415:13)
    at Function.Module.runMain (module.js:499:11)
    at startup (node.js:119:16)

In the long run I would like to use this as a starting point for building ember.js apps so I created a github repo. If you go there you can see my file structure. Any thoughts on why I am getting this error?

Answer 1

I've been wrestling with Broccoli myself for the last few days. It's new to me as well, but I cloned your repo and got broccoli serve to work by doing the following:

1) I created a "loader.js" file at loader/loader.js. The loader.js file contains ES6 Module Loader polyfill code to allow ES6 modules to load in non-ES6 browsers. I grabbed the file from the Broccoli sample app: https://github.com/joliss/broccoli-sample-app/blob/master/vendor/loader.js

2) I injected the loader into the app tree and referenced it in the compileES6 config. (This option was the undefined value in your error.)

Here's the updated brocfile.js that successfully builds for me.

//brocfile.js

var compileES6 = require('broccoli-es6-concatenator');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');


var app = 'app';
app = pickFiles(app,{
  srcDir: '/',
  destDir: 'app-kit'
});

// Reference to ES6 loader
var loader = "loader";

// Squash the loader and app trees into one
var sourceTrees = [app, loader];
sourceTrees = new mergeTrees(sourceTrees);

var appJS = compileES6(sourceTrees, {
  loaderFile: 'loader.js', // This required option was undefined before
  inputFiles: ['app-kit/**/*.js'],
  outputFile: '/dist/app.js'
});

module.exports = mergeTrees([appJS]);

I hope that helps you get to the next step on your Broccoli adventure.

Answer 2

You can use broccoli-concat, then:

 emberTests = concatFilter(emberTests, {inputFiles: ['**/*.js'], outputFile:'/tests.js'});
 templates  = concatFilter(templates, {inputFiles: ['**/*.handlebars'], outputFile:'/templates.js'});
 trees      = concatFilter(trees, {inputFiles: ['**/*.js'], outputFile:'/app.js'});