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".
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"
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"
Step 4: Install the gulp-clean package we need it in this article using the following command "npm install gulp-clean". Refer "Figure 4"
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"
Useful gulp tasks which i used in my project: