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 w

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

@Matt, actually you don't need to add

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

And you don't need use CSHTML-template. You can reference your bundles this way from an html page:

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

It will save your page from View Engine.

Answer 3

To gain file-load speed in your SPA, you need manual time in the setup. The wrong answer is to implement Razor, especially if your whole goal was to stay away from MVC and its friends (Which is a good thing if your goal is an AngularJS SPA). When you implement the Optimization framework mentioned in other answers, you now have to hit the View Engine to build out CSHTML files, which is a noticeable hit to your speed, probably more than what you think you're saving.

So like I said, you'd need developer time to minimize the files. You would have to manually send them to a CDN you own (or need to set up). You can then reference your own CDN with your own packages as set up by your team, and that CDN will be cached by the user's browsers.

Then, when one or more of your SPA's need to point to updated HTML/CSS/JS, you increment the CDN version in that SPA App. Other SPA Apps can even stay the same with an old version (though I recommend trying to stick to latest-version CDN's). And the user's browsers will recognize the new CDN version and pull a new version to cache.

Answer 4

You can use YUI or Google Clouser Mapper

This is the example how to user YUI with Visual Studio

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

This link has Visual Studio Extensions http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

You can User JSMIN http://www.crockford.com/javascript/jsmin.html

You can run JsMin as Post Build Event as below jsmin <"$(ProjectDir)\debug.js" >"$(ProjectDir)\min.js"

This is the link how run JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

If this answered your question, Please check right on left side.

Answer 5

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.

Answer 6

You can also use VS extention WebEssentials minification which can minify your js/css files independently from project compilation (so that you do not need any third party dll dependency). It has bundling as well, very convenient.