Working with Multiple Tasks in Gulp

In this post, I am going to create a gulp program which will do check my js files for any errors, concatenate, minify and rename our js file. For that I am going to make use of the following plugins.

1. gulp-jshint
2. gulp-concat
3. gulp-rename

I am assuming that you are already familiar with Node and packaging frameworks such as Grunt or Gulp, then you can proceed to the below part. If you are new to this, then you can refer my previous post on how to set up gulp and about gulp tasks in the links given below

Getting Started with Gulp

Gulp Tasks in Detail

 First thing we need to do is installing the required plugins in our project. The below command will download and install all the three plugins at once.

npm install --save-dev jshint gulp-jshint gulp-concat gulp-rename gulp-uglify

Once you executes the command, will get an output as the one below.

result

Now we will create a file to define all the tasks for gulp and is saved as gulpfile.js

var gulpMod = require("gulp");

var jshintMod = require("gulp-jshint");
var jsconcatMod = require("gulp-concat");
var uglifyMod = require("gulp-uglify");
var jsrenameMod = require("gulp-rename");

//sanity check
gulpMod.task("sanity", function(){
    return gulpMod.src("scripts/*.js")
        .pipe(jshintMod())
        .pipe(jshintMod.reporter("default"));
       
});

gulpMod.task('scriptsmanip', function() {
    return gulpMod.src('scripts/*.js')
        .pipe(jsconcatMod('all.js'))
        .pipe(gulpMod.dest('dist'))
        .pipe(jsrenameMod('all.min.js'))
        .pipe(uglifyMod())
        .pipe(gulpMod.dest('dist'))
        
});


gulpMod.task("trackChanges", function(){
    gulpMod.watch("scripts/*.js",["sanity",'scriptsmanip']);
});

gulpMod.task('default',['sanity','scriptsmanip']);

Let's examine the code in detail, in the first part I have imported all the modules required for our use case

var gulpMod = require("gulp");

var jshintMod = require("gulp-jshint");
var jsconcatMod = require("gulp-concat");
var uglifyMod = require("gulp-uglify");
var jsrenameMod = require("gulp-rename");

In the next block, I have created a task which will check for any error in all the javascript files in the scripts folder.

gulpMod.task("sanity", function(){
    return gulpMod.src("scripts/*.js")
        .pipe(jshintMod())
        .pipe(jshintMod.reporter("default"));
       
});

The next task is doing all the concatenation, copying, renaming and minification

gulpMod.task('scriptsmanip', function() {
    return gulpMod.src('scripts/*.js')
        .pipe(jsconcatMod('all.js'))
        .pipe(gulpMod.dest('dist'))
        .pipe(jsrenameMod('all.min.js'))
        .pipe(uglifyMod())
        .pipe(gulpMod.dest('dist'))
        
});

Here we are using the pipe method to get the output from concatenation operation and then provides it as the input to the renaming plugin. Then the streamAPI with get the output stream after renaming and the minification plugin will receive it as input and generates the minified files and persists in the disk.

So let's examine the folder structure now and see what all files are there.

We have two javascript files inside the scripts folder which contains one method each in it. In the root we have package.json and gulpfile.json along with node_modules folder which got created when we installaed gulp locally. 

Let's run the gulp command to perform our use case

After the execution is completed, we can see now that there is new folder name dist in our directory and it contains two files. One file is normal one and other one is a minified one and it's contents are the merged from the files under the script folder.