CodeDigest.Com Logo
Featured:

Using Gulp (gulpfile.js) in Visual Studio 2017

Read What is Gulp? How to Use Gulp?, to understand Gulp tool. In short, Gulp is a client side task runner tool to automate the repetitive time consuming task in web development.

Microsoft included Gulp support into Visual Studio IDE (from VS 2013) for Asp.Net projects. In this quick start article, let’s understand how to use this tool to automate some of the most repetitive tasks using Gulp in Visual Studio 2017. As mentioned in the previous article, we need to install Gulp tool locally using npm package manager into our project to start using it.

Note – Though we can use the globally installed it is always recommended to use the locally installation. It will help when we set up new development environment by getting latest version from source control which will automatically install gulp and related packages locally based on the package.json file.

Let’s first include package.json file to hold the npm packages. To do this, right click project > Add New Item.. Select Web node and select npm Configuration file and click Add.

This will add package.json file in the solution. Now, we will install gulp from the command prompt. Go to command prompt (RUN > cmd) and type the below command and press enter,

 

npm install gulp --save-dev

 

For easy understanding, we will create gulp tasks to minimize html and javascript files in our solution. To do this, we need to install gulp-htmlclean and gulp-uglify gulp plugins using the below command from command prompt.

 

npm install gulp-htmlclean --save-dev

 

 

npm install gulp-uglify --save-dev

 

Executing both of the above command will install the required plugins locally in the folder node_modules under the project root. You can see this folder in the explorer like below.

The final package.json file content is,

 

{

  "version": "1.0.0",

  "name": "asp.net",

  "private": true,

  "devDependencies": {

    "gulp": "^3.9.1",

    "gulp-htmlclean": "^2.7.14",

    "gulp-uglify": "^2.1.2"

  }

}

 

Next, let’s add gulpfile.js into our solution. To do this, right click project in solution explorer and click “Add New Item..” In the new items dialogue, under the Web node, find Gulp Configuration file and click Add.

Before creating gulp tasks, let’s assume we will have our development version of html files and javascript files in html_dev and js_dev folder under wwwroot respectively. Let’s create gulp tasks using the plugins we added to remove whitespaces in html file and minimize the javascript files. Finally, let’s also add a task to copy the resultant minimized files into the output folders named html and js under wwwroot. We will also add a default task to call all the tasks at a single shot. The final gulpfile.js content below.

 

var gulp = require('gulp'), htmlclean = require('gulp-htmlclean'), uglify = require('gulp-uglify');

 

// folders

var folders = {

    root:"./wwwroot/"

};

 

gulp.task('html', function () {

    var out = folders.root + 'html/';

    return gulp.src(folders.root  + 'html_dev/**/*')

        .pipe(htmlclean())

        .pipe(gulp.dest(out));

});

 

gulp.task('js', ['html'], function () {

    return gulp.src(folders.root +  'js_dev/**/*')

        .pipe(uglify())

        .pipe(gulp.dest(folders.root + 'js/'));

});

 

gulp.task('default', ['js']);

 

 

The one good thing for writing the gulp tasks is, visual studio provides intellisense support in gulpfile.js like below.

Calling Gulp Task during Visual Studio Build

Visual Studio provides a GUI based Task Runner Explorer to link the gulp task to execute during various stages of Visual Studio build process. To get this explorer, right click gulpfile.js and click Task Runner Explorer like below.

This will bring the Task Runner Explorer window at the bottom with output window tabs. Refer the below picture.

The left column will display all the gulp tasks we have scripted in gulpfile.js.

Note - If you don’t see any tasks, try clicking refresh icon seen at top left corner in the Task Runner window. If you still unable to see, then you may have not installed gulp and related gulp plugins locally using npm package manager. You can click “Restore Packages” to restore npm package by right clicking package.json file.

You can now right click a task> Bindings> and select a stage to include a gulp task to execute during that stage. I have added the default task to execute during “After Build” stage.

When we re-build our project you can see the gulp tasks executing after build is complete. You can see the output like below in Task Runner explorer window. It may take some time to execute the tasks so wait until all your task are completed.

Once complete, gulp would have minimized the script files and removed the whitespaces in html file and placed the output files in the destination folder as seen below.

Happy Coding!!