Explain Grunt Task Runner Like I'm Five

I haven't really worked with grunt, but I have worked with Gulp. Similar just kind of different syntax.

Most Task Runners just essentially run tasks (Duh). Most of them use Node.js apps to do repetitive functions.

Biggest use case for me is compiling SCSS down to just CSS.

gulp.task('sass', gulp.series(function(done) {
    gulp.src(sassFiles)
        .pipe(sourcemaps.init())
        .pipe(sass({ sourceComments: 'map', outputStyle: 'compressed' }))
        .on('error', gutil.log)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write(sassDest))
        .pipe(gulp.dest(sassDest))
        .pipe(browserSync.stream());
    done();
}));

This function defines the gulp task that compiles and minifies the sass while adding source maps so you can track down errors and changes back to the split SCSS files.

So in the console you would just run

gulp sass

and it would find all the sass files, source map them, minify them, auto prefix the css, and then update browserSync (live reloads the page on file/css update).

Obviously it's not that useful to have to run the gulp sass command every time you need to compile SCSS. Luckily you can add watch functions:

gulp.watch(sassFilesToWatch, gulp.series('sass'));

and this will run and watch all the files defined and then run the gulp sass task automatically when one of those files changes.

You can also use task runners for bundling projects, linting your js, and about a million other things.