Difference between build tools and task runners

Question

I have been using build tools(Gulp/Grunt) since quite sometime now, mostly for basic CSS|JS|HTML minification/Formating/Image optimization/watching for changes in my SCSS etc.

But what exactly is the difference between a Build tool and a task runner ?

Answer 1

The main difference is, just as the name suggests:

A task-runner like gulp or grunt is used to define different tasks, define how they are called, in which order they are executed and what dependencies they have. You can configure virtually anything as a task, as long as - in this case - the Node API allows it.

A build tool or bundler like webpack or rollup basically executes a single task: building/bundling. You can use plugins to tell them how to do their job, but you have little control over the order of execution nor can you run specific subsets of the process (like: only transpile the code but don't bundle) in the way a task-runner allows.

Do task-runners and build systems/bundlers fit together? Yes, they do! There are plugins that connect those systems, like gulp-webpack. Eitherway, you can always use the Node API from inside your tasks to do whatever you like.

So you could create tasks that make a call to a weather API and run webpack only if it's raining ;-)

If there still is some confusion, please let me know, as I would be glad to extend my answer.