With the release of ASP.NET MVC 4 Beta, there was a cool feature added called bundling, which I wrote about.
CoffeeScript is a library that has received a lot attention from the community and having the ability to create custom bundlers in ASP.NET MVC 4, we can now create a very clean processor for the library.
After downloading ASP.NET MVC 4 and creating a new project, install the CoffeeSharp package from Nuget. This package is a CoffeeScript compiler for .NET and we are going to use it to process our CoffeeScript files.
To create a custom bundle processor, we need to create a new type that inherits from the IBundleTransform interface. The interface has a single method that we need to implement which is the Process method that passes a BundleContext as well as a BundleResponse. The response object will contain a collection of files.
Using CoffeeSharp a very simple implementation that will work is the following
public class CoffeeCompiler : IBundleTransform
{
public void Process(BundleContext context, BundleResponse response)
{
var coffeeScriptEngine = new CoffeeSharp.CoffeeScriptEngine();
string compiledCoffeeScript = String.Empty;
foreach (var file in response.Files)
{
using (var reader = new StreamReader(file.FullName))
{
compiledCoffeeScript += coffeeScriptEngine.Compile(reader.ReadToEnd());
reader.Close();
}
}
response.Content = compiledCoffeeScript;
response.ContentType = "text/javascript";
response.Cacheability = HttpCacheability.Public;
}
}
In our Global.asax.cs we can now register our newly created CoffeeScriptCompiler and tell it to process .coffee files.
var coffeeBundle = new DynamicFolderBundle("coffee", new CoffeeCompiler(), "*.coffee");
BundleTable.Bundles.Add(coffeeBundle);
The first parameter is the suffix, the second is the type that will be tasked with processing the bundle and lastly the search pattern.
Now we might have some coffee scripts that live in ~/CoffeeScripts. We can now use our newly created weapon and task it to perform it's magic.
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/CoffeeScripts/coffee")"></script>
After running the project the output should be similar to the following screenshot
Here is a sample project
Read More
