Post
Ask Question

Bundling And Minification In MVC - Part 2

Before reading this article, I highly recommend reading the previous part of the series:

Now follow below steps:

Step 1: In Web config add bundle module and make sure you have added the dll.

  1. System.Web.Optimization.BundleModule in project.  
  2. <system.webServer>  
  3. <modules runAllManagedModulesForAllRequests="true">  
  4. <remove name="BundleModule"/>  
  5. <add name="BundleModule" type="System.Web.Optimization.BundleModule"/>  
  6. </modules>  
  7. </system.webServer>  
Step 2: Register your JavaScript and JQuery bundles Bundle Module as in the following way,

In new script bundle mention the bundle name and include section mention the script file names.
If version of script files is changing the mention {version} it will automatically take the latest version. Here's the code,
  1. public class BundleConfig  
  2. {  
  3.     // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862  
  4.     public static void RegisterBundles(BundleCollection bundles)  
  5.     {  
  6.         bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));  
  7.         bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));  
  8.         bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));  
  9.         // Use the development version of Modernizr to develop with and learn from. Then, when you're  
  10.         // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.  
  11.         bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));  
  12.         bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js", "~/Scripts/respond.js"));  
  13.         bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css"));  
  14.         //bundles.Add(new StyleBundle("~/Content/themes/redmon/css").Include(  
  15.         // "~/Content/themes/redmon/jquery-ui.css"));  
  16.         bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/core.css", "~/Content/themes/base/resizable.css", "~/Content/themes/base/selectable.css", "~/Content/themes/base/accordion.css", "~/Content/themes/base/autocomplete.css", "~/Content/themes/base/button.css", "~/Content/themes/base/dialog.css", "~/Content/themes/base/slider.css", "~/Content/themes/base/tabs.css", "~/Content/themes/base/datepicker.css", "~/Content/themes/base/progressbar.css", "~/Content/themes/base/theme.css"));  
  17.     }  
  18. }  
Step 3: Verify BundleConfig are called in App_Start,

webConfig

Step 4: Call the bundle in _Layout.cshtml section,

My _Layout page is as below:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") </head>  
  8.   
  9. <body>  
  10.     <div class="container body-content"> @RenderBody() </div>  
  11. </body>  
  12.   
  13. </html>  
Step 5: Bundling doesn’t work in debug mode,

So either explicitly off debug mode in Webconfig as in the following way,

Webconfig

OR

Mention below line in global.asx in application_start function
  1. BundleTable.EnableOptimizations = true;  
Step 6: Run the project,

While running the project it will ask to run without debugging as in the following,

project

Select run without debugging and click ok button (Option will be displaed only you off debug mode).

Run the project

Verify in chrome browser, right click, then select Inspect element and Source Tab. Your css and javascript file are bundled and minified as in the following,

javascripts


Similar Articles