Tom DuPont .NET

I have talked before about BundleTransformer, and how you can use it to compile your LESS on a per request basis. Did you know that it supports TypeScript too?

BundleTransformer is an add on for Microsoft's System.Web.Optimization frame work bundling and minification of web resources. It allows you to convert your compiled languages on the server on request instead of need to create and maintain complied versions of resource files. Best of all BundleTransformer uses a JavaScript engine to compile LESS and TypeScript in with native compiler, ensuring that you will never lag behind the latest version.

Required NuGet Packages

The BundleTransfomer will bring in System.Web.Optimization, but then you need to specify a JavaScriptEngineSwitcher for the framework to run on, as well as a minifier to use on the final scripts when in release.

• BundleTransformer.TypeScript
• JavaScriptEngineSwitcher.Msie (or the Engine of your choice)
• BundleTransformer.MicrosoftAjax (or the minifier of your choice)

After including these packages you need only make three more updates...

I recently wrote a blog post about how to control minification per request. However, that strategy will not help you if the minification itself is causing a bug.

Fortunately Chrome has an absolutely amazing set of developer tools that can help you debug any script, even one that have been minified! Just follow these very simple steps:

1. Navigate to the page in Chrome.
2. Launch the developers tools (by pressing F12).
3. Open the JavaScript file in the Sources tab.
4. Activate the amazing "Pretty print" feature.
5. Debug those scripts!

Enjoy,
Tom

The Microsoft ASP.NET Web Optimization Framework is a great bundling and minification solution for your web applications. Simply grab the Microsoft.AspNet.Web.Optimization NuGet package, register your bundles, render them with a single line of code, and your environment will automatically resolve your dependencies based on whether or not the web server is running in debug mode.

But how can you debug minified styles and scripts in production?

Normally that is a difficult proposition, but here is a simple solution: JUST DON'T MINIFY THEM! With the little code snippets below you can add a simple query string parameter to disable minification for specific sessions or requests.

Adding this functionality to your website is extremely easy and requires no additional dependencies. Web Optimizations already has an internal AssetManager class that supports this functionality, we just need to access it via reflection.

Simply apply the following two steps and you will be ready to debug in production:

1. Create the HtmlHelperExtensions class with the code below.
2. Add a call to TrySetOptimizationEnabled inside of your ViewStart.

_ViewStart.cshtml

@using System.Web.Optimization

@{

 Layout = "~/Views/Shared/_Layout.cshtml";

 Html.TrySetOptimizationEnabled();

}

HtmlHelperExtensions.cs

public static class HtmlHelperExtensions

{

 public const string Key = "OptimizationEnabled";

 public static bool TrySetOptimizationEnabled(this HtmlHelper html)

 {

 var queryString = html.ViewContext.HttpContext.Request.QueryString;

 var session = html.ViewContext.HttpContext.Session;

 // Check the query string first, then the session.

 return TryQueryString(queryString, session) || TrySession(session);

 }

 private static bool TryQueryString(

 NameValueCollection queryString, 

 HttpSessionStateBase session)

 {

 // Does the query string contain the key?

 if (queryString.AllKeys.Contains(

 Key, 

 StringComparer.InvariantCultureIgnoreCase))

 {

 // Is the value a boolean?

 bool boolValue;

 var stringValue = queryString[Key];

 if (bool.TryParse(stringValue, out boolValue))

 {

 // Set the OptimizationEnabled flag

 // and then store that value in session.

 SetOptimizationEnabled(boolValue);

 session[Key] = boolValue;

 return true;

 }

 }

 return false;

 }

 private static bool TrySession(HttpSessionStateBase session)

 {

 if (session != null)

 {

 var value = session[Key] as bool?;

 if (value.HasValue)

 {

 // Use the session value to set the OptimizationEnabled flag.

 SetOptimizationEnabled(value.Value);

 return true;

 }

 }

 return false;

 }

 private static void SetOptimizationEnabled(bool value)

 {

 // Use reflection to set the internal AssetManager.OptimizationEnabled

 // flag for this request specific.

 var instance = ManagerProperty.GetValue(null, null);

 OptimizationEnabledProperty.SetValue(instance, value);

 }

 private static readonly PropertyInfo ManagerProperty = typeof(Scripts)

 .GetProperty("Manager", BindingFlags.Static | BindingFlags.NonPublic);

 private static readonly PropertyInfo OptimizationEnabledProperty = Assembly

 .GetAssembly(typeof(Scripts))

 .GetType("System.Web.Optimization.AssetManager")

 .GetProperty(

 "OptimizationEnabled",

 BindingFlags.Instance | BindingFlags.NonPublic);

}

Enjoy,
Tom