How Bundling and Minification is Done in ASP.Net5?

When ASP.Net 4.5 was launched in the year 2012, you saw two new features- bundling and minification which helped reduce the file size. With these features, you could combined two or more CSS or JS files, and create a single file. The file size of this combined file is reduced with the help of minification feature.

Let's understand how the bundling and minification features worked in ASP. Net

You first needed to configure the BundleConfig.cs in the ASP_Start folder, which will define the files on which the bundling feature needs to act on

public static void RegisterBundles (BundleCollection bundles)

{

Bundles.Add (new ScriptBundle ("~/bundles/jquery"). Include ("~/Scripts/jQuery-{version}.js"));

Bundles.Add (new ScriptBundle("~/bundles/jqueryval") .Include("~/Scripts/jquery.validate*"));

Bundles.Add (new ScriptBundle ("~/bundles/modernizr") .Include("~/Scripts/modernizr-*"));

Bundles.Add (new ScriptBundle ("~/bundles/bootstrap") .Include ("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));

Bundles.Add (new StyleBundle("~/content/css").Include ("~/content/bootstrap.css", "~/content/site.css"));

Using the syntax given below, you can now reference these bundles that you have configured

@ViewBag.Title - My ASP.NET Application

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

ASP.Net will now replace the calls to styles, render and scripts. When the project is set to run in the release mode, you will observe some concatenated and minified files at the output

Home Page - My ASP.NET Application

These files are first created along the fly of the web server, and finally cached within the memory, which can prove to be a memory consuming task. That's why ASP.Net5 has decided to chuck out the old method, and reveal newer tools

New Tools for ASP.Net5

Microsoft has integrated some popular web development tools in ASP.Net5, already existent on other platforms- Gulp, npm and bower. These tools are used for specific purposes as explained below

Gulp: It is a taskrunner software built on JavaScript which uses the NodeJS framework, and has the ability to automate the repetitive tasks

Npm: if you have plug-ins or utilities that use the NodeJS framework, you can use this node package manager

Bower: you can get the static resources from Git repositories using this tool

These tools are already configured into the ASP.Net5 platform. With Bower, you get certain JS and CSS frameworks- Bootstrap, Bootstrap-touch-carousel, jQuery, jQuery validation, Hammer.js

Now, that you are aware of the new tools that come with ASP.Net5, you should know how to create a bundle using ASP.Net5

Create a Bundle using ASP.Net5 Tools

In the wwwroot/app folder of your ASP.Net5, you have two files-app.js and menu.js. Here, for the sake of understanding, you will create a bundle of these two files

You will first need to use the tool gulp, which will concatenate, rename and minify the files. To do this, you will need npm to deliver three gulp extensions for which you will need to update package.json

{

"name": "ASP.NET",

"version": "0.0.0",

"devDependencies": {

"gulp": "3.8.11",

"rimraf": "2.2.8",

"gulf-concat": "2.5.2",

"gulp-uglify": "1.2.0",

"gulf-rename": "1.2.2",

}

}

Add gulp-concat, gulp-uglify and gulp-rename to these line items and save the file. Visual Studio will automatically call upon npm, and add the above mentioned items to your file. Now, write the task to your JS file as below

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));

});When this code is run, you will get these files- dist/all.js and dist/all.min.js. You have the option of running this code before or after the build process. You have the task runner explorer, where you can force the task to run at that time itself.ConclusionASP.Net5 has come a long way when it comes to bundling and minification. Instead of increasing the memory with raw tools, this new development framework has introduced three new tools that not only help in processing bundling and minification, but also manage to use less memory. Hire ASP.Net developer to utilize the framework and the inherent tools for an optimized output

Original Source:

http://www.advancesharp.com/blog/1173/how-bundling-and-minification-is-done-in-asp-net5