Bundletable.Enableoptimizations True Breaks Jquery-Ui All.CSS

MVC bundling with jquery not working in debug more

If you are protecting parts of your site, then you'll need to exclude the path to the bundle from being protected.

Here is a solution to this problem from another question: https://stackoverflow.com/a/6304624/84395

JS bundles do not render without EnableOptimization set to true

If my understanding is correct, you should define your bundles using the "non-min" JavaScript files. When you enable optimizations it will swap the non-min files for the min files for you:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        ScriptBundle scriptBundle = new ScriptBundle("~/js");
        string[] scriptArray =
        {
            "~/content/plugins/jquery/jquery-1.8.2.js",
            "~/content/plugins/jquery/jquery-ui-1.9.0.js",
            "~/content/plugins/jquery/jquery.validate.js",
            "~/content/plugins/jquery/jquery.validate.unobtrusive.js",
            "~/content/plugins/bootstrap/js/bootstrap.js",
        };
        scriptBundle.Include(scriptArray);
        scriptBundle.IncludeDirectory("~/content/js", "*.js");
        bundles.Add(scriptBundle);
    }
}

Optimizations are set to false when debugging, but are true by default in release mode.

Bundled scripts not rendering properly

I was following a tutorial for using bower and bundling here, as well as the tutorial from microsoft, here. What wasn't explained in either tutorial was that the class has to be called in the Application_Start in the Global.asax.cs file with the following:

BundleConfig.RegisterBundles(BundleTable.Bundles);

Also I had misspelled modernizr in my configuration as mondernizr.

ASP.NET MVC Bundle not rendering script files on staging server. It works on development server

Based on your comments, we need to go over how the Bundling mechanism works in MVC.

Edit: Based on the comment below by VSDev, you need to ensure WebGrease is installed into your project. NuGet would be the easiest was to install this package.

When you set a bundle configuration (Example not from above to illustrate)

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js"));

You then, in your views, call something like @Scripts.Render("~/bundles/mainJs"). When your web.config is set into a debug compilation OR you explicitly turn off bundling using the following line in your BundleConfig.cs file

BundleTable.EnableOptimizations = false;

Then, in your view, you will see the following rendered out

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

These are the individual items that made up our bundle, uncompressed and listed individually. The reason these list out individually in debug mode is so that you can debug your scripts and see them as you wrote them (actual variable names, etc).

Now, when we are not in a debug compilation and have not turned off the EnableOptimizations feature, MVC will combine those files in our bundles, compress (minify) them and output only a single script tag.

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

Notice that the source is the same as the name of the bundle from the bundle configurations. Also, the number after the ?v= will change anytime you change a file in that bundle. This is to help prevent caching of old js and css files by the client browsers.

Your scripts are still there and being outputted, but they are being compressed and combined into a single file called /bundles/mainJs. This feature is present to

A) compress the files and reduce information being transmitted and,

B) reduce the number of calls to a website to retrieve the necessary content to render the page.

Nothing is missing, it sounds like everything is working as intended. In a production site, the minification makes these files almost impossible to read, thus why the minification does not take affect while debugging.

As to why the jQuery UI is still being a single JS file, ensure someone didn't hard code that into your layout view. As for the JS errors, it could be errors that are present on your development box or perhaps something did not compress correctly (however, in all of my MVC development, I have not seen a JS error because of bad minification).

Local and deployed Web App seem to use different CSSs

Are you building debug locally, and release when you publish? If so, it might be because of different bundling behaviour for the different targets. See: Bundling not working in MVC5 when I turn on release mode

bundling breaks some styling

Seems the custom-overwrites.css was corrupt in some way..
So created a new custom.css file and imported that into material-kit.css
And now it works.

MVC4 - Bundling does not work when optimizations are set to true

I imagine the problem is you putting the bundle at a virtual URL that actually exists, but is a directory.

MVC is making a virtual file from your bundle and serving it up from the path you specify as the bundle path.

The correct solution for that problem is to use a bundle path that does not directly map to an existing directory, and instead uses a virtual file name (that also does not map to a real file name) inside that directory.

Example:

If your site has a folder named /content/css, make your css bundle as follows:

In BundleConfig.cs:

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

And on the page:

@Styles.Render("~/content/css/AllMyCss.css")

Note that this assumes you do NOT have a file named AllMyCss.css in your css folder.

---

Related Topics