Common Broccoli Plugins

Broccoli is an incredibly powerful build tool. It works by making small changes to folders and then outputting them either to a build directory or a development server.

By default, Broccoli will serve the "tree" that you export from your Brocfile.js which is done using module.exports =. You can read more about this in the full Broccoli Notes.

Before you send a final tree to broccoli, you will likely want to modify your source files into their final forms using plugins. This is a list few of the most common broccoli plugins we've used and a quick reference of how to use them.

broccoli-merge-trees

This plugin takes an array of either folder names as strings or outputs from other plugins.

var Merge = require('broccoli-merge-trees');

module.exports = new Merge(['public', 'assets']);

This would take all of the contents of both public and assets and put it at the root of our build output.

So the following project:

/
|-public/
| |-index.html
|-assets/
| |-app.js

Would output:

/
|-index.html
|-app.js

NOTE When using broccoli-merge-tress if two directories have the same file, you will get an error. To stop this from happening pass { overwrite: true } as a second argument to the Merge constructor. This will overwrite with the last folder's version of a file:

// Pulls in the `merge` function with NPM
var Merge = require('broccoli-merge-trees');

module.exports = new Merge(['public', 'assets'], {overwrite: true});

broccoli-sass

CSS can be really tough to set up, SASS allows us to use things like variables, functions, and third party dependencies. Broccoli SASS allows us to compile a single source file into a final destination.

The broccoli-sass plugin takes in a few different arguments:

  • An array of folders names or input trees that contain SASS needed for the app
  • An input SASS file name to start: this is relative to the first tree in the above array
  • An output CSS file name

Here is an example Brocfile.js:

  var Sass = require('broccoli-sass');

  module.exports = new Sass(['sass', 'bower_components/reset-css'], 'app.scss', 'app.css');

A project that looks like this:

  /
  |-bower_components/
  | |-reset-css/
  | | |-reset.scss
  |-sass/
  | |-app.scss

Would output:

  /
  |-app.css

In your app.scss you could now @import 'reset' to pull in the contents of bower_components/reset-css/reset.scss into your final compiled app.css file.