Gulp ASP.NET MVC 4.5.2 Template and Browserify
4/2/2016·4 min read
How to Use Gulp ast ASP.NET MVC 4.5.2 Template
- 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