Bundling and minification without ASP.NET MVC

Question

Is it possible to use bundling and minification from Microsoft.AspNet.Web.Optimization without having an MVC project?

I'm creating an AngularJS site communicating with a REST API. For the REST API I'm using ASP.NET Web API. I have also created an "ASP.NET Empty Web Application". There are only HTML, js and CSS files in this project (and a web.config). I'd like for my js and CSS files to be bundled and minified, but I don't want to create a MVC project just to get that. Is it possible?

Answer 1

It is absolutely possible to use the bundling and minification in a blank project.

1. Use Nuget to install the package: Install-Package Microsoft.AspNet.Web.Optimization

2. Create a BundleConfig Class and define your bundles:

   using System.Web.Optimization; public class BundleConfig {     public static void RegisterBundles(BundleCollection bundles)     {         bundles.Add(new ScriptBundle("~/bundles/js").Include(                   "~/Scripts/*.js"));         bundles.Add(new StyleBundle("~/bundles/css").Include(                    "~/Styles/*.css"));      }  } 

3. Register the BundleConfig class within the application start in the global.asax

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

4. reference the bundles in your HTML document.
5. Enable bundling by disabling debug mode.

Answer 2

In addition to the answers given above, I'd like to mention that there was one important step forgotten:

After you've installed the NuGet package for Microsoft.AspNet.Web.Optimization and registered the bundles in the Global.asax (as explained in Claies answer), you need to add the render methods for styles and scripts as follows:

<%= Styles.Render("~/bundles/css") %> <%= Scripts.Render("~/bundles/MattsUIBundle/js") %> 

This needs to be added to the ASPX page's head section in order to render the bundles "~/bundles/js" and "~/bundles/css" added earlier to your page. Without that it will not appear (see why do I need render?). It requires that you add

<%@ Import Namespace="System.Web.Optimization" %> 

to line 2 of your page in order to register the namespace, assuming you have already added the NUGET package Microsoft.AspNet.Web.Optimization to your code.

If you want to include more related files, do it like

void Application_Start() {     BundleCollection bundles=BundleTable.Bundles;     var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");     jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");     jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");     jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");     bundles.Add(jsMattsBundle); } 

or more simply

    jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",             "~/Scripts/lib/jquery-ui.custom.min.js",             "~/Scripts/lib/jquery.watermark.min.js"); 

That will bundle together all the 3 scripts under the virtual path "~/bundles/MattsUIBundle/js".

---

Important: Bundling will check if you are in debug mode or release mode. Optimizations only apply if you remove the debug flag in web.config

<compilation debug="true" /> 

or if you explicitly define inside of Application_Start you want to optimize regardless of being in debug mode:

BundleTable.EnableOptimizations = true; 

Likewise, if you're using CDN support, turn it on via

BundleTable.Bundles.UseCdn = true;   //enable CDN support 

which will allow you to declare

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",             jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); 

Note that the CDN will only be used in release mode. The following script ensures that a local copy of jQuery is loaded if the CDN loading fails:

    <%= Scripts.Render("~/bundles/jquery") %>     <script type="text/javascript">         if (typeof jQuery == 'undefined') {             var e = document.createElement('script');             e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';             e.type = 'text/javascript';             document.getElementsByTagName("head")[0].appendChild(e);         }     </script>  

assuming that you're providing a local copy of jQuery 1.7.1 at "~/Scripts".

---

Note: In MVC Razor syntax rendering is done in the view as follows:

@Scripts.Render("~/bundles/MattsUIBundle/js")  @Styles.Render("~/bundles/css")  

More information can be found here.