Integrating a JS Build Process Into MSBuild in Visual Studio 2012 Express-Part1

Software Requirements

I wanted a non-trivial project to demonstrate this process, because I find the devil is in the details. I have often faithfully followed an overly-simple tutorial or introduction to an unfamiliar subject, then discovered that the tutorial did not prepare me for when you want to do something even slightly difficult. So, in this tutorial we'll be attempting to marry Knockout.js and jQuery UI. We will also be using a JSON file with a hierarchy of data to define a menu. We will use a Knockout.js template with a foreach binding which loops through the JSON data to emit a hierarchy of ul elements to act as the HTML markup for a menubar compatible with jQuery UI.

Sadly, the menubar is not yet available (versions 1.9 or 1.10) bundled with jQuery UI, so you need to download the menubar files from the Menubar branch of jQuery UI. You also need the YUI Compressor for minifying your JavaScript source files. For this tutorial, you will need Visual Studio 2012 Express for Web installed. You will also need to download:

• Knockout.js.
• jQuery.
• jQuery UI.
• The Menubar branch of the jQuery UI project.
• The YUI Compressor. I'm using version 2.4.7.

If you're not used to JSON, it's a good idea to visit the JSON website.

Why MSBuild and Not NAnt?

If you read my last tutorial Using Ant to Build a JavaScript Library, you might be wondering why this tutorial is not about NAnt. Well, with my shiny new installation of Visual Studio 2012 Express, I would like to try to bring my development under one roof. My absolute favorite IDE for C# Assembly development, for many years, wasSharpDevelop. They moved some years ago from NAnt to MSBuild for SharpDevelop version three. It's finally time for me to follow suit.

We are no longer using NAnt in our build process, we switched entirely to MSBuild / CruiseControl.NET. And we don't view the ability to depend on the dominant operating system as a step back: it helps reduce the number of moving parts, the different configurations, different user setups.


#D 3.0 - Dropping NAnt Support: Why?

Rationale: Why Integrate the JavaScript Build Into the .NET Build?

For years, for my .NET development, I've worked with three different IDEs simultaneously:

1. Sharp Develop for my C# assembly development, but I also shoe-horned the JavaScript and CSS concatenate and minify build process into that environment with a specially installed copy of NAnt.
2. Visual Studio (2005 etc) for the master pages, content pages.
3. An external editor like Aptana to handle JavaScript development.

Using three IDEs like this was exhausting (and surprisingly taxing for my CPU and RAM), so another new year's resolution is to bring everything together into Visual Studio. Hence the need to understand how to integrate my JavaScript build process into the overall project build.

One of the major draws of MSBuild for me (on Windows platforms) is that it comes as part of .NET itself. That means that any Windows machine that is up-to-date with Windows Update will have MSBuild available.


Comparison of NAnt and MSBuild on StackOverflow.

Setting Up Your Environment

Open a new project in Visual Studio 2012 Express. I've called it NetTutsMSBuildJsand I've created it inside my NetTuts folder here: C:\NetTuts\MSBuildJs.

As you can see in the screenshot, I have created a number of folders as follows:

Folder	Contents
css	Production release versions of jQuery UI CSS files. For this tutorial, we're using the smoothness theme.
debug	Various versions of the Default.aspx web form page for debugging purposes.
debug-js	Three folders: concat, min and src.
js	Production release versions of jQuery, jQuery UI and Knockout.
jsbuild	An XML build file with all the tasks needed for the JavaScript build and a copy of the YUI compressor.
json	The key JSON file menubar-data.json which has the data needed to build the menubar. Also the JSON files used to populate the page according to the user's menu choices.

Notice some of the folders are greyed out. This is because I've excluded them from the project. You can toggle this setting from the context menu:

It's easy to delete and create directories during the build process, but there's no way to include or exclude items programmatically from the project. The concat and min folders in debug-js are disposable, generated automatically by the build process from whatever you've created in the src folder, so it's appropriate to exclude them from the project. Note, you can't exclude the debug folder from the project because it contains .NET web form pages that have code-behind files. If you exclude the folder, the web form pages throw errors saying that the classes defined in the code-behind files can't be found.

You can toggle whether these excluded objects should be shown by going to the Show All Files icon at the top of the Solution Explorer and clicking. I always want to be able to see them.

There's one more key piece of configuration we need for this project. IIS and the built-in IIS Express don't include a JSON mime type by default, and we will be using JSON files extensively to deliver content, so we have to add that to the Web.config file. Within theconfiguration element add a system.webServer element like this:

1 2 3 4 5

<system.webServer>     <staticContent>         <mimeMap fileExtension=".json" mimeType="application/json" />     </staticContent> </system.webServer>

The JavaScript Project: Building a Menubar Using JSON, Knockout and jQuery UI

The focus of this tutorial is on how to build a JavaScript project within a .NET project, but we can't go any further until we have something to build, so now let me explain the slightly ambitious project I have in mind.

Here's a UML component diagram showing all the pieces that the project will need. Please note this is a comprehensive component diagram from a developer's point of view showing all sorts of disposable artifacts that are only important, for instance, for debugging. It's not a component diagram of only the key artifacts needed for the target system.

A component diagram defines the composition of components and artifacts in the system.
IBM: Component Diagrams