Adding the new ASP.NET Web Optimization framework to MVC4 projects after manually upgrading them

Question

After manually upgrading an ASP.NET MVC project to MVC4 using these instructions, how do you then set up the new CSS and JavaScript asset bundling and minimization features

Answer 1

Yes Follow the below steps to bundle and minify JS and CSS:

• First open package manager console and run the command, select your web app as the project.

Install-Package Microsoft.AspNet.Web.Optimization

• Go to global.asax right click and view code

• Paste the below code:

  public static void MinifyJavaScriptAndCSS()
  {
     var scripts1 = new ScriptBundle("~/bundles/customJSBundle");
     scripts1.Include("~/Scripts/script1.js");
     scripts1.Include("~/Scripts/script2.js");
     BundleTable.Bundles.Add(scripts1);
  
      //Bundle Css
      var css1 = new StyleBundle("~/bundles/customCSSBundle");
      css1.Include("~/Styles/style1.css");
      css1.Include("~/Styles/style2.css");
      BundleTable.Bundles.Add(css1);  
   }
  

• Call this in Application_Start()

   protected void Application_Start()
  {
      ApplicationHelper.MinifyJavaScript();
   }
  

• Go to _Layout.cshtml in Views/Shared

• Add the line in head

  @ViewBag.Title - My ASP.NET Application @Styles.Render("~/bundles/customCSSBundle")

• Add this before closing of the body tag

   //your code
    @Scripts.Render("~/bundles/customJSBundle")
   
  

• In web.config if you set compilation debug=true, files will not be bundled. If you set it as false, then the files will be bundled.