Bundling and Minification in ASP.NET 4.5

Lets think about that when we add new CSS and JS file in our Solution and we have to explicit add that CSS and JS in our pages but in ASP.NET 4.5 we can only mention folder for CSS and JS, it will automatically call all CSS and JS file from that folders.

Bundling lets you combine individual JavaScript and CSS files into a bundle that can be treated like a single file. Minification condenses JavaScript and CSS files by removing whitespace and other characters that are not required. These features work with Web Forms, ASP.NET MVC, and Web Pages.

Bundles are created using the Bundle class or one of its child classes, ScriptBundle and StyleBundle. After configuring an instance of a bundle, the bundle is made available to incoming requests by simply adding it to a global BundleCollection instance. In the default templates, bundle configuration is performed in a BundleConfig file. This default configuration creates bundles for all of the core scripts and css files used by the templates.

Bundles are referenced from within views by using one of a couple possible helper methods. In order to support rendering different markup for a bundle when in debug vs. release mode, the ScriptBundle and StyleBundle classes have the helper method, Render. When in debug mode, Render will generate markup for each resource in the bundle. When in release mode, Render will generate a single markup element for the entire bundle. Toggling between debug and release mode can be accomplished by modifying the debug attribute of the compilation element in web.config as shown below:

<system.web>
 <compilation targetframework="4.5" debug="true" />
 ...</system.web>

Additionally, enabling or disabling optimization can be set directly via the BundleTable.EnableOptimizations property.

BundleTable.EnableOptimizations = true;

When files are bundled, they are first sorted alphabetically (the way they are displayed in Solution Explorer). They are then organized so that known libraries and their custom extensions (such as jQuery, MooTools, and Dojo) are loaded first. For example, the final order for the bundling of the Scripts folder as shown above will be:

1. jquery-1.6.2.js
2. jquery-ui.js
3. jquery.tools.js
4. a.js

CSS files are also sorted alphabetically and then reorganized so that reset.css and normalize.css come before any other file. The final sorting of the bundling of the Styles folder shown above will be this:

1. reset.css
2. content.css
3. forms.css
4. globals.css
5. menu.css
6. styles.css

Reference : http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc318097395