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
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
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
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/css?v=MDbdFKJHBa_ctS5x4He1bMV0_RjRq8jpcIAvPpKiN6U1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
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.
Conclusion:
ASP.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 developers to utilize the framework and the inherent tools for an optimized output.
|
|
| By Deepa Ranganathan On 15 Jun, 15 Viewed: 479 |
Have you recently created a web application using Visual Studio 2015RC? Looking to integrate Facebook authentication to this web application built on ASP.Net5? Then you have hit the right keys and reached the right place. Here, you will use easy steps to integrate Facebook authentication. Now,... By Deepa Ranganathan On 19 Jun 2015 Viewed: 490
The all new version of ASP.Net, ASP.Net5 has raised significant amount of curiosity as well as discussions, even before developers have started using it. It is an open source cross platform framework that is meant to develop cloud based web applications. This all new framework contains modular... By Deepa Ranganathan On 04 Jun 2015 Viewed: 377
ASP.NET is not just a web development platform of all the time, but a righteous web application framework of its own way. Its lofty architecture and cutting-edge features together give this framework a sense of grandeur that's absolutely hard to ignore. And since its keep on evolving itself so... By Celin Smith On 29 Apr 2015 Viewed: 369