How to do Bundling and Minification in Visual Studio 2015

Question

The APS.NET MVC project template that came with Visual Studio 2013 used bundling to send CSS and script files to the browser.

The ASP.NET MVC project template that comes with Visual Studio 2015 has stopped using it and inserts <link rel='stylesheet' ... > statements directly.

What is the recommended best practice for Bundling and Minification?

Answer 1

There's an article about this - Where Did My ASP.NET Bundles Go in ASP.NET 5? and What about Bundling and Minification.

Starting with ASP.NET 5, Microsoft is encouraging developers to start integrating some more popular web development tools that other web developers have been using: Gulp, npm, and bower. Each of these tools has a specific purpose:

• Gulp is a task-runner written in JavaScript that runs on top of the NodeJS framework and automates repetitive tasks
• npm is the Node Package Manager, and it can be used to deliver plugins and utilities that run in the NodeJS framework.
• Bower is a package manager for delivering static resources from Git repositories.

These tools now allow you to bundle and minify your scripts and css:

• gulp-concat Concatenates files
• gulp-uglify Minify files with UglifyJS
• gulp-less Compile your less files
• gulp-cssmin Minify css using gulp
• gulp-rename A gulp plugin to rename files easily

All can be installed through npm.

Example:

var paths = {
    bower: "./bower_components/",
    lib: "./" + project.webroot + "/lib/",
    app: "./" + project.webroot + "/app/",
    dist: "./" + project.webroot + "/dist/"
};

var concat = require("gulp-concat"),
    rename = require("gulp-rename"),
    uglify = require("gulp-uglify");

gulp.task("bundle", function () {
    return gulp.src([
        paths.app + "menu.js",
        paths.app + "app.js"])
    .pipe(concat("all.js"))
    .pipe(gulp.dest(paths.dist))
    .pipe(rename("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.dist));
});