Tuesday, December 18, 2012

Bundling conventions in ASP.NET Bundling and Minification

I talked about the Bundling and Minification NuGet package before. Last week when configuring a new ASP.NET MVC 4 web application, I discovered another nice feature inside this library. Before I had to update the script references each time I upgraded to a new version of jQuery. So somewhere in my code I had a script reference like this:
<script type="text/javascript" language="javascript" src="~/scripts/jquery-1.7.1.js"/>

With the Bundling and Minification library you can create a version independent bundle and set the reference once. So you no longer have to upgrade your script references.

You can see this already in action if you created a new ASP.NET MVC application in Visual Studio 2012.  If you open up  the App_Start\BundleConfig.cs file and examine the RegisterBundles method, you’ll find the following code:

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));
}
The preceding code creates a new JavaScript bundle named ~/bundles/jquery that includes all the appropriate (that is debug or minified but not .vsdoc) files in the Scripts folder that match the wild card string "~/Scripts/jquery-{version}.js". With a debug configuration, the file jquery-1.7.1.js will be added to the bundle. In a release configuration, jquery-1.7.1.min.js will be added.

The bundling framework follows several common conventions such as:
  • Selecting “.min” file for release when “FileX.min.js” and “FileX.js” exist. 
  • Selecting the non “.min” version for debug.
  • Ignoring “-vsdoc” files (such as jquery-1.7.1-vsdoc.js), which are used only by IntelliSense.
The {version} wild card matching shown above is used to automatically create a jQuery bundle with the appropriate version of jQuery in your Scripts folder. In this example, using a wild card provides the following benefits:
  • Allows you to use NuGet to update to a newer jQuery version without changing the preceding bundling code or jQuery references in your view pages. 
  • Automatically selects the full version for debug configurations and the ".min" version for release builds.

Nice!

1 comment:

Web developer said...

you are a great author.I will be sure to bookmark your blog and definitely will come back from now on.