React and be thankful A blog about building (reactive) web applications

Building with Broccoli (Part 1: Introduction)

After having looked at Grunt and Gulp (full list of articles here), this articles is a brief introduction about Broccoli.

What is Broccoli?

Broccoli was first released (beta) in February 2014. Broccoli is a post-Grunt build tool and part of a new breed of Node based build tools: Broccoli is not a task runner but is a dedicated build tool. It makes the asumption that you have all source files in a directory (which can contain sub-directories) and that you want to build those files into a build directory of your choice.

With Broccoli, you only have to specified the varioius steps you need to go from your source directory to your build directory: it will automatically take care of cleaning your build directory, watching your source directory and perform incremental builds. Although you cannot run a specific task / operation independently, it provides great confort by not having to define how to build and rebuild.

Broccoli has gained popularity amongst the Ember community by being included in ember-cli and will get even more wind in its sails with the probable backing of Angular 2.


Like Gulp, Broccoli seeks to reduce file I/O operations and to compose build operations, which we have seen is a major caveat of Grunt. Like Gulp, Broccoli uses memory to speed up and compose operations. Gulp uses vinyl objects and streams for describing sources, while Broccoli uses trees and simply pass them from module to module: not using streams reduces complexity. Trees contain files and subdirectories and the first tree Broccoli will create is a representation of your source directory.

Each broccoli plugin receives a tree and outputs a new tree, Broccoli will pass around / merge trees until all operations have been performed. The final tree will be written to your build directory. In a way, this is simply a map-reduce operation from source to build.

Something wrong? Fix it on Github!