Bundling and Minification with ASP.NET 4.5

One of my tasks recently was to implement bundling and minification on a ASP.NET 4.5 web application. So naturally, I started to read many articles and tutorials on how to implement it until I understood the technology and got confident on implementing it. The implementation was quite simple really and I was very happy with the progress…until I reached a brick wall.

For some reason there was absolutely no mention on how to reference bundles created in the markup of a web form AND still be able to debug by disabling the bundling and minification. Most, if not all, articles and tutorials were talking about ASP.NET MVC implementations as opposed to web forms. When I was able to get the bundling and minification to work, I kept losing the ability to debug my bundled JavaScript files (in Visual Studio) when I set “debug=’true'” in my web config file.

So for anyone who is in the same boat, I feel your pain and here is what I went through:

I added the following markup for a script bundle called ‘~/scripts1’:

<script src=”~/scripts1″></script>

That didn’t make bundling and minification work. So I tried:

<script src=”scripts1″></script>

It worked this time, but setting “debug=’true'” would still bundle and minify my JavaScript files. So I tried the following:

<script src=”<% Scripts.Render(“~/scripts1″); %>”></script>

That gave me the same result as the previous one. So after hours of researching and playing with code, I wrote the following line right in the markup without any <script> tags:

<%: Scripts.Render(“~/scripts1”) %>

It worked! I got my bundling and minification to work only when “debug=’false'”.

I hope this helps some poor soul out there. If you need more information on bundling and minification with ASP.NET 4.5, read this article.

Leave a Reply

Your email address will not be published. Required fields are marked *