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.targets" />
    <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"  />  

Last edited Sep 23, 2013 at 8:51 PM by ronlo, version 14

Comments

fd97207 Jul 12 at 5:11 AM 
also i found adding following to the .csproj is useful to ensure you nuke out old js files before you start building your project:
<PropertyGroup>
<PreBuildEvent>del ..\*.js</PreBuildEvent>
</PropertyGroup>

fd97207 Jul 12 at 4:49 AM 
there seems to be a bug in the code snippet. i had to change
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.targets" />
to
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.tasks" />

also if you just want to concatenate files but not minify them use:
Switches="-global:jQuery,$ -pretty"

myounes Sep 29, 2013 at 1:03 PM 
Hi,

I just upgraded from v4.0 to v5.1, and I was frustrated to find out that DestinationFiles property is no longer available!! As in my project I only minify the files on publishing a release and I'd like to keep file names as is without updating existing project files.

In case someone faces the same issue, add the following to your project:



<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\..\AjaxMinifier\AjaxMinTask.dll" />
<!-- This target will run after the files are copied to PackageTmp folder -->
<Target Name="minify_JS_CSS" AfterTargets="CopyAllFilesToSingleFolderForPackage" Condition=" '$(ConfigurationName)'=='Release' ">
<ItemGroup>
<JS Include="$(_PackageTempDir)\**\*.js" />
<CSS Include="$(_PackageTempDir)\**\*.css" />
</ItemGroup>
<AjaxMin JsKnownGlobalNames="jQuery,$" JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js"
CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".css" />
</Target>

Thanks.

sinsedrix Apr 23, 2013 at 10:25 AM 
Hello, is there a way to specify a target folder, attributes of kinf JsTargetPath, JsTargetFolder, CssTargetPath, CssTargetFolder ?

ronlo Jun 23, 2012 at 1:56 AM 
@Whatty - Yes, debugging minified code is a sure-fire way to drive oneself insane. What I would do first is see if there are any errors when minifying your file. Run the command-line tool on your source files and see if there are any errors thrown. If there are, fix those first to make sure your code is valid. If it still doesn't work, feel free to contact me with more specifics. I'd be more than happy to help you figure out why minified and source files might behave differently.

Whatty May 24, 2012 at 10:34 PM 
If we use AjaxMin and end up with minified javascript files that our site won't work with what is the best way to determine exactly what needs to be changed (either the code itself) or the switches to end up with working JS

We are using an external library and have a lot of javascript that drives our product and once minified it is very difficult to determine exactly what is causing the problem.

tigerlily Jan 25, 2012 at 10:11 PM 
To: @HealthSpan
I got the same error you did, but the fix is simple :
"ajaxmin.tasks" should be "AjaxMin.tasks" (as created by the AjaxMin.msi installer)

Looks like the the build tasks declarations are case sensitive.

To @ronio: could you please update the snippet ? Thank you/

Healthspan Jan 16, 2012 at 12:47 PM 
using the <UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\Build\AjaxMinTask.dll" /> method I'm experiencing an an issue that has broken our build. We now get the following errors:

The "AjaxMin" task has been declared or used incorrectly, or failed during construction.

The "AjaxMin" task could not be instantiated from "[path]\build\AjaxMinTask.dll".
System.IO.FileNotFoundException: Could not load file or assembly 'AjaxMin,...

The file does exist AND actually works intermittently. If it's relavent if I try to delete the file AjaxMinTask.dll manually it says: "The action can't be completed because the file is opne in another program"

Any suggestions please?

mvonlintel Dec 16, 2011 at 5:11 PM 
For the parameters, check out the source code http://ajaxmin.codeplex.com/SourceControl/changeset/view/83916#1733206. As far as I can tell, most of the command line options are available.

tommck Aug 19, 2011 at 1:40 PM 
I second that question. What are the parameters we can use here?

a4bike Jul 20, 2011 at 5:22 PM 
Hello, first I wanted to thank you guys for doing such a great job on this.
I have a question: What are all the parameters that I can use for the AjaxMin task ? Can we use something equivalent to the command-line parameters ?
Thanks