4/2/2016

Gulp ASP.NET MVC 4.5.2 Template and Browserify

✓gulp✓ASP.NET✓ASP.NET MVC✓Node.js✓Angular.js

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

 

Relative Blogs