Gulp in ASP.NET MVC 4/VISUAL STUDIO 2012

(ASP.NET MVC)


Hi,

Before reading this article please read  Bower in ASP.NET MVC 4/VISUAL STUDIO 2012

What is Gulp ?

Gulp is a nodejs based task runner. I am going to use the gulp to copy the scripts from the "bower_components" directory into our mvc 4 project scripts directory.

Step 1: Install the gulp through node package manager using the following command "npm install -g gulp". g stands for the global option. Refer "Figure 1".

Install gulp globally

Step 2: Open the command prompt window and set the path to our asp.net mvc 4 project. Then install the gulp into our asp.net mvc 4 project using the following command "npm install gulp". Refer "Figure 2"

Install gulp locally

Step 3: Install the  gulp-jshint, gulp-sass,gulp-concat,gulp-uglify and gulp-rename packages using the following gulp command "npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename  --save-dev". Once you installed the those gulp packages, You will find the new folder called "node_modules" in the root of the project directory. It contains all the installed gulp packages. No need to include the "node_modules" directory into our mvc4 project. Refer "Figure 3"

Install gulp packages

Step 4:  Install the gulp-clean package we need it in this article using the following command "npm install gulp-clean". Refer "Figure 4"

Install gulp-clean package

Step 5: Add the javascript file in the root of the mvc 4 project and name it as "gulpfile.js". Add the new directory in the root of the asp.net mvc 4 porject and name it as "Lib", Add the sub directory inside the lib directory, Name the subdirectory as "Js". Refer "Figure 5"

Add the gulpfile.js

Write the code inside the newly created gulpfile.js as written in the above figure.

Step 6: Now we are ready to run the gulp task runner. Open the command prompt, set the path to our project directory. Run the gulp task called the "copy" using the following command "gulp copy". The gulp copy task will first clean the scripts in the "Lib/Js/" directory and then copy the specified scripts from the "bower_components" directory into our "Lib/Js/" directory. Then you can include and use the scripts in the "Lib/js/" directory into your mvc 4 application. Refer "Figure 6"

Run the concatenated "gulp copy" task

Useful gulp tasks which i used in my project:

Useful gulp tasks

Useful gulp tasks

thank you...........

 

test code


Ratings


Average Rating: 5.00 by 9 users
Giri Prasad
8/30/2015
8/30/2015
Download PDF
Download Project

Comments






Tommy

Very nice!