I&#39;m trying to use the new bundling feature in a project I recently converted from MVC 3 to MVC 4 beta. It requires a line of code in global.asax, `BundleTable.Bundles.RegisterTemplateBundles();`, which requires `using System.Web.Optimization;` at the top.

When I do this, I get the red squiggly lines that say, &quot;Are you missing an assembly reference?&quot;  When I try and add reference, and click on the .NET tab in the dialog, sort from A-Z, I do not see `System.Web.Optimization`.

How do I add this reference to my project?

How to add reference to System.Web.Optimization for MVC-3-converted-to-4 app

My question is similar to this:

&gt;https://stackoverflow.com/questions/9780099/asp-net-mvc-4-minification-background-images

Except that I want to stick with MVC&#39;s own bundling if I can. I&#39;m having a brain crash trying to figure out what the correct pattern is for specifying style bundles such that standalone css and image sets such as jQuery UI work.

I have a typical MVC site structure with `/Content/css/` which contains my base CSS such as `styles.css`. Within that css folder I also have subfolders such as `/jquery-ui` which contains its CSS file plus an `/images` folder. Image paths in the jQuery UI CSS are relative to that folder and I don&#39;t want to mess with them.

As I understand it, when I specify a `StyleBundle` I need to specify a virtual path which does not also match a real content path, because (assuming I&#39;m ignoring routes to Content) IIS would then try to resolve that path as a physical file. So I&#39;m specifying:

    bundles.Add(new StyleBundle(&quot;~/Content/styles/jquery-ui&quot;)
           .Include(&quot;~/Content/css/jquery-ui/*.css&quot;));

rendered using:

    @Styles.Render(&quot;~/Content/styles/jquery-ui&quot;)

I can see the request going out to:

    http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

This is returning the correct, minified CSS response. 
But then the browser sends a request for a relatively linked image as:

    http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

Which is a `404`.

I understand that the last part of my URL `jquery-ui` is an extensionless URL, a handler for my bundle, so I can see why the relative request for the image is simply `/styles/images/`. 

So my question is **what is the correct way** of handling this situation? 

MVC4 StyleBundle not resolving images

How does   
    
    @Scripts.Render(&quot;~/bundles/jquery&quot;)

differ from just referencing the script from html like this

    &lt;script src=&quot;~/bundles/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    
Are there any performance gains?

Why use @Scripts.Render(&quot;~/bundles/jquery&quot;)

I have `debug=&quot;true&quot;` in both my _web.config(s)_, and I just don&#39;t want my bundles minified, but nothing I do seems to disable it. I&#39;ve tried `enableoptimisations=false`, here is my code:

    

    //Javascript
    bundles.Add(new ScriptBundle(&quot;~/bundles/MainJS&quot;)
                .Include(&quot;~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*&quot;)
                .Include(&quot;~/Scripts/regular/lib/mvc/jquery.validate*&quot;)
                .Include(&quot;~/Scripts/regular/lib/bootstrap.js&quot;)
                .IncludeDirectory(&quot;~/Scripts/regular/modules&quot;, &quot;*.js&quot;, true)
                .IncludeDirectory(&quot;~/Scripts/regular/pages&quot;, &quot;*.js&quot;, true)
                .IncludeDirectory(&quot;~/Scripts/regular/misc&quot;, &quot;*.js&quot;, true));

    //CSS
    bundles.Add(new StyleBundle(&quot;~/bundles/MainCSS&quot;)
                .Include(&quot;~/Content/css/regular/lib/bootstrap.css*&quot;)
                .IncludeDirectory(&quot;~/Content/css/regular/modules&quot;, &quot;*.css&quot;, true)
                .IncludeDirectory(&quot;~/Content/css/regular/pages&quot;, &quot;*.css&quot;, true))



ASP.NET Bundles how to disable minification

In MVC 4 we have bundles. While defining the bundles we can use wildcards like * for all files in a folder.

In the example below what does `-{version}` mean?

&lt;!-- language: lang-cs --&gt;

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle(&quot;~/bundles/jquery&quot;).Include(
            &quot;~/Scripts/jquery-{version}.js&quot;));
    }


{version} wildcard in MVC4 Bundle

I am runing an App on app harbor written in MVC4.

A bundle of css files doesn&#39;t work. In my local computer in debug mode I see the code of the App and I see the files. The App works as expected.

    &lt;link href=&quot;/Content/css/home/basic-jquery-slider.css&quot; rel=&quot;stylesheet&quot;/&gt;
    &lt;link href=&quot;/Content/css/home/Home.css&quot; rel=&quot;stylesheet&quot;/&gt;

When I upload the app to Appharbor I see the bundle in the code but the App doesn&#39;t work.

    &lt;link href=&quot;/Content/css/home?v=zhVOIpUNuvCOZhJyBcQWpMlozayor4te6k-pM29wHqI1&quot; rel=&quot;stylesheet&quot;/&gt;

When I browse that link in the `href` I get **403 - Forbidden: Access is denied.**

How to troubleshoot this?



ASP.NET MVC framework 4.5 CSS bundle does not work on the hosting

I&#39;m trying out the [MVC4 System.Web.Optimization 1.0 ScriptBundle feature](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification). 

I have the following configuration:

    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // shared scripts
            Bundle canvasScripts =
                new ScriptBundle(BundlePaths.CanvasScripts)
                    .Include(&quot;~/Scripts/modernizr-*&quot;)
                    .Include(&quot;~/Scripts/json2.js&quot;)
                    .Include(&quot;~/Scripts/columnizer.js&quot;)
                    .Include(&quot;~/Scripts/jquery.ui.message.min.js&quot;)
                    .Include(&quot;~/Scripts/Shared/achievements.js&quot;)
                    .Include(&quot;~/Scripts/Shared/canvas.js&quot;);
            bundles.Add(canvasScripts);
        }
    }

and the following view:

    &lt;script type=&quot;text/javascript&quot; src=&quot;@Scripts.Url(BundlePaths.CanvasScripts)&quot;&gt;&lt;/script&gt;

where `BundlePaths.CanvasScripts` is `&quot;~/bundles/scripts/canvas&quot;`. It renders this:


    &lt;script type=&quot;text/javascript&quot; src=&quot;/bundles/scripts/canvas?v=UTH3XqH0UXWjJzi-gtX03eU183BJNpFNg8anioG14_41&quot;&gt;&lt;/script&gt;

So far so good, except `~/Scripts/Shared/achievements.js` is the first script in the bundled source. It depends on every script included before it in the `ScriptBundle`. **How can I ensure that it honors the order in which I add include statements to the bundle?**

**Update**

This was a relatively new ASP.NET MVC 4 application, but it was referencing the optimization framework pre release package. I removed it and added the RTM package from http://nuget.org/packages/Microsoft.AspNet.Web.Optimization. With the RTM version with debug=true in web.config, `@Scripts.Render(&quot;~/bundles/scripts/canvas&quot;)` renders the individual script tags in the correct order. 

With debug=false in web.config, the combined script has the achievements.js script first, but since its a function definition (object constructor) that&#39;s called later, it runs without error. Perhaps the minifier is smart enough to figure out dependencies?

I also tried the `IBundleOrderer` implementation that Darin Dimitrov suggested with RTM with both debug options and it behaved the same.

So the minified version is not in the order I expect, but it works.

How can I specify an explicit ScriptBundle include order?

... or *how I learned to stop worrying and just write code against completely undocumented APIs from Microsoft*. Is there any actual documentation of the official `System.Web.Optimization` release? &#39;cuz I sure can&#39;t find any, there&#39;s no XML docs, and all the blog posts refer to the RC API which is substantially different. Anyhoo..

I am writing some code to automatically resolve javascript dependencies and am creating bundles on the fly from those dependencies. Everything works great, except if you edit scripts or otherwise make changes that would affect a bundle without restarting the application, the changes won&#39;t be reflected. So I added an option to disable caching of the dependencies for use in development.

However, apparently `BundleTables` caches the URL *even if the bundle collection has changed*. For example, in my own code when I want to re-create a bundle I do something like this:

    // remove an existing bundle
    BundleTable.Bundles.Remove(BundleTable.Bundles.GetBundleFor(bundleAlias));
   
    // recreate it.
    var bundle = new ScriptBundle(bundleAlias);
    
    // dependencies is a collection of objects representing scripts, 
    // this creates a new bundle from that list. 

    foreach (var item in dependencies)
    {
        bundle.Include(item.Path);
    }

    // add the new bundle to the collection

    BundleTable.Bundles.Add(bundle);

    // bundleAlias is the same alias used previously to create the bundle,
    // like &quot;~/mybundle1&quot; 
   
    var bundleUrl = BundleTable.Bundles.ResolveBundleUrl(bundleAlias);

    // returns something like &quot;/mybundle1?v=hzBkDmqVAC8R_Nme4OYZ5qoq5fLBIhAGguKa28lYLfQ1&quot;


Whenever I remove &amp; recreate a bundle *with the same alias*, absolutely nothing happens: the `bundleUrl` returned from `ResolveBundleUrl` is the same as before I removed &amp; recreated the bundle. By &quot;the same&quot; I mean that the content hash is unchanged to reflect the new contents of the bundle. 

*edit*... actually, it&#39;s much worse than that. The *bundle itself* is cached somehow outside of the `Bundles` collection. If I just generate my own random hash to prevent the browser from caching the script, ASP.NET returns *the old script*. So, apparently, removing a bundle from `BundleTable.Bundles` does not actually do anything. 

I can simply change the alias to get around this problem, and that is OK for development, but I don&#39;t like that idea since it means either I have to deprecate aliases after each page load, or have a BundleCollection that grows in size on every page load. If you left this on in a production environment, it would be a disaster.

So it seems that when a script is served, it gets cached independent of the actual `BundleTables.Bundles` object. So if you re-use a URL, even if you&#39;ve removed the bundle that it referred to before reusing it, it responds with whatever&#39;s in its cache, and altering the `Bundles` object does not flush the cache -- so only *new* items (or rather, new items with a different name) would ever be used.

The behavior seems odd... removing something from the collection should remove it from the cache. But it doesn&#39;t. There must be a way to flush this cache and have it use the current contents of the `BundleCollection` instead of what it cached when that bundle was first accessed. 

Any idea how I would do this?

There is this `ResetAll` method which has an unknown purpose but it just breaks things anyway so that isn&#39;t it.

How to force BundleCollection to flush cached script bundles in MVC4

I am trying out ASP.NET Bundling with ASP.NET MVC 4 application. The situation is that I want to make a CDN style service, which has JS and CSS files to which you can address from other sites with this type address: http://www.mycdn.com/scripts/plugin/js, which bundles and minifies all included .js files.

My bundle config for one file looks like this:

    bundles.Add(new ScriptBundle(&quot;~/Scripts/plugin/pluginjs&quot;).Include(&quot;~/Scripts/plugin/jquery.plugin.js&quot;));

However, when I do this, the bundles are not getting updated even after I change the original js files. I keep on getting 304 Not Modified, when I refresh my browser, and the content of the minified file is not updated. How can I make bundles update, because it is useless to have bundles with old content? I tried out every way, but could not figure out a solution.

Thanks in advance!

ASP.NET Bundling - Bundle not updating after included file has changed (returns 304 not modified)

I have bin deployed an MVC4 application to my hosting provider, based on advice given here and one or two on-the-fly fixes, but the most immediately apparent problem is that the bundling for css doesn&#39;t work. When I replace the bundle ref with explicit file refs, my css works again.

I am using a standard MVC4 RTM project template from VS2012. The provider is running IIS 7.5 and ASP.NET 4, and my previous MVC3 version of the same app worked fine. I am guessing I have grabbed a dependency somewhere of too low a version, and this might also contribute to my [area based action link problem][1].

Technical symptoms are:

The line `@Styles.Render(&quot;~/Content/css&quot;)` renders as `&lt;link href=&quot;/Content/css?v=&quot; rel=&quot;stylesheet&quot;/&gt;`

  [1]: https://stackoverflow.com/questions/11531046/what-is-wrong-with-my-area-routing-in-my-bin-deployed-mvc4-app

Why is my CSS bundling not working with a bin deployed MVC4 app?

I created a new ASP.NET Web Forms Project through Visual Studio 2012.  Unfortunately, the default Site.Master file is very confusing.  (I am posting these questions together because they are very related and reference the same code quite a bit.)

First off, I *already understand* the **purpose** of bundling and minification, so no need to discuss that.  However I do *not* understand what is going with the way the scripts are being included in the default master page.

**Question 1:**  &lt;br /&gt;
Why is a bundle called &quot;~/bundles/WebFormsJs&quot; being created in the BundleConfig.cs file, and yet in the master page, each of these same individual .js files are being listed out one by one in the ScriptManager? &lt;br /&gt;

Inside BundleConfig.cs:

    bundles.Add(new ScriptBundle(&quot;~/bundles/WebFormsJs&quot;).Include(
                  &quot;~/Scripts/WebForms/WebForms.js&quot;,
                  &quot;~/Scripts/WebForms/WebUIValidation.js&quot;,
                  &quot;~/Scripts/WebForms/MenuStandards.js&quot;,
                  &quot;~/Scripts/WebForms/Focus.js&quot;,
                  &quot;~/Scripts/WebForms/GridView.js&quot;,
                  &quot;~/Scripts/WebForms/DetailsView.js&quot;,
                  &quot;~/Scripts/WebForms/TreeView.js&quot;,
                  &quot;~/Scripts/WebForms/WebParts.js&quot;));

Inside Site.Master:

    &lt;body&gt;
    &lt;form runat=&quot;server&quot;&gt;
    &lt;asp:ScriptManager runat=&quot;server&quot;&gt;
        &lt;Scripts&gt;
            &lt;%--Framework Scripts--%&gt;
            &lt;asp:ScriptReference Name=&quot;MsAjaxBundle&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;jquery&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;jquery.ui.combined&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;WebForms.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/WebForms.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;WebUIValidation.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/WebUIValidation.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;MenuStandards.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/MenuStandards.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;GridView.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/GridView.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;DetailsView.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/DetailsView.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;TreeView.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/TreeView.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;WebParts.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/WebParts.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;Focus.js&quot; Assembly=&quot;System.Web&quot; Path=&quot;~/Scripts/WebForms/Focus.js&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;WebFormsBundle&quot; /&gt;
            &lt;%--Site Scripts--%&gt;

        &lt;/Scripts&gt;
    &lt;/asp:ScriptManager&gt;

As you can see....  each of those same .js files are individually listed in the ScriptManager.  I don&#39;t even see a reference to the &quot;WebFormsJs&quot; bundle that was created anywhere outside of BundleConfig.cs.  Why was that bundle ever created if each of these javascript files were going to be referenced individually here in the ScriptManager?

**Question 2:**  &lt;br /&gt;
Why is a ScriptManager being used in this way at all?  I was under the impression ScriptManager was required for Microsoft&#39;s version of Ajax such as using UpdatePanels.  What is the purpose of using ScriptManager here... just to simply register javascript files?

**Question 3:** &lt;br /&gt;
What is the difference in registering javascript files through the ScriptManager versus up at the top of Site.Master where it uses the following approach instead?

    &lt;%: Scripts.Render(&quot;~/bundles/modernizr&quot;) %&gt;

**Question 4:** &lt;br /&gt;
Inside the ScriptManager I also noticed these:

            &lt;asp:ScriptReference Name=&quot;MsAjaxBundle&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;jquery&quot; /&gt;
            &lt;asp:ScriptReference Name=&quot;jquery.ui.combined&quot; /&gt;

... I can at least recognize &quot;MsAjaxBundle&quot; from BundleConfig.cs, but where are jquery and jquery.ui.combined defined?  I did a search and found a reference to them in packages.config.

    &lt;package id=&quot;jQuery&quot; version=&quot;1.7.1.1&quot; targetFramework=&quot;net45&quot; /&gt;
    &lt;package id=&quot;jQuery.UI.Combined&quot; version=&quot;1.8.20.1&quot; targetFramework=&quot;net45&quot; /&gt;

But I don&#39;t understand what is going on here either.  I thought packages.config was used for NuGet.  Plus... I don&#39;t even see a path listed here for the location of these jQuery .js files.  They are just listed here and strangely associated with a particular version of the .NET Framework (4.5 in my case).  Why a javascript resource would be associated with a version of the .NET Framework is beyond me.

Anyway, question 4 is this:  How is the resource &quot;jquery&quot; in the ScriptManager being added/used?  Why don&#39;t I see the jQuery .js files being bundled up together in BundleConfig.cs like all the other bundles??

**Question 5:**  &lt;br /&gt;
Can I remove the following script reference from Site.Master if I am not planning on using UpdatePanel and those sort of Microsoft Ajax controls?  I am a little confused as to why this is even included here by default.

    &lt;asp:ScriptReference Name=&quot;MsAjaxBundle&quot; /&gt;

VS2012 - Web Forms - Bundling Confusion

In order to improve performance of our web pages, we are recommended to use [CDN][1]s to serve `.js` files on our web pages. That makes sense.

Also, we are recommended to bundle our `.js` files in order to reduce the number of requests which are being made to server on load.

So, we need to sit down and make decision between if we use CDN or bundle `.js` files.

What are the pros and cons? Which ones make more sense?


  [1]: http://en.wikipedia.org/wiki/Content_delivery_network

Bundling .js files vs CDN

I&#39;m trying to use MVC4 bundling to group some of my less files, but it looks like the import path I&#39;m using is off.  My directory structure is:

    static/
        less/
            mixins.less
            admin/
                user.less

In user.less, I&#39;m attempting to import mixins.less using this:

    @import &quot;../mixins.less&quot;;

This used to work for me before when using chirpy with dotless, but now I noticed ELMAH was getting mad at me, saying this:

    System.IO.FileNotFoundException: 
        You are importing a file ending in .less that cannot be found.
    File name: &#39;../mixins.less&#39;

Am I supposed to use a different `@import` with MVC4?

## Some additional info

Here&#39;s the less class and global.asax.cs code I&#39;m using to attempt this:

`LessMinify.cs`

    ...
    public class LessMinify : CssMinify
    {
        public LessMinify() {}

        public override void Process(BundleContext context, BundleResponse response)
        {
            response.Content = Less.Parse(response.Content);
            base.Process(context, response);
        }
    }
    ...

`Global.asax.cs`

    ...
    DynamicFolderBundle lessFB = 
        new DynamicFolderBundle(&quot;less&quot;, new LessMinify(), &quot;*.less&quot;);
        
    BundleTable.Bundles.Add(lessFB);

    Bundle AdminLess = new Bundle(&quot;~/AdminLessBundle&quot;, new LessMinify());
    ...
    AdminLess.AddFile(&quot;~/static/less/admin/user.less&quot;);
    BundleTable.Bundles.Add(AdminLess);
    ...

MVC4 Less Bundle @import Directory

I&#39;m trying to use bundling to combine &amp; minify some CSS files. In my Global.aspx.cs `Application_Start` I have the following:

        var jsBundle = new Bundle(&quot;~/JSBundle&quot;, new JsMinify());
        jsBundle.AddDirectory(&quot;~/Scripts/&quot;, &quot;*.js&quot;, false);
        jsBundle.AddFile(&quot;~/Scripts/KendoUI/jquery.min.js&quot;);
        jsBundle.AddFile(&quot;~/Scripts/KendoUI/kendo.web.min.js&quot;);
        BundleTable.Bundles.Add(jsBundle);

        var cssBundle = new Bundle(&quot;~/CSSBundle&quot;, new CssMinify());
        cssBundle.AddDirectory(&quot;~/Content/&quot;, &quot;*.css&quot;, false);
        cssBundle.AddDirectory(&quot;~/Content/themes/base/&quot;, &quot;*.css&quot;, false);
        cssBundle.AddFile(&quot;~/Styles/KendoUI/kendo.common.min.css&quot;);
        cssBundle.AddFile(&quot;~/Styles/KendoUI/kendo.default.min.css&quot;);
        BundleTable.Bundles.Add(cssBundle);

And in my .cshtml file I have the following:

    &lt;link href=&quot;/CSSBundle&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;script src=&quot;/JSBundle&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

However, when I view the source of my bundles CSS file, it has the following:

    /* Minification failed. Returning unminified contents.
    (40,1): run-time error CSS1019: Unexpected token, found &#39;@import&#39;
    (40,9): run-time error CSS1019: Unexpected token, found &#39;&quot;jquery.ui.base.css&quot;&#39;

.... lots more

Any ideas on how to resolve this?

I did narrow it down to the following line:

    cssBundle.AddDirectory(&quot;~/Content/themes/base/&quot;, &quot;*.css&quot;, false);

If I only have that line of code I get the same errors.

All asp.net Optimization Solutions on Gang of Coders

Total of 14 asp.net Optimization Solutions