← back to the blog


Gulp ASP.NET MVC 4.5.2 Template and Browserify

Posted in gulp, ASP.NET, ASP.NET MVC, Node.js, Angular.js by dake

How to Use Gulp ast ASP.NET MVC 4.5.2 Template

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