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.
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.
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
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.
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.
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.
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.