Simple steps for creating tasks in Gulp task runner for your SPA application using Visual Studio

First from within Visual Studio, go to Extensions and Updates and install the following 3 nuget packages:

• GruntWatcher   (works with Gulp too!)
• Package Intellisense ( helps with intellisense in npm)
• Task Runner Explorer (helps run Gulp)

Then in your solution add a package.json file if not already exists. One way to do it is simply create one using the command prompt by going to your solution root directory as

      npm init --yes

and hit enter for defaults. Now include this file in your solution from within Visual Studio, so Node can use this.

Next, create a file in your Visual Studio solution called gulpfile.js

Create your gulp tasks in gulpfile.js like below

var gulp = require('gulp');
var concat = require('gulp-concat');
var angularFileSort = require('gulp-angular-filesort');
var strip = require('gulp-strip-line');
var templateCache = require('gulp-angular-templatecache');

gulp.task("buildMenuTemplateCache", function(){
    return gulp
           .src(["./ext-modules/menu/**/*.html"])
           .pipe(templateCache({
                 root : "./ext-modules/menu/",
                 module: "menu"
                }))
           .pipe( gulp.dest("./ext-modules/menu/"));        
});

gulp.task("buildJS", function(){
     return gulp
                 .src(["./ext-modules/**/*.js"]),  //specify source
                 .pipe(angularFileSort()),  //sorts js files in same folder so module comes first
                 .pipe(strip(['use strict'])),    //removes use strict
                 .pipe(concat('framework.js')),    //concatenate all files into single file
                 .pipe(dest('./dist/'));    //specify destination 
});

gulp.task("buildCSS", function(){
     return gulp.src(),
                 .pipe(),
                 .pipe();    
});

The above file is going to run in Node and not on the browser. So we need to install each of the required packages locally in the project using --save-dev flag like so:

     npm install --save-dev gulp

Now if we look in our package.json file, we should see all our devDependencies listed in the file.
To run each individual task in gulpfile.js from Visual Studio, just right click the file and run the task. Doing so will produce the output of the task. We can also run the tasks using Task Runner Explorer from View->Other Windows menu item.

 Finally, include the output file produced by the task runner in the distribution folder using "Show all files' in the solution. Then we need to import just this one single js file in our index.html file for all the javascript files! Similarly include a single .CSS file in index.html.

References:
 http://www.pluralsight.com/training/player?author=mark-zamoyta&name=building-spa-framework-angularjs-m7&mode=live&clip=8&course=building-spa-framework-angularjs

http://www.toptal.com/nodejs/an-introduction-to-automation-with-gulp