Compile TypeScript On Request with BundleTransformer

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

Bootstrap 3, LESS, Bundling, and ASP.NET MVC

Until Twitter Bootstrap v3, I would have recommend that you use dotLess to compile and bundle your LESS files. However, it is now a known issue that the current build of dotLess does not support Bootstrap 3, or more specifically that it does not support LESS 1.4; and worse yet, there is no fix in sight.

So, how can you use Bootstrap LESS with MVC?

I recommend using BundleTransformer. It is an amazingly feature rich set of extensions for System.Web.Optimization. The BundleTransformer.Less extension provides easy to use LESS transformations (already up to LESS 1.5) and bundling support that wires up straight into your pre-existing BundleCollection configuration. For more information about everything that BundleTransformer has to offer, check out this article.

Now here is how you setup Bootstrap 3 and BundleTransformer for ASP.NET:

Required NuGet Packages

1. Twitter.Bootstrap.Less
2. BundleTransformer.Less
3. BundleTransformer.MicrosoftAjax
4. JavaScriptEngineSwitcher.Msie