Explain Grunt Task Runner Like I'm Five

・1 min read

How does grunt task runner works?

What are some use cases for it?

If you want to teach someone on using the task runner, how'd you ask them to use it?

Did you find this post useful? Show some love!
DISCUSSION (1)
 

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.

Classic DEV Post from Aug 26 '18

What are the hardest programming languages you have ever learned?

For me it was C and Haskell and for completely different reasons. Coming from ...

Mahesh K
Join dev.to

Coding is hard. Community is here.