Microsoft Ajax Minifier

Using the Microsoft Ajax Minifier from the Command Line

After you install the Microsoft Ajax Minifier, you can use the tool from the command line. Open the Microsoft Ajax Minifier Command Prompt from the Microsoft Ajax Minifier program group. Next, enter the name of an input file and the name of an output file like this:

ajaxmin test.js -o test.min.js

The Microsoft Ajax Minifier will report how much it was able to minify the file (for example, 43%).

You also can use the Microsoft Ajax Minifier to minify Cascading Style Sheet files. You use the same syntax:

ajaxmin test.css -o test.min.css

Using the Microsoft Ajax Minifier as a Build Task

You can integrate the Microsoft Ajax Minifier into your Visual Studio Build process. Every time you perform a build in a Visual Studio ASP.NET project, you can minify all of your JavaScript and Cascading Style Sheet files automatically.

You can use the Ajax Minifier with both ASP.NET Web Forms and ASP.NET MVC Web Application Projects (WAPs). However, you cannot use the minifier with ASP.NET Web Forms Websites.

Follow these steps:

1. Within Visual Studio, select the menu option Tools, Options, Projects and Solutions. Check the checkbox labeled Always show solution



2. Within Visual Studio, right-click your project in the Solution Explorer window and select the menu option Unload Project



3. Select the menu option Edit project name

4. Add the following code immediately above the closing <project> tag:

1. <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />  
2. <Target Name="AfterBuild">  
3. <ItemGroup>  
4.   <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />  
5. </ItemGroup>  
6. <ItemGroup>  
7.   <CSS Include="**\*.css" Exclude="**\*.min.css" />  
8. </ItemGroup>  
9. <AjaxMin   
10.     JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"  
11.     CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />  
12. </Target>  

This code imports a custom MSBuild task named ajaxmin. The ajaxmin task is used to minify all of the JavaScript and CSS files contained in the project automatically. All JavaScript files are renamed with the extension .min.js and all CSS files are renamed with the extension .min.css.

5. Right-click your project in the Solution Explorer window and select the menu option Reload Project

After you complete these steps, all of the CSS and JavaScript files in your project will be minified whenever you do a build automatically. The minified files will not appear in the Solution Explorer window. To see the minified files, you must select the menu option Project, Show All Files.

Using the Microsoft Ajax Minifier with Source Control

The Microsoft Ajax Minifier generates the minified JavaScript and CSS files as the output of the build process. For this reason, we recommend that you handle the minified files in exactly the same way as you would handle the assemblies generated by the build process. In particular, we recommend that you do not include the minified files in your Visual Studio project and that you do not check the minified files into source control.

If you include the minified files in your project, and you use source control, then you will encounter problems. When files are checked out of source control, they are checked out with their read-only attributes set. If you attempt to do a build, the Microsoft Ajax Minifier will generate an error when it attempts to write to a read-only file.

Running Microsoft Ajax Minifier Tool from Visual Studio

Microsoft Ajax Minifier is a command line tool. Rather than opening the command prompt every time and then invoking the commands manually, wouldn't it be nice if you integrated it with Visual Studio IDE itself? Luckily you can do so with simple steps.
Open Visual Studio and select "External Tools" from its Tools menu.

Figure 4: Visual Studio: External Tools
This will open a dialog as shown below:

Figure 5: Visual Studio External Tools Dialog Box
Specify the tool title as "Microsoft Ajax Minifier." Set Command to point to ajaxmin.exe. Add arguments as shown below:

$(ItemFileName)$(ItemExt)  -out $(ItemFileName).min$(ItemExt) -clobber

The $(ItemFileName) represents the file name of the currently opened file in the Visual Studio IDE. The $(ItemExt) represents its extension. You can also pick these arguments from the arguments menu. Set initial directory to $(ItemDir) i.e. the same folder as the opened file. Finally. check the "Use Output Window" checkbox so that output messages will be displayed there and click on the OK button. The Microsoft Ajax Minifier tool will now be displayed on the Tools menu.

Figure 6: The Microsoft Ajax Minifier Tool
Open any JavaScript file and run the tool on it. A sample message emitted by the tool as seen in the Output Windows is shown below:

(Full Size Image)
Figure 7: Microsoft Ajax Minifier Tool Output Window
In order to see the minified file you will need to refresh the website in the Solution Explorer