Brunch vs. Gulp: Another build tool showdown

Build tools and task runners were invented to prevent human error and make your life easier. They can bring you workflow nirvana, or cost you countless hours of aggravation and misery. There are quite a few options getting love from developers these days, so choosing your side can certainly be overwhelming — especially when new options seem to be popping up every day!

Everyone’s Got Choices

Which tool is the best fit for you and your project? The short answer is any of them. If you’re at the point where you’re trying to automate your process then you’re already doing something right, so good on you! The long answer, however, brings us to the battle between Brunch and Gulp.

Meet Brunch

Brunch entered the game in 2011 with two core principles in mind: keep it simple and make it speedy. It makes a few assumptions (see also: limitations) about your project, but in return it gives you an extremely simple project setup that runs incredibly quick.

Meet Gulp

Gulp is the “code over configuration” tool that won our hearts in the last showdown. It’s a super customizable tool with a pretty impressive plugin library that’s gained a lot of popularity in recent years.

Ready? Fight!

Both of these tools are great, but there’s definitely pros and cons for each. We’re going judge these on five areas of importance — documentation, configuration, community, customization, and speed. Best three out of five takes the cake! (The cake is a lie.)

Tell me something good (documentation)

Brunch has a detailed set of documentation on its site that will get you up and running quickly. The detailed explanations behind core concepts cover getting started, installing plugins, installing JS modules, testing, and deploying. It’s organized, the information is well explained, and there are little brunch puns littered throughout (bonus!).

Gulp’s documentation is it a little bit harder to navigate. Visiting the “Docs” section of their website brings you to some documentation that resides in their GitHub repo, but there’s also an entire readme.io version of the information that’s somewhat overlapping but different. Overall, it’s pretty extensive, albeit a little less organized than Brunch’s. Much like the other, you’ll find a section on getting started with Gulp, and some information on using the API and CLI. There’s also a great jumpstart guide for writing your own Gulp plugin.

Winner: Brunch (barely)

Start me up (configuration)

This is where Brunch really shines. It makes a few assumptions about your project (outlined here), but also makes setting up your project a breeze. A typical config for Brunch might look something like this:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

Conversely, Gulp makes no assumptions. You’ll need to tell Gulp everything about how it should run, but it’ll also be a lot more customizable this way. A typical Gulp set up might look something like this:

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

/* Register some tasks to expose to the cli */
gulp.task('build', gulp.series(
  clean,
  gulp.parallel(scripts, images)
));
gulp.task(clean);
gulp.task(watch);

// The default task (called when you run `gulp` from cli)
gulp.task('default', gulp.series('build'));


/* Define our tasks using plain functions */

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
function clean(done) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], done);
}

// Copy all static images
function images() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
}

// Minify and copy all JavaScript (except vendor scripts)
// with sourcemaps all the way down
function scripts() {
  return gulp.src(paths.scripts, {sourcemaps: true})
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
}

// Rerun the task when a file changes
function watch() {
  gulp.watch(paths.scripts, scripts);
  gulp.watch(paths.images, images);
}

Winner: Brunch, if brevity is your thing

I get by with a little help from my friends (community)

Brunch currently has just under 100 plugins to its name, while Gulp has upwards of 2,800. The wide difference here may be due, in part, to the fact that Brunch gained NPM support somewhat recently. Gulp also went out of their way to make plugin documentation easily accessible for developers, which may have also been a factor.

For any questions or issues you might have, Brunch has an active online forum you can post to and Gulp has a similarly active IRC channel. Both tools have active participants in Stack Overflow as well.

Winner: Gulp

You can have any color you want, as long as it’s black (customization)

Brunch is relatively limited in this category. As we mentioned earlier, it simplifies the setup process tremendously by making some basic assumptions about the setup of your project. Unfortunately, if you’re project is exceptionally unique it might be quite a headache trying to customize Brunch to work with what you’ve got.

Conversely, Gulp really shines here. The configuration file is definitely more demanding than Brunch’s, but it offers pretty much unlimited flexibility. You can control just about every aspect of the task runner through the many options made available to you in the Gulp API and CLI documentation. And, of course, those 2,800+ plugins don’t hurt either.

Winner: Gulp

If you’re not first, you’re last (speed)

Both of these tools are impressively speedy. Brunch makes speed one of its top priorities, and it uses incremental builds by default to filter out unchanged files in concurrent build processes, which makes it hands down one of the quickest processes we’ve worked with. Gulp also has the option of running incremental builds, but it requires you to set it up that way. (You can see how to do that here.) Even without that setup, Gulp runs a pretty efficient process overall by using node streams to prevent the potential bog down from writing intermediary files.

Winner: Brunch

And the winner is…

Our favorite meal, Brunch! But not by much. Your choice here will really depend on what you’re looking for in your build tool. Brunch is definitely the simpler option to get set up quickly, and it works well for us here at Oomph. If you’re the type of person who likes to control every aspect of your build or you have a really complicated and customized project setup, Gulp is probably the better choice for you. At the end of the day, what really matters is that you’re automating your process. The tool you use can certainly have an effect, but doesn’t make too much of a difference — go do it!