My two cents about the Webpack vs Gulp vs Grunt vs npm scripts discussion
I’ve been creating a couple of boilerplate setups for frontend projects lately and while doing that I was digging into all the different stack setups, mainly focusing on the building and compiling phase. I’ve found some opinionated blogs which really favor one over the other, but then in the comments often a really heated discussion emerges discussing pros and cons. I think all tools have their purposes and I am grateful they exist. The decision on which one to use really depends on variables like the existing knowledge, the size of the project(s) and the size of the team/organisation.
When to use what, in my opinion?
- npm scripts: very large projects or a lot of projects that share common tasks; A lot of developers contributing to these projects with different backgrounds; Companies working on different projects;
- Webpack: very straightforward website projects; Quick delivery time; Low amount of developers;
- Grunt / Gulp: straightforward / less straightforward projects; for teams that have a shared knowledge for one of those task runners; single, one-off projects;
With npm scripts you have a direct access to all npm packages, which is always growing. You have no abstraction layer to master, so if you work with a big amount of people, and/or on a lot of different projects, npm scripts seem a nice fit. Your tasks and configurations are easy to integrate and exchangable.
Webpack is more of a convention-based tool. It has some assumptions of your workflow and your project setup. This tool really shines if you don’t have a lot of customised steps and just go with their flow (think bundling, minifying, transpiling, linting, etc).
Grunt / Gulp
These tasks runners hold a bit of middle ground between Webpack and npm scripts in my opinion. Their configuration is a lot more straightforward, and if you are already familiar with one or the other, it is pretty easy to create a setup to your liking and get started soon.
At this moment, for hobby projects/websites I prefer webpack, as I don’t want to think about the development setup and just use their conventions which often are just fine for that.
When working with companies on a professional basis, I lean towards npm scripts because I find it easier to pull other developers into the profession of creating builds and tooling. I don’t want them to get discouraged, because they first have to learn grunt/gulp/webpack. Also it is easy to just use whatever package we need, not having to rely on plugins.
I think I’m cutting off grunt/gulp, because I don’t really have the need for the middle ground, but if I run in any project that uses that already, then that will work out just fine.