TL;DR
- Webpack and Gulp are the shiny future.
- Grunt may become a thing of the past (with all but a grunt).
Build tools have been around long before JavaScript. With Make’s initial release in 1977 and JavaScript’s in 1996, it’s interesting to see JavaScript developers' take on this “old timey” form of software.
Build Tools
Filter:
Show:
- Never heard of it
- Heard of it, not interested
- Heard of it, would like to learn
- Used it before, would not use again
- Used it before, would use again
Awareness
Unlike the other sections of the survey which have at least one or two options people haven’t heard of, practically every developer surveyed was at least aware of the existence of the four survey options, which all clocked in at 91% awareness or higher.
Interest
We JavaScript developers enjoy the new and shiny, and it shows in this graph. Not surprisingly, two-year-old Webpack has the highest interest - almost 1.5 times or more higher than Grunt, Gulp, and Browserify, probably also due to its flexibility and ability to handle many file types.
Grunt’s interest has waned heavily, with two thirds of respondents uninterested in trying it. Those that have heard of Gulp and Browserify are almost equally interested and uninterested.
Satisfaction
With the vast majority of Webpack users satisfied with the new bundler, it’s no wonder that interest in the tool is so high. Although, even with the new kid on the block, Browserify and Gulp users are still fairly happy as well.
In contrast, Grunt users appear the least satisfied and don’t want to go back, which matches the low interest levels seen previously.
How likely are build tool users to also use other technologies?
| Plain JavaScript | ES6 | CoffeeScript | TypeScript | Elm | ClojureScript | No Framework | React | Angular | Angular 2 | Ember | Vue | Backbone | Redux | MobX | Relay | REST API | Firebase | GraphQL | Apollo | Falcor | Horizon | Meteor | FeathersJS | DoneJS | MERN | MEAN | Mocha | Jasmine | Enzyme | Jest | Cucumber | Ava | Plain CSS | SASS/SCSS | LESS | CSS Modules | Aphrodite | Webpack | Grunt | Gulp | Browserify | Bower | Native Apps | React Native | Cordova | PhoneGap | NativeScript | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Webpack | -1 | 43 | -2 | 7 | 8 | 6 | -6 | 54 | -9 | 3 | 1 | 8 | 2 | 51 | 12 | 11 | 14 | 12 | 14 | 6 | 5 | 4 | 0 | 4 | 1 | 15 | 3 | 33 | 17 | 28 | 16 | 5 | 13 | -5 | 12 | 2 | 20 | 9 | 100 | -8 | 3 | 8 | -17 | 2 | 23 | -4 | -4 | 1 |
| Grunt | 9 | -6 | 5 | 1 | -6 | -3 | 7 | -9 | 17 | 6 | 6 | -4 | 13 | -12 | -4 | -2 | 5 | 1 | -2 | -3 | -1 | -3 | 2 | -1 | 1 | -1 | 13 | 0 | 11 | -7 | -4 | 3 | -7 | 6 | 9 | 15 | 2 | -4 | -8 | 100 | 19 | 9 | 33 | 6 | -3 | 9 | 10 | 5 |
| Gulp | 8 | 10 | 2 | 9 | -4 | -1 | 4 | 2 | 20 | 13 | 4 | 8 | 7 | -1 | -2 | -3 | 8 | 10 | -2 | -3 | 2 | -1 | 1 | -1 | 2 | 4 | 17 | 8 | 13 | -5 | -2 | 4 | 0 | 0 | 24 | 7 | 3 | -4 | 3 | 19 | 100 | 26 | 28 | 2 | 1 | 10 | 9 | 6 |
| Browserify | 7 | 15 | 4 | 0 | 1 | 3 | 6 | 14 | 3 | 3 | 8 | 9 | 10 | 8 | 1 | 0 | 8 | 9 | 2 | -1 | 3 | 1 | 3 | 2 | 3 | 4 | 7 | 13 | 9 | 3 | 4 | 5 | 5 | 2 | 11 | 6 | 6 | 0 | 8 | 9 | 26 | 100 | 12 | 4 | 5 | 6 | 7 | 3 |
Note: “user” defined as people who picked “I've used it before, and would use it again”. Phi coefficient values go from -100 to +100, darker red indicates stronger positive correlation, darker blue indicates stronger negative correlation.
Webpack users overlap with ES6, React, React Native, and Redux, forming one happy family.
Both Grunt and Gulp are more likely to be used with Angular, Backbone, and Jasmine, indicating their age. Grunt and Gulp users also appear to lean on Bower to manage package version control.
Recommended Resources
Presented by
Egghead.io
Using Webpack for Production JavaScript Applications
Kent C. Dodds
Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular every day.
Gulp and Browserify - Initial Setup
Shane Osbourne
Let's look at the basics of setting up Gulp and Browserify.
Thanks to our partners for supporting this project. Check them out for more awesome programming courses!
Other Build Tools
NPM is of course, listed with the highest usage in this category, being (literally) the Node Package Manager and supporting build scripts as well.
Not too far behind is Rollup, (less than two years old) which claims to produce smaller bundles than Browserify or Webpack. Its sudden popularity may be due to the insane amount of documentation - there’s a guide, a wiki, and a live demo - and a feature they’re calling tree-shaking.
I’m surprised to see Make still in the running. A glimmer of hope that some people still believe that if it ain’t broke, don’t fix it. Also, I’m just going to put it out there and say, Rollup, Broccoli, Brunch: we really like naming software after food, don’t we?
On a scale of 1 to 5, how happy are you with your current build tools?
Show:
Most survey takers are pretty happy with their current build tools, with an average happiness level of 3.64 and almost 90% answering 3 or higher. This probably makes sense, since build tools tend to make programming and releasing easier for everyone.
It doesn’t seem too long ago that people were wondering about the battle between Grunt and Gulp. Based on the results of this survey, it sound like Grunt may be in for quite a fight if it wants to survive.
Webpack may be the new hotness, but with many people still interested in and using Browserify, bundlers are in a less competitive arena. With competitors like Rollup on the horizon though, it should be an interesting future. Watch this space!
Special thanks to Timothy Licata for listening to my late night rants and German (Gago) Frigerio for walking me through a bit of build tool history.
About the Author
