Why Use a Task Runner Like Gulp?

There are a lot of tasks involved with creating and deploying a front-end application.  Common tasks include things like watching file changes, concatenating/minifying files, prefixing files for different browsers, and linting Javascript.  Before task runners like Gulp and Grunt existed, these tasks were often done using shell or bash scripts on the command line.

Javascript, for example, can be minified in many ways using the command line.  Let’s explore one way I found in a post called Minify JS from the command line. The steps involve installing Java (or checking the version already installed), installing Google’s Closure Compiler, and then running a script on the command line to minify a JS file:

$ which java
$ chmod o+r closure-compiler.jar
$ minifyjs [file].js

For a simple one off task, this is a very easy way to do this (there are many other similar scripts for other tasks).  Just about everything that you could do with a dedicated task runner like Gulp or Grunt, you could do with a simple bash script, shell script, or npm package/command.

But it can quickly get a lot more complicated when you need to concatenate multiple files, run multiple tasks in order (with outputs from one becoming inputs on another).  Furthermore, using bash or shell requires developers to switch between languages.  Using a Javascript task runner like Gulp allows you to code and run your build tasks in the same language (Javascript).

To minify (aka uglify) Javascript in Gulp, the command setup would generally look something more like this:

First install the gulp-uglify package using npm:

$ npm install --save-dev gulp-uglify

Then setup the following command in your gulpfile:

var gulp  = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglify', function() {
return gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});

Then run gulp uglify from the command line.

This uglify command will minify the Javascript files from the paths you specify and put them in the destination folder (‘dist’ in this case).  You might have to write a few more lines than the commands in the first example but there are many advantages with the Gulp approach.  You can more easily specify which files you want to work with and the output destination.  The task is written in Javascript and you can easily batch this command with another (say for concatenating).  The gulp-uglify plugin has other options you could use to determine how comments are treated, whether to mangle the variable/function names, and if you wish to compress the files.

Build tasks can be done in many ways.  Using a dedicated task runner like Gulp allows for running build tasks using Javascript, easier organization, easier readability, and easier combining/batching of tasks.