Sign In | Join

Home / AJAX

Page History: Microsoft Ajax Minifier Quick Start

Compare Page Revisions



« Older Revision - Back to Page History - Newer Revision »


Page Revision: 2009/12/16 00:51


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

Image

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

Image

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

Image

3. Select the menu option Edit project name

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

  <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
  <Target Name="AfterBuild">
    <ItemGroup>
      <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
    </ItemGroup>
    <ItemGroup>
      <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" CollapseToLiteral="true" />
    <AjaxMin SourceFiles="@(CSS)" SourceExtensionPattern="\.css$" TargetExtension=".min.css" />
  </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.