At Quantum Mob, we always use Gulp or Webpack to automate our front-end builds. This allows for better code management, CI integration, and convenience.
This article is meant as a brief overview for the tools that are still alive and maintained. The suspects: CodeKit, Grunt, Bower, Gulp, Browserify, Webpack, and NPM scripts.
CodeKit and Grunt both came out early 2012 as tools to get your front-end assets web ready. They both helped compile & minify files, compress images, lint files, and assist with other tasks that would be handled by separate tools or the command line. The difference: CodeKit was GUI based.
CodeKit quickly caught on as it required no command line experience to use and became a must-have in any web developer’s arsenal.
Future of CodeKit 💀
CodeKit is still alive and now on version 3.0, but its popularity has been on a steady decline since 2014.
Grunt & Bower
The Warthog and Macaw
Grunt came on the scene as a command line tool that provided a single script to specify and configure tasks. Bower followed shortly after as a means to manage client-side packages. The two, along with NPM, seemed to fulfill the majority of automation needs and were used regularly in tandem.
The problem I quickly noticed with Grunt was the lack of freedom in terms of configuring more complex task chains and lack of parallelization. Bower promoted a separation of front and back-end packages, which ended up forcing most users to manage twice the amount of packages (
Future of Grunt 💀💀💀
The warthog and the macaw are on their way out, but fret not, there are better substitutes. I recommend picking up Gulp or Webpack.
Need help with JS development?
Work with Quantum Mob.
Gulp & Browserify
The Fountain Drink
Gulp still maintained a relationship with Bower, but the stronger adoption of Browserify allowed NPM packages (which are originally for backend Node servers) to be brought into the front-end, making Bower obsolete. This looks and feels better as well. One package manager for the front-end and back-end.
Future of Gulp 🔥🔥
Google Trends will tell you there's a dip in popularity, but Gulp isn't going anywhere at the moment. Gulp became strongly associated with the Angular crowd as they were two of the most popular players in their domains (tooling and frameworks) at the time. And now with Angular 2 & 3, Gulp will still have a home.
Webpack & NPM scripts
The Geometric Trip
Webpack, the new kid on the scene. All the JS cool kids are using React and Webpack these days. NPM scripts are coming back with a vengeance to the point where half of any
package.json file might consist of configuration.
A minor detail, but instead of having
gulp taskName you have
npm install to get dependencies,
npm prune to remove unused packages,
npm build to build your production assets,
Future of Webpack 🔥🔥🔥
Yarn came out late 2016 and became a preferred package manager to NPM. From the user perspective, they behave exactly the same. The syntax is a bit different (maybe more intuitive), but the package installations themselves are much faster. Parallel vs sequential. Just use it.
- Still using CodeKit? Spend some time learning one of the above.
- Grunt and Bower are on life support.
- Gulp is sticking around so feel free to learn everything about it. Angular will keep it alive.
- Webpack is the future.
arguments comments below.
EDIT: We're having an issue with the comments so please bear with us. I'm not trying to censor you guys! We've just launched this blog and haven't fully tested comments.