JS Buildtool Comparison

There is a growing number of available javascript buildtools out there.
Trying to get a better overview, my local jug decided to have a hacknight and do some comparison.

The Contenders

Grunt ★★★☆☆

Grunt is the current king of the buildtools. It is widely used and there are lots of available grunt-tasks. Grunt has received some critique for being slow and for a complex configuration file.

Summary

Even with our collective experience with Grunt it took us quite a while to get the task running as we wanted. It has by far the slowest build time of the group. The syntax quickly gets messy. But, we all ❤️ Grunt. It gets the job done, has plugins for everything and it has served us well!

Timing

For timing Grunt we used the time-grunt package.

Gulp ★★★★☆

Gulp's tagline is "The streaming build system" as it makes heavy use of node streams. It puts emphasis on code over configuration and tries to be easy to manage and manipulate. One of the main tings about gulp is that a build pipe only reads once and writes once to the filesystem.

Summary

In general we really liked gulp. It has very nice syntax and is blazing fast. The one thing we found confusing was error reporting; the output wasn't very helpful. Even so, gulp is the WINNER of the zero-to-hero challenge.

Timing

Gulp spits out timing data by default, so we just trusted that.

Broccoli ★★☆☆☆

Broccoli was built for fast incremental rebuilds. It abstracts your files into trees instead of individual files and uses caching quite heavily to provide these fast rebuilds.

Summary

To be fair our test case is not perfect for broccoli since we are not doing any incremental builds here. In a real-world scenario, especially if your using livereaload (like you should), this can be important. Still, it's quite fast. The syntax is easy to read and understand. A notch below gulp, but not bad.
But we had some issue getting it up and running. We were unable to make it write the output as a single file, it had to be a directory. We also had to manually delete the output before re-running the task!? Broccoli is still beta software, so some of it can be excused. It's not ready yet, but we are excited to see where broccoli goes.

Timing

Broccoli itself doesn't report any timing data, and we could not find a plugin. So we ended up doing t2 - t1 in the brocfile. Please let us know (by opening an issue or PR) if this is not ideal for timing broccoli tasks.

Fez ★★☆☆☆

Fez is an über fast, highly configurable, extremely powerful, and somewhat weird general purpose build tool written in JavaScript. Build specs are created with a simple JavaScript-based DSL. The set of rules defined in the spec is used to construct a build graph which is efficiently traversable, enabling Fez to do only the work which needs to be done, and to do work in parallel when it can.

Summary

Fez is a bit of an oddball. The syntax is actually quite interesting, and it's crazy fast! It is the WINNER of our buildpseed challenge! It took us a while to get it working though. We were unable to find a suitable sass plugin, so we had to use less for fez.

Timing

We used the same approach as above and did the timing manullay in the fezfile. Again; please create an issue or PR if this is not a good way to time this buildtool.

The metrics

• Buildspeed
• Time from zero to hero

The tasks

• Process & minify a twitter bootstrap worth of sass files

Results

Further reading

Getting started with Grunt
Getting started with Gulp
Broccoli: First Beta Release
Using Grunt? Consider Fez