General

Grunt vs Gulp vs Brunch

For as long as there has been profitable website traffic, people have been trying to find new ways of making websites scalable. Technologies change so fast in this business it’s hard to keep up.

The most basic principle of website scaling is that serving static files is cheap & easy, that’s why we’ve been seeing more and more two-part web “applications” where the frontend is actually a single static page and all the content is loaded in by javascript.

Long gone are the times when you wrote all your web applications on a LAMP (WAMP?) stack and deployed them via FTP to shared virtual servers. It’s 2014, API-driven single-page js-applications is where it’s at and you’re starting a new project: what are you gonna use for your frontend development server? Your code minification? For code deployment?

If your answer was LAMP, FTP and “what’s minification?”, I advise you to take a look around you. If your answer was Grunt.js and you’re feeling satisfied, you can stop wasting your time on this article and go write some code instead – you’re doing well!

But if you’ve never used Grunt or are simply feeling adventurous, it’s worth having a look at what else is out there.

JS Task Runners

So for the mandatory introduction: Somewhere around 2011 NodeJS happened and gave way for an explosion of new development tools.

Grunt, Gulp and Brunch are examples of JS Task Runners running on top of NodeJS. They are like a blessing for static frontend apps. All three allow you to easily spawn a development server, watch for file changes, compile your code/templates, deploy code – pretty much do anything with simple commands.

They differ in terms of configuration style, ease of setup, availability of plugins, running speed, etc. So let’s take a look at some of the criteria and try to compare them.

Configuration file

Winner: Gulp

This is largely a matter of opinion really, but Gulp’s code over configuration approach means readable configuration files and very low barrier to entry for developers not familiar with the tool.

Gulp has a very simple (4 methods), yet powerful, API, which is very easy to understand by just reading someone else’s gulpfile (see this presentation for what’s needed to master gulp). It also means that you’re fully in control of what it’s doing and there’s absolutely no mystery to it.

Brunch is also worth mentioning, since its configuration file is likely to stay extremely small compared to others. Brunch seems to have a zero-configuration ideology – you’re likely to lose some flexibility because of that, but if you’re building a typical webapp you might never notice, because things work as if by magic.

Gruntfiles, however, tend to grow large and even small projects require a good amount of configuration code.

Community & plugins

Winner: Grunt

There’s no competition here. Grunt has been around for a while and boasts a total of ~2500 plugins on its website. Gulp lists ~430 plugins and brunch ~60. That doesn’t necessarily mean you’ll be missing anything if you decide to go with Gulp or Brunch. All of them are built on NodeJS, so you can always use most npm packages directly without much hassle. With Grunt however, you don’t have to worry about running into difficult problems – someone has probably found the solution already and made it into a plugin.

Setup time

Winner: Brunch

This is where Brunch really shines. While Yeoman can do most of the work of setting up a new project for Grunt (and also provides some generators for Gulp!), Brunch beats the pack with it’s near-zero configuration requirements.

Both Brunch and Yeoman let you choose from a list of skeletons/generators that will install and configure a bunch of plugins for you but you’re going to customize the setup to your needs sooner or later. With Brunch this is as easy as installing another plugin via npm. A lot of plugins don’t require any configuration and will simply work right out of the box! This relies on a couple of conventions you have to follow in your project structure, though.

With Gulp, you’re likely to write a lot of the configuration yourself, but it sounds worse than it really is. The resulting file is likely to be much smaller and way more readable than your typical Grunt’s configuration file. If you’re one of those people who just want things to work, you might like Brunch’s approach better; but if you’re like me, you want to be able to fine tune everything and see exactly what’s going on.

Speed

Winner: Gulp & Brunch

In my experience, both Gulp and Brunch have been blazingly fast. For small projects, they have already detected a change, recompiled, minified and concatenated everything and refreshed the browser for you before you can even Alt+Tab to it (ok, probably not but they can if you’re being slow about it).

At the moment Grunt is slower since it uses temporary files to pass the contents from one step to the next and we all know that IO is slow.

Conclusion

So each one seems to have its pros and cons. If you’re looking for the one true test runner to replace all your needs, you might have to look elsewhere. Grunt can probably be bended to suit most situations because of its large community and configurability. Brunch is incredibly fast and does 95% of the setup for you without even asking. Gulp needs more manual setup but is extremely simple, flexible and fast.

All in all, it’s always best to pick the right tool for the right job and who says you have to pick one? Hell, you could use all three.

By On March 21, 2014

  1. I maintain a central knowledge base of the pros and cons of app development technologies to save people time deciding among them. It delivers trade-off reports between any pair of technologies.

    If you can contribute, I’d appreciate it. Just go here:
    http://www.dancancro.com/technology-questionnaires/

    Here is a report between Gulp and Grunt

    Gulp offers: 6% that Grunt doesn’t
    * 0.8% Manages chained tasks
    * 0.8% Code over configuration
    * 0.8% Doesn’t introduce a new concept/language
    * 0.8% Doesn’t save intermediate files during build
    * 0.8% Supports incremental builds
    * 0.8% Files are only read once for the whole build
    * 0.8% Can run tasks asynchronously

    ===================
    ===================

    Grunt offers: 2% that Gulp doesn’t
    * 0.8% Supports plugins, good plugin ecosystem (top 10% in class)
    * 0.8% Clear output (top 10% in class)
    * 0.8% Easy, concise custom tasks (top 10% in class)

    and between Brunch and Gulp:

    Brunch offers: 34% that Gulp doesn’t
    * 0.8% Uses Github’s / namespace
    * 0.8% Packages can be served from Github servers
    * 0.8% Works with ES6
    * 0.8% Works with JSX
    * 0.8% Can package CSS, templates, fonts, images..
    * 0.8% Does not require shims
    * 0.8% Dependencies are defined within the source code
    * 0.8% No publishing step except for pushing tags to your repository
    * 0.8% No boilerplate callbacks
    * 0.8% You don’t need to manage directory paths
    * 0.8% Composable
    * 0.8% Single build pipeline
    * 0.8% Generates a single bundle
    * 0.8% Supports any-to-any transformations
    * 0.8% Supports any-to-any transformations, with caching
    * 0.8% Supports any-to-one transformations
    * 0.8% Rebuilds after file deletions
    * 0.8% Don’t have to rebuild/bundle all of your files after each change
    * 0.8% SASS compilation
    * 0.8% SASS compilation, using libsass
    * 0.8% Unattended / background operation
    * 0.8% Convention over configuration
    * 0.8% Has a configuration file
    * 0.8% Supports plugins, good plugin ecosystem (top 10% in class) (72 as of 6/10/15)
    * 0.8% Easy to configure (top 10% in class)
    * 0.8% Works in stand-alone form
    * 0.8% Small API (top 10% in class)
    * 0.8% Clear output (top 10% in class)
    * 0.8% Good number of examples/templates (top 10% in class) (e.g. react, backbone, angular, cordova)
    * 0.8% Easy to debug (top 10% in class)
    * 0.8% Good Documentation (top 10% in class)
    * 0.8% Caches
    * 0.8% Dependencies are resolved during compilation
    * 0.8% Concurrent loader preprocessing
    * 0.8% Hot module reload
    * 0.8% Can run tasks synchronously
    * 0.8% Fast to build app (top 10% in class) (the common recompilation is <150ms. Slow / fuzzy recompilation is almost always <500ms (enough time to alt-tab to your browser window).)
    * 0.8% Fast to load app (top 10% in class)
    * 0.8% Safe from race conditions and deadlocks
    * 0.8% Safe from file descriptor limits
    * 0.8% Can use CommonJS modules
    * 0.8% Leverage path-to-module resolution with module auto loading capability.

    ===================
    ===================

    Gulp offers: 1% that Brunch doesn't
    * 0.8% Code over configuration

  2. Hi Andriin

    Really nice and useful post! I’ve made a post in Spanish based in your one. And of course add a link to the original post.

    Thanks a lot for your contribution!

  3. Hi Andriin,

    As a web developer myself, I often wonder about the underlying technologies used to make a good webapp so thanks for taking the time to share some of your experiences.

    I know of Grunt and have heard of Gulp but Brunch is new to me so I’ll check it out.

    Look forward to more tech posts in future.

    Cheers!