How do we add Bundling and Minification to a project that was upgraded from Visual Studio 2010 project

Question

I upgraded a legacy website project developed using Visual Studio 2010 to a Web Application project in Visual Studio 2013. Now I want to add some MVC components to this application including Bundling and Minification. But the App_Start folder is missing. Is there any NuGet package I need to install that would create the App_Start folder and add the 'Bundling and Minification' feature?

For instance, this project was also missing the 'Content' folder, but when I installed the jQuery UI 1.10.4 package via NuGet package Manager, it created the Content folder and add jQuery UI css files to it.

Answer 1

Step 1: Install Bundling and Minification (via the GUI). Tools > Library Package Manager > Manage NuGet Packages For Solution. Search Online for "bundling" and the first result should be Microsoft ASP.NET Web Optimization Framework. Install that.

Step 2: Right-click your Web Project and Add New Folder and call it App_Start.

Step 3: Add a new class in App_Start called BundleConfig.cs. It could look like this:

using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
    }
}

Step 4: Load on ApplicationStart in global.asax:

void Application_Start(object sender, EventArgs e)
{
     BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Step 5: Add to footer of MasterPage. I usually do like this:

        <%: System.Web.Optimization.Scripts.Render("~/bundles/jquery") %>
        <asp:ContentPlaceHolder ID="MyScripts" runat="server"></asp:ContentPlaceHolder>
    </body>
</html>

That way, jQuery loads near the </body> tag and you can put all inline scripts in a ContentPlaceHolder that renders after your main script references.