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))
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
williamsandonz
  • 15,864
  • 23
  • 100
  • 186
  • 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 – guymid Feb 11 '14 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' ;-) – stooboo Aug 09 '14 at 22:21

14 Answers14

171

Conditional compilation directives are your friend:

#if DEBUG
            var jsBundle = new Bundle("~/Scripts/js");
#else
            var jsBundle = new ScriptBundle("~/Scripts/js");
#endif
Martin Devillers
  • 17,293
  • 5
  • 46
  • 88
  • 16
    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? – Adam Tuliper Sep 12 '12 at 05:17
  • 1
    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. – Norman H Jan 09 '13 at 19:47
  • 1
    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. – Charles HETIER Dec 04 '13 at 09:09
  • 6
    @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 – guymid Feb 11 '14 at 12:44
  • -1 this "solution" is a stop-gap at best. In reality, even though it works it leads to very unmaintanable code. But that's not the worst thing about it. Using "Bundle" leads to assets getting handed over by the server with mime-type set to "text/html" instead of "text/javascript". If you apply this approach for bundling css files you are playing with fire when in debug mode. Don't. Just don't. See my answer for a more healthy approach which does work in production builds. – XDS Sep 14 '17 at 15:27
  • 2
    I've tested this, in Firefox at least, the mime type is correct - even with the Bundle only option – user230910 Apr 10 '18 at 03:49
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.

Kit Law
  • 13
  • 1
  • 2
Hao Kung
  • 28,040
  • 6
  • 84
  • 93
  • 15
    From this answer, I'm not sure how to turn off _just_ minification and leave bundling in place - is this possible? – Adam Tuliper Sep 12 '12 at 03:44
  • 34
    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. – Hao Kung Sep 12 '12 at 04:40
  • So then the answer below from Martin actually does apply here it seems? I understand debug vs release and EnableOptimizations but his solution does directly apply to this specific scenario to turn it off conditionally. (thanks btw) – Adam Tuliper Sep 12 '12 at 05:17
  • Yes, basically you turn off ALL optimizations using the EnableOptimizations flag, that means it will not bundle and it will not run transforms. If you want bundling but no transforms, you need to leave the flag on, and setup your bundles to have no transforms. So Martin's example would be more clear if the flag was called #if MINIFY as opposed to #DEBUG. – Hao Kung Sep 12 '12 at 17:44
  • That's correct. Alternatively you can find and remove the JsMinify Transform from the created script bundle. I had to do the same because most of the scripts I require are already in an obfuscated form. – Shelakel Nov 23 '12 at 08:04
  • That is the key part - ensure you use: @Scripts.Render("~/Scripts/main") – mike james Mar 18 '14 at 14:20
  • 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' ;-) – stooboo Aug 09 '14 at 22:17
  • 1
    @stooboo This is what fixed it for me, but you don't need to delete anything. Just include the non-min file. – OneHoopyFrood Nov 06 '14 at 16:40
  • `debug= true` and `BundleTable.EnableOptimizations = false;` is enough – OldTrain Jul 01 '15 at 12:07
  • just to be clear, you need to set debug="true" on node which is under node – Sonic Soul May 13 '16 at 18:16
  • Thanks... yes I was adding the bundles with BundleTable.Bundles.ResolveBundleUrl() because I wanted to have the hash for the bundle... but you are right... it then bundles and minifies regardless of the debug setting. – CodeHacker Mar 14 '17 at 12:14
  • 2
    `EnableOptimizations = false` - where does this code belong? – alex Jun 23 '17 at 13:46
  • EnableOptimizations is a method of the BundleTable (System.Web.Optimization.BundleTable) so: ***BundleTable.EnableOptimizations = false*** This should be clearly stated in the answer but it is not. – Esko Dec 05 '17 at 10:08
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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
manuel
  • 1,840
  • 1
  • 16
  • 16
  • 2
    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. – OneHoopyFrood Nov 06 '14 at 16:45
  • 2
    @TCC: am I wrong in thinking that the vb.net syntax should have a capital `False`? – jeremysawesome Mar 19 '15 at 21:13
  • @jeremysawesome oh yeah I think that's correct, good point :-) I'm not a VB programmer very often so I didn't even notice ... – TCC Mar 20 '15 at 15:50
  • 1
    First line should be "...even if debug=false" no? – UnionP Apr 07 '15 at 21:50
  • 2
    vb.Net doesn't care about case, False=false, like .tostring() = .toString() – manuel Apr 13 '15 at 11:53
  • If debug=false then minification is disabled if debug=true minification is enabled, if debug=true (minification is enabled) and you put line System.Web.Optimization.BundleTable.EnableOptimizations = false (this line overrides minification even if it is enabled from web.config) – manuel Apr 13 '15 at 12:06
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.

muglio
  • 2,048
  • 17
  • 18
  • 1
    -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. – XDS Sep 14 '17 at 15:30
  • Or do `new Bundle(` instead of `new ScriptBundle(` – mBardos Sep 07 '22 at 10:59
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.

Nick
  • 640
  • 6
  • 5
27

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
Jeff Tian
  • 5,210
  • 3
  • 51
  • 71
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).

Agat
  • 4,577
  • 2
  • 34
  • 62
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()));
     ...
}
Vince Horst
  • 4,134
  • 1
  • 20
  • 33
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;
}
Vignesh Subramanian
  • 7,161
  • 14
  • 87
  • 150
marvelTracker
  • 4,691
  • 3
  • 37
  • 49
  • 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. – FrenkyB Jun 24 '16 at 11:32
7

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); //0 vital
                 Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //0
        }
        //0 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
        }
        //0 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.

XDS
  • 3,786
  • 2
  • 36
  • 56
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

BJ Patel
  • 6,148
  • 11
  • 47
  • 81
  • 2
    This does disable minification, but it also disables bundling entirely, which I think should at least be noted. – John Pavek Jun 01 '18 at 13:16
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.

James Eby
  • 1,784
  • 20
  • 25
  • 1
    Works well. If you want the urls to change when files are updated you can change `CssTemplate` to something like `""` 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);` – franzo May 30 '15 at 03:26
  • 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: – James Eby Sep 21 '15 at 21:01
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>
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • 1
    The filename does NOT change on every compile. It's based on the file contents, so it changes whenever the file changes. – Jim Raden Sep 18 '14 at 09:31
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)

O'Mutt
  • 1,557
  • 1
  • 13
  • 27