Minify your Javascript during the TFS Build process!

Minification is an important step in deploying out web content. It makes it so your JavaScript files are reduced in file size resulting in a faster page load speed. For example, JQuery 1.11 is 247KB, but minified it is only 97KB. Sure, on most broadband connections that is nothing. But remember, not everyone has broadband, or what if they are on a mobile device.

There are many addons or programs to minify your JavaScript files. But the one I am going to use is Google’s Closure Compiler. Which you can download the application from here. They have a web based page to do it as well, but the idea is we are going to be calling this during the TFS Build process. You will also need to install the Java Runtime Environment 7.

Another good option if you want to do it prior to check-in is by using Web Essentials 2013. That also has the advantage of that you can combine multiple JavaScript files further reducing load time.

The Closure Compiler has two modes, simple and advanced. For my tutorial I am only working with simple because there are some caveats you have to be careful of with advanced that you can find here.

Example

Let’s work with an example of what this will do. Say you take the sample Google code:

function unusedFunction(note) {
  alert(note['text']);
}

function displayNoteTitle(note) {
  alert(note['title']);
}
var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

After Minification with Simple Optimizations:

function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);

After Minification with Advanced Optimizations:

var a={};a.title="Flowers";alert(a.title);

Down to business

Okay now that you got to see the sample results, let’s get down and dirty with it.

• Install Java Runtime Environment 7 on your computer and the TFS Build server.
• Add Compiler.jar to your solution and source. Or alternatively put it on a shared path that your development team and build server can access.
• In notepad, open up the project file (vbproj or csproj). I like Notepad++, but use your favorite editor.
• In the second line where it starts , you need to add a DefaultTarget. I use AfterBuild but there are various ones you can use. Just like:

<Project ToolsVersion="4.0" DefaultTargets="Build;AfterCompile;AfterBuild" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

• A few lines down your PropertyGroup will start. Just before the ending PropertyGroup add a property called JavaPath like:

<JavaPath />

This step really is optional, but I’m not a fan of hard coding paths in the project file so I pass this in during the TFS build process. Either way works.

• Go to the end of the file. You now need to add your target (change paths as necessary).

<Target Name="AfterBuild" Condition="$(IsTFSBuild)=='True'">
  <Exec Command="&quot;$(JavaPath)java&quot; -jar jscompiler.jar --js jsMyFile.js --js_output_file $(TargetDir)MyFile.min.js" />
</Target>

Now, you will notice I add a condition that requires it to be a TFSBuild. This is a simple parameter I pass in during the build. This is optional, however it is nice to only have the minification occur during the build. Also notice how I do the quotes around the JavaPath.

• Save the project file. Now open up your Build Definition in Visual Studio.
• Go to the Process section on the left, then open “3. Advanced”.

• There is a line called MSBuild Arguments. Enter the following (change paths as necessary): /p:IsTFSBuild=”True” /p:JavaPath=”C:Program Files (x86)Javajre7bin"

• Save.
• Run a build.

At this point a build will kick off and in the output folder you will now have a minified version of your JavaScript. You can force it to try and do this during build at a development workstation by disable the IsTFSBuild condition on the AfterBuild target in your project file, but I find this to be easier. I also version rename the file on output. Soon I will be putting a guide on how to version stamp DLL or other files during the TFS Build process using an always incrementing version number, but for today I left that out.