Bundling and Minification Confusion

Question

I'm using ASP.NET Web Forms with master pages. There are so many moving parts to this that I cannot figure it out. Different tutorials use different parts of it and omit others, that I cannot determine what is needed and what is fluff.

Different Parts:

Master Pages: In the head section for my CSS I have:

<link href="Content/css" rel="stylesheet" />

<asp:PlaceHolder runat="server">     
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>

Before closing body tag, I have:

<script src="<%= ResolveUrl("~") %>Scripts/jquery-2.1.1.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/bootstrap.min.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/jquery.reject.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/general.js"></script>

Looks like the min one is not needed, but do I need any of these and instead use

<script src="Scripts/js"></script> ?

Global.asax.cs: this seems simple enough, registering the bundles in Application_Start method.

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

Web.config:

I added the System.Web.Optimization namespace and the Microsoft.AspNet.Web.Optimization.WebForms assembly.

Bundle.config: I have no idea what this is for; many tutorials don't even mention it?

BundleConfig.cs: As well as the standard WebFormsJs, MsAjaxJs and modernizr custom bundles, I have the following for CSS:

bundles.Add(new StyleBundle("~/bundles/css").Include(
    "~/Content*"));

This is not working. I was about to add something similar for my JS files but got confused as to why I am doing this at all when according to this tutorial, all I needed for the CSS was:

<link href="Content/css" rel="stylesheet" />

Presumably, all I needed for my JS files was:

<script src="Scripts/js"></script>

In some tutorials I have seen ScriptManager.ScriptResourceMapping.AddDefinition - what is this for?

Here is the current state of my CSS and Scripts folders - I need all the non-minifed versions of these:

https://i.sstatic.net/x11s7.jpg

https://i.sstatic.net/iirg7.jpg

Can someone help me piece this together? I am running locally with debug set to false.

Answer 1

Below is a list of each of the sections that need to be configured for Bundling and Minification in WebForms.

This is taken from a production code base which is running Bundling and Minification.

Libraries:

• Microsoft.AspNet.Web.Optimization

Dependencies:

• WebGrease
• Microsoft.Web.Infrastructure (depending on version)

Global.asax

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

    //Use this if you want to force/test bundling in debug.
    BundleTable.EnableOptimizations = true;
}

BundleConfig class

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/sitejs")
            //Add as many JS libraries you would like to the bundle...
            .Include("~/Scripts/jquery-3.1.1.js")
            .Include("~/Scripts/jquery-migrate-3.0.0.js")
            );

        bundles.Add(new StyleBundle("~/bundles/sitecss")                
            //Add as many CSS files that you would like to the bundle...
            .Include("~/css/jquery-ui.css")
            );
    }
}

Master Page:

<!-- At the top of the Master Page -->
<%@ Import Namespace="System.Web.Optimization" %>

<!-- Just after the closing `</form>` tag -->

<asp:PlaceHolder runat="server">
    <%: Styles.Render("~/bundles/sitecss") %
    <%: Scripts.Render("~/bundles/sitejs") %
</asp:PlaceHolder>