
## Table of Contents

1. [Introduction](#introduction)
2. [gulpfile.js](#gulpfilejs)
3. [package.json](#packagejson)
4. [Other Resources](#other-resources)
5. [Conclusion](#conclusion)

## Introduction

This post shows how to use Gulp with an ASP.NET MVC 4.5.2 template and Browserify. Below are some useful references:

- Using Gulp - Microsoft
- Setting up Gulp and Bower for an ASP.NET MVC project in Visual Studio 2013
- How to use Gulp in Visual Studio
- Advanced AngularJS structure with Gulp, Node and Browserify
- Using Grunt/Gulp for Bundling and Minification in ASP.NET
- Migrating From ASP.NET MVC 5 to MVC 6
- Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
- ASP.NET 5: Managing Client-side Dependencies with NPM, Bower and Gulp

## gulpfile.js

```
var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");

gulp.task('connect', function () {
    connect.server({
        root: 'public',
        port: 4000
    })
});

gulp.task('browserify.1', function () {
    // Grabs the app.js file
    return browserify('./app/test1/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task('browserify.2', function () {
    // Single point of entry (make sure not to src ALL your files, browserify will figure it out for you)
    //gulp.src(['./app/test2/app.js'])
    //.pipe(browserify({
    //    insertGlobals: true,
    //    debug: true
    //}))
    //// Bundle to a single file
    //.pipe(concat('bundle.js'))
    //// Output it to our dist folder
    //.pipe(gulp.dest('./public/js/'));

    // Grabs the app.js file
    return browserify('./app/test2/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.2.js'))
        // Bundle to a single file
        //.pipe(concat('bundle.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task('browserify.3', function () {
    // Grabs the app.js file
    return browserify('./app/test3/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('main.3.js'))
        // saves it the public/js/ directory
        .pipe(gulp.dest('./public/js/'));
});

gulp.task("min:js", function () {
    gulp.src(["./public/js/main.2.js"], { base: "." })
        .pipe(concat("./public/js/dist/main.2.js"))
        .pipe(uglify())
        .pipe(gulp.dest("."));

    gulp.src(["./public/js/main.js"], { base: "." })
    .pipe(concat("./public/js/dist/main.js"))
    .pipe(uglify())
    .pipe(gulp.dest("."));

    gulp.src(["./public/js/main.3.js"], { base: "." })
     .pipe(concat("./public/js/dist/main.3.js"))
     .pipe(uglify())
     .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js"]);

// Views task
gulp.task('views', function () {
    //// Get our index.html
    //gulp.src('./app/test2/index.html')
    //// And put it in the dist folder
    //.pipe(gulp.dest('dist/'));

    // Any other view files from app/views
    gulp.src('./app/test2/views/**/*')
    // Will be put in the dist/views folder
    .pipe(gulp.dest('./public/app/test2/views/'));
});

gulp.task('watch', function () {
    gulp.watch('app/**/*.js', ['browserify.2', 'browserify.1', 'views'])
});

gulp.task('default', ['connect', 'watch']);
```

## package.json

```
{
  "name": "test_angular",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "dependencies": {
    "angular": "^1.5.5",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "angular": "^1.5.5",
    "angular-route": "^1.5.5",
    "browserify": "^13.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-uglify": "^1.5.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "no git"
  },
  "keywords": [
    "no",
    "keywords"
  ],
  "author": "",
  "license": "ISC"
}
```

## Other Resources

- Introduction to Bower, Grunt, and Gulp in Visual Studio
- How to use Gulp in Visual Studio
- ASP.NET - Progressive Enhancement with ASP.NET and React

## Conclusion

Using Gulp with ASP.NET MVC 4.5.2 along with Browserify allows you to bundle, minify, and manage your front-end JavaScript modules efficiently. The gulpfile and package.json above provide a working starting point for your project.


How to use Gulp with ASP.NET MVC 4.5.2 Template and Browserify.

Gulp

Gulp ASP.NET MVC 4.5.2 Template and Browserify