ASP.NET Bundles how to disable minification

Question

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))

Solution 1

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.

Solution 2

Conditional compilation directives are your friend:

#if DEBUG
            var jsBundle = new Bundle("~/Scripts/js");
#else
            var jsBundle = new ScriptBundle("~/Scripts/js");
#endif

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[guymid]

@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

[stooboo]

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' ;-)

[Adam Tuliper]

From this answer, I'm not sure how to turn off just minification and leave bundling in place - is this possible?

[Hao Kung]

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.

[Adam Tuliper]

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]

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)

[Hao Kung]

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.

[Shelakel]

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.

[Norman H]

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.

[Charles HETIER]

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.

[guymid]

@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

[mike james]

That is the key part - ensure you use: @Scripts.Render("~/Scripts/main")

[stooboo]

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' ;-)

[Jim Raden]

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

[OneHoopyFrood]

@stooboo This is what fixed it for me, but you don't need to delete anything. Just include the non-min file.

[OneHoopyFrood]

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.

[jeremysawesome]

@TCC: am I wrong in thinking that the vb.net syntax should have a capital False?

[TCC]

@jeremysawesome oh yeah I think that's correct, good point :-) I'm not a VB programmer very often so I didn't even notice ...

[UnionP]

First line should be "...even if debug=false" no?

[manuel]

vb.Net doesn't care about case, False=false, like .tostring() = .toString()

[manuel]

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)

[franzo]

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.Serve‌​r.MapPath(file.Inclu‌​dedVirtualPath)).Tic‌​ks);

[OldTrain]

debug= true and BundleTable.EnableOptimizations = false; is enough

[James Eby]

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>

[Sonic Soul]

just to be clear, you need to set debug="true" on <compilation> node which is under <system.web> node

[FrenkyB]

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.

[CodeHacker]

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.

[alex]

EnableOptimizations = false - where does this code belong?

[XDS]

-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]

-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.

[Esko]

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.

[user230910]

I've tested this, in Firefox at least, the mime type is correct - even with the Bundle only option

[John Pavek]

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

[Bodokh]

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