202

I have debug="true" in both my web.config(s), and I just don't want my bundles minified, but nothing I do seems to disable it. I've tried enableoptimisations=false, here is my code:

//Javascript
bundles.Add(new ScriptBundle("~/bundles/MainJS")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*")
            .Include("~/Scripts/regular/lib/mvc/jquery.validate*")
            .Include("~/Scripts/regular/lib/bootstrap.js")
            .IncludeDirectory("~/Scripts/regular/modules", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/pages", "*.js", true)
            .IncludeDirectory("~/Scripts/regular/misc", "*.js", true));

//CSS
bundles.Add(new StyleBundle("~/bundles/MainCSS")
            .Include("~/Content/css/regular/lib/bootstrap.css*")
            .IncludeDirectory("~/Content/css/regular/modules", "*.css", true)
            .IncludeDirectory("~/Content/css/regular/pages", "*.css", true))
2
  • 2
    @RickAnd-MSFT The request is how to enable bundling while having minification disabled. Using web.config debug = true/false or EnableOptimizations only switches both on or both off. Martin Devillers' answer allows bundling to be enabled while minification is disabled Commented Feb 11, 2014 at 13:02
  • 2
    also for me .... for file 'x.js' in the bundle ensure that there is NOT a 'x.min.js' file in the folder otherwise although you've removed the minification transformation .. bundling will serve out the 'pre' minified file e.g. if you have 'angular.js' then DELETE 'angular.min.js' ;-) Commented Aug 9, 2014 at 22:21

14 Answers 14

171

Conditional compilation directives are your friend:

#if DEBUG
            var jsBundle = new Bundle("~/Scripts/js");
#else
            var jsBundle = new ScriptBundle("~/Scripts/js");
#endif
Sign up to request clarification or add additional context in comments.

6 Comments

Actually I think he has it nailed - in order to just turn off minification, use a Bundle as per Hao, otherwise use ScriptBundle which bundles and minifies, no?
This is a great solution when you want to reference the bundle by its bundle reference URI for things like loading via RequireJS without using RequireJS's own bundling / minification system.
I see things like Adam, I understand the ScriptBundle as an enhanced Bundle, so since you want to add a basic reference (no specific post-operations), Bundle seems to me a good way to disable minification on a particular bundle.
@RickAnd-MSFT I think you are misunderstanding the purpose of this code which allows bundling + no minification in debug mode and bundling + minification in release mode. Using web.config debug = true/false or EnableOptimizations only switches both on or both off. I read your comment and dismissed this Martin's solution, only to find out that it is actually a very good way of having bundling without minification
I've tested this, in Firefox at least, the mime type is correct - even with the Bundle only option
|
148

If you have debug="true" in web.config and are using Scripts/Styles.Render to reference the bundles in your pages, that should turn off both bundling and minification. BundleTable.EnableOptimizations = false will always turn off both bundling and minification as well (irrespective of the debug true/false flag).

Are you perhaps not using the Scripts/Styles.Render helpers? If you are directly rendering references to the bundle via BundleTable.Bundles.ResolveBundleUrl() you will always get the minified/bundled content.

13 Comments

From this answer, I'm not sure how to turn off just minification and leave bundling in place - is this possible?
To do this, the easiest would be to change the Script/StyleBundles out for plain Bundles which have no Transform set by default, this would turn off minification but still bundle. Note you would still have to have EnableOptimizations set to true for bundling to happen.
also for me .... for file 'x.js' in the bundle ensure that there is NOT a 'x.min.js' file in the folder otherwise although you've removed the minification transformation .. bundling will serve out the 'pre' minified file e.g. if you have 'angular.js' then DELETE 'angular.min.js' ;-)
@stooboo This is what fixed it for me, but you don't need to delete anything. Just include the non-min file.
EnableOptimizations = false - where does this code belong?
|
92

To disable bundling and minification just put this your .aspx file (this will disable optimization even if debug=true in web.config)

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c#.net

System.Web.Optimization.BundleTable.EnableOptimizations = false;

If you put EnableOptimizations = true this will bundle and minify even if debug=true in web.config

6 Comments

This is the only thing that fixed the issue for me. I had debug="true" and the right Script.Render but it still wasn't working. Also note that this will not server any .min.js files, so be sure to include unminified copies of dependency code.
@TCC: am I wrong in thinking that the vb.net syntax should have a capital False?
@jeremysawesome oh yeah I think that's correct, good point :-) I'm not a VB programmer very often so I didn't even notice ...
First line should be "...even if debug=false" no?
vb.Net doesn't care about case, False=false, like .tostring() = .toString()
|
76

You can turn off minification in your bundles simply by Clearing your transforms.

var scriptBundle = new ScriptBundle("~/bundles/scriptBundle");
...
scriptBundle.Transforms.Clear();

I personally found this useful when wanting to bundle all my scripts in a single file but needed readability during debugging phases.

2 Comments

-1 Here be dragons: Ripping off the JsMinifier/CssMinifier also rips off the internal mechanism which sets the mime-type to "text/css" or "text/javascript". This doesn't cause problems in debug/release mode but it wreaks havoc in css-bundles in the context of published builds (aka live deployments): Chrome and firefox refuse to load said css-bundles stating that their mime-types are set to "text/html" instead of "text/css". With js-bundles things workout somehow but its fishy at best to have a js-bundle handed over as "text/html" (<- seriously?). See my answer for the correct approach.
Or do new Bundle( instead of new ScriptBundle(
29

I tried a lot of these suggestions but noting seemed to work. I've wasted quite a few hours only to found out that this was my mistake:

@Scripts.Render("/bundles/foundation")

It always have me minified and bundled javascript, no matter what I tried. Instead, I should have used this:

@Scripts.Render("~/bundles/foundation")

The extra '~' did it. I've even removed it again in only one instance to see if that was really it. It was... hopefully I can save at least one person the hours I wasted on this.

1 Comment

Wow I've been going crazy for the past 3 hours over this...
28

Combine several answers, this works for me in ASP.NET MVC 4.

        bundles.Add(new ScriptBundle("~/Scripts/Common/js")
            .Include("~/Scripts/jquery-1.8.3.js")
            .Include("~/Scripts/zizhujy.com.js")
            .Include("~/Scripts/Globalize.js")
            .Include("~/Scripts/common.js")
            .Include("~/Scripts/requireLite/requireLite.js"));

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

        bundles.Add(new StyleBundle("~/Content/css/App/FunGrapherStyles")
            .Include("~/Content/css/Apps/FunGrapher.css")
            .Include("~/Content/css/tables.css"));

#if DEBUG
        foreach (var bundle in BundleTable.Bundles)
        {
            bundle.Transforms.Clear();
        }
#endif

Comments

22

There is also some simple way to control minification (and other features) manually. It's new CssMinify() transformer using, like this:

// this is in case when BundleTable.EnableOptimizations = false;
var myBundle = new StyleBundle("~/Content/themes/base/css")
    .Include("~/Content/themes/base/jquery.ui.core.css" /* , ... and so on */);
myBundle.Transforms.Add(new CssMinify());
bundles.Add(myBundle);

// or you can remove that transformer in opposite situation
myBundle.Transforms.Clear();

That's convenient when you want to have some bundles special part only to be minified. Let's say, you are using some standard (jQuery) styles, which are getting under your feet (taking lots of excessive browser requests to them), but you want to keep unminified your own stylesheet. (The same - with javascript).

Comments

14

I combined a few answers given by others in this question to come up with another alternative solution.

Goal: To always bundle the files, to disable the JS and CSS minification in the event that <compilation debug="true" ... /> and to always apply a custom transformation to the CSS bundle.

My solution:

1) In web.config: <compilation debug="true" ... />

2) In the Global.asax Application_Start() method:

 protected void Application_Start() {
     ...
     BundleTable.EnableOptimizations = true; // Force bundling to occur

     // If the compilation node in web.config indicates debugging mode is enabled
     // then clear all transforms. I.e. disable Js and CSS minification.
     if (HttpContext.Current.IsDebuggingEnabled) {
         BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
     }

      // Add a custom CSS bundle transformer. In my case the transformer replaces a
      // token in the CSS file with an AppConfig value representing the website URL
      // in the current environment. E.g. www.mydevwebsite in Dev and
      // www.myprodwebsite.com in Production.
      BundleTable.Bundles.ToList()
          .FindAll(x => x.GetType() == typeof(StyleBundle))
          .ForEach(b => b.Transforms.Add(new MyStyleBundleTransformer()));
     ...
}

Comments

10

If you set the following property to false then it will disable both bundling and minification.

In Global.asax.cs file, add the line as mentioned below

protected void Application_Start()
{
    System.Web.Optimization.BundleTable.EnableOptimizations = false;
}

1 Comment

I just don't understand why my less files are transformed into css when I have this feature turned off? When I enable optimization, bundling less files doesn't work anymore.
10

Here's how to disable minification on a per-bundle basis:

bundles.Add(new StyleBundleRaw("~/Content/foobarcss").Include("/some/path/foobar.css"));
bundles.Add(new ScriptBundleRaw("~/Bundles/foobarjs").Include("/some/path/foobar.js"));

Sidenote: The paths used for your bundles must not coincide with any actual path in your published builds otherwise nothing will work. Also make sure to avoid using .js, .css and/or '.' and '_' anywhere in the name of the bundle. Keep the name as simple and as straightforward as possible, like in the example above.

The helper classes are shown below. Notice that in order to make these classes future-proof we surgically remove the js/css minifying instances instead of using .clear() and we also insert a mime-type-setter transformation without which production builds are bound to run into trouble especially when it comes to properly handing over css-bundles (firefox and chrome reject css bundles with mime-type set to "text/html" which is the default):

    internal sealed class StyleBundleRaw : StyleBundle
    {
            private static readonly BundleMimeType CssContentMimeType = new BundleMimeType("text/css");
    
            public StyleBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
            {
            }
    
            public StyleBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
            {
                     Transforms.Add(CssContentMimeType); //00 vital
                     Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //00

                     //00 the guys at redmond in their infinite wisdom plugged the mimetype "text/css" right into cssminify    upon unwiring the minifier we
                     //   need to somehow reenable the cssbundle to specify its mimetype otherwise it will advertise itself as html and wont load
            }
    }
    
    internal sealed class ScriptBundleRaw : ScriptBundle
    {
            private static readonly BundleMimeType JsContentMimeType = new BundleMimeType("text/javascript");
    
            public ScriptBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
            {
            }
    
            public ScriptBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
            {
                     Transforms.Add(JsContentMimeType); //0 vital
                     Transforms.Remove(Transforms.FirstOrDefault(x => x is JsMinify)); //0

                     //00  the guys at redmond in their infinite wisdom plugged the mimetype "text/javascript" right into jsminify   upon unwiring the minifier we need
                     //    to somehow reenable the jsbundle to specify its mimetype otherwise it will advertise itself as html causing it to be become unloadable by the browsers in published production builds
            }
    }
    
    internal sealed class BundleMimeType : IBundleTransform
    {
            private readonly string _mimeType;
    
            public BundleMimeType(string mimeType) { _mimeType = mimeType; }
    
            public void Process(BundleContext context, BundleResponse response)
            {
                if (context == null)
                   throw new ArgumentNullException(nameof(context));
                if (response == null)
                   throw new ArgumentNullException(nameof(response));
    
                response.ContentType = _mimeType;
            }
    }

To make this whole thing work you need to install (via nuget):

WebGrease 1.6.0+ Microsoft.AspNet.Web.Optimization 1.1.3+

And your web.config should be enriched like so:

    <runtime>
           [...]
           <dependentAssembly>
            <assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
            <bindingRedirect oldVersion="1.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
           </dependentAssembly>
           <dependentAssembly>
                  <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
           </dependentAssembly>
            [...]
    </runtime>
    
    <!-- setting mimetypes like we do right below is absolutely vital for published builds because for some reason the -->
    <!-- iis servers in production environments somehow dont know how to handle otf eot and other font related files   -->
    <system.webServer>
            [...]
            <staticContent>
          <!-- in case iis already has these mime types -->
          <remove fileExtension=".otf" />
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".woff" />
          <remove fileExtension=".woff2" />
    
          <mimeMap fileExtension=".otf" mimeType="font/otf" />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
          </staticContent>
    
          <!-- also vital otherwise published builds wont work  https://stackoverflow.com/a/13597128/863651  -->
          <modules runAllManagedModulesForAllRequests="true">
             <remove name="BundleModule" />
             <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
          </modules>
          [...]
    </system.webServer>

Note that you might have to take extra steps to make your css-bundles work in terms of fonts etc. But that's a different story.

Comments

6

Search for EnableOptimizations keyword in your project

So if you find

BundleTable.EnableOptimizations = true;

turn it false.

This does disable minification, And it also disables bundling entirely

1 Comment

This does disable minification, but it also disables bundling entirely, which I think should at least be noted.
4

Just to supplement the answers already given, if you also want to NOT minify/obfuscate/concatenate SOME files while still allowing full bundling and minification for other files the best option is to go with a custom renderer which will read the contents of a particular bundle(s) and render the files in the page rather than render the bundle's virtual path. I personally required this because IE 9 was $*%@ing the bed when my CSS files were being bundled even with minification turned off.

Thanks very much to this article, which gave me the starting point for the code which I used to create a CSS Renderer which would render the files for the CSS but still allow the system to render my javascript files bundled/minified/obfuscated.

Created the static helper class:

using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;

namespace Helpers
{
  public static class OptionalCssBundler
  {
    const string CssTemplate = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";

    public static MvcHtmlString ResolveBundleUrl(string bundleUrl, bool bundle)
    {
      return bundle ? BundledFiles(BundleTable.Bundles.ResolveBundleUrl(bundleUrl)) : UnbundledFiles(bundleUrl);
    }

    private static MvcHtmlString BundledFiles(string bundleVirtualPath)
    {
      return new MvcHtmlString(string.Format(CssTemplate, bundleVirtualPath));
    }

    private static MvcHtmlString UnbundledFiles(string bundleUrl)
    {
      var bundle = BundleTable.Bundles.GetBundleFor(bundleUrl);

      StringBuilder sb = new StringBuilder();
      var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext);

      foreach (BundleFile file in bundle.EnumerateFiles(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, bundleUrl)))
      {
        sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath));
      }

      return new MvcHtmlString(sb.ToString());
    }

    public static MvcHtmlString Render(string bundleUrl, bool bundle)
    {
      return ResolveBundleUrl(bundleUrl, bundle);
    }
  }

}

Then in the razor layout file:

@OptionalCssBundler.Render("~/Content/css", false)

instead of the standard:

@Styles.Render("~/Content/css")

I am sure creating an optional renderer for javascript files would need little to update to this helper as well.

2 Comments

Works well. If you want the urls to change when files are updated you can change CssTemplate to something like "<link href=\"{0}?f={1}\" rel=\"stylesheet\" type=\"text/css\" />" and change the sb.AppendFormat line to something like sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath), System.IO.File.GetLastWriteTimeUtc(HttpContext.Current.Server.MapPath(file.IncludedVirtualPath)).Ticks);
True, we did something a lot like that at work. We had a public static string called JSVersion that we put into the Global.asax class which pulled the maj/min/build/rev of the executing assembly. We then referenced it like this: <script type="text/javascript" src="Scripts/jsfile_name.js<%=Global.JSVersion%>"></script>
1

If you're using LESS/SASS CSS transformation there's an option useNativeMinification which can be set to false to disable minification (in web.config). For my purposes I just change it here when I need to, but you could use web.config transformations to always enable it on release build or perhaps find a way modify it in code.

<less useNativeMinification="false" ieCompat="true" strictMath="false"
      strictUnits="false" dumpLineNumbers="None">

Tip: The whole point of this is to view your CSS, which you can do in the browser inspect tools or by just opening the file. When bundling is enabled that filename changes on every compile so I put the following at the top of my page so I can view my compiled CSS eaily in a new browser window every time it changes.

@if (Debugger.IsAttached) 
{
    <a href="@Styles.Url(ViewBag.CSS)" target="css">View CSS</a>
}

this will be a dynamic URL something like https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1


Update: I created a web.config transformation to set it to true for me during deployment / release build

  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <less xdt:Transform="Replace" useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
      <jsEngine name="MsieJsEngine" />
    </less>
  </bundleTransformer>

1 Comment

The filename does NOT change on every compile. It's based on the file contents, so it changes whenever the file changes.
1

This may become useful to someone in the future as the new framework, when setup through VS, gets a default web.config, web.Debug.config and web.Release.config. In the web.release.config you will find this line:

<compilation xdt:Transform="RemoveAttributes(debug)" />

this was seeming to override any inline changes I made. I commented this line out and we were gravy (in terms of seeing non-minified code in a "release" build)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.