Using the Supplied AjaxMinTask.dll In Your Project

Part of the Microsoft Ajax Minifier install package is an MSBuild task that can imported and used in your Visual Studio projects to automatically minify your JS and CSS files. The files you need are installed into the <PROGRAMFILES>\MSBuild\Microsoft\MicrosoftAjax folder via the MSI installer. You can either work from scratch and edit your .csproj file to work with wildcard .JS and/or .CSS files as described below, or you can use an Ajax Minifier Manifest File and the associated Manifest Build Task. These instructions assume that the Microsoft Ajax Minifier has been installed via the MSI download from the CodePlex website.

To automatically minify your JS and CSS, right-click on your project in the Solution Explorer and select “Unload Project” from the context menu. Right-click on it again, and select the “Edit” option from the context menu; this will open your project file in an XML editor. Scroll down to the bottom of the file and add the following XML:

    <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

            JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"

            CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />

    </Target>

You can also check the AjaxMinTask.dll into your project and use the <UsingTask> element instead of the <Import> element. For example, if you create a “Build” folder under your project and check the AjaxMinTask.dll into that folder, you can add this element instead of the <Import> element above:

<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\Build\AjaxMinTask.dll" />

Many of the code settings that can be set using the CodeSettings object can also be set in your project file tasks. For example, to specify a set of known global identifiers (similar to the –global switch or the KnownGlobalNamesList property), use the JsKnownGlobalNames attribute on the <AjaxMin> element:

<AjaxMin JsKnownGlobalNames="jQuery,$" JsEvalTreatment="MakeImmediateSafe"

    JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"

    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />

Once you have imported the task, there are many ways to set up your build system to do what you want to do with your CSS and JS files. Alexander Turlov posted an interesting article on how he integrated Ajax Minifier to his project to copy the sources to an output folder and minify them in-place.

An even easier method of specifying AjaxMin switches in your build task is to use a command-line string in the Switches parameter. Not all command-line switches are supported in the build task, however. One notable example is the –xml switch. The following example would be the equivalent to the previous example:

<AjaxMin Switches="-global:jQuery,$ –evals:immediate"

    JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"

    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />

Another option for the task is to combine all the JS source files into a single minified file. Instead of specifying the JsSourceExtensionPattern/JsTargetExtension pair, specify the JsCombinedFileName attribute and all the source files will be concatenated together, minified, and written to the file named by the JsCombinedFileName attribute. Same goes for the CssSourceExtensionPatter/CssTargetExtension pair and the new CssCombinedFileName attribute:

  <AjaxMin Switches="-global:jQuery,$"
      JsSourceFiles="@(JS)"  JsCombinedFileName="Combined.min.js"
      CssSourceFiles="@(CSS)" CssCombinedFileName="Combined.min.css"  />