Do we really need to learn these things.what is the best to learn?
As usual, that depends on various circumstances.
1 Like
Grunt and Gulp are both task runners… they are utilities than can be configured to automate a set of actions on your project. Usually these are build tasks, preparing your code to be run. This can include steps such as copying files, minifying code, running transformations (such as compiling SASS/Less to CSS).
Webpack is a module bundler - it takes JavaScript code and packages together all the modules your code uses (e.g. 3rd party libraries installed via npm) into a bundle that can be loaded by a web browser. Webpack is actually pretty sophisticated and can handle most build tasks (i.e transpiling, minification, etc.) with its built-in functionality or via plugins.
While Gulp/Grunt are still used, IMO webpack is the most important of the three to know. The learning curve can be a little steep, but it’s very widely used.
5 Likes
There are also several “zero-config” bundlers that might be worth looking into. Parcel is the most popular currently. And there are yet others, such as Fusebox, that come with a built in task runner.
@fretburner hit it on the head. I just want to add that a lot of people have turned to using NPM scripts to facilitate things that need to happen before or after the build, since Webpack is mostly incapable of doing that. You can prepend post or pre to any npm script and have something run before whatever command you’re calling.
Additionally, arbitrary scripts can be executed by running npm run-script . Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript). Scripts from dependencies can be run with npm explore – npm run .
https://docs.npmjs.com/misc/scripts
As usual, that depends on various circumstances.
@Dormilich I disagree. Webpack and NPM scripts can take over most of the need of task runners. There is still a niche for them, but it’s a very very small niche.
1 Like
That is not what my answer is about. I didn’t state anything about whether to prefer bundlers or task runners.
Doesn’t matter, I disagree with the use cases of Grunt or Gulp. It never depends on the circumstances. OP specifically asked which one to learn and they should learn Webpack.
If they are put on to a team managing a legacy Grunt/Gulp build, then the answer is clear that they need to learn what they are working on and they wouldn’t be asking here. But, even in that case I still think they need to learn Webpack first if time allows, since the transitioning the other way around is notoriously hard for people.
What @mawburn said. Even if you don’t use any 3rd party libraries at all it’s good practice to organise your code in modules, so you’ll want to use a bundler anyway. While there are also webpack plugins for grunt and gulp, IMO the only use case is for transitioning from or integrating into a legacy build process really… and here’s what grunt itself says why you should use a task runner:
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
Now all tasks mentioned can be achieved with webpack loaders / middleware too, so it’s clear that “traditional” tasks runners are pretty much obsolete.
Just like to add that as of webpack 4, webpack works with zero config too. :-)
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.