Click here to Skip to main content
11,637,662 members (68,723 online)
Click here to Skip to main content

Tagged as

Automatically compress embedded JavaScript resources with Microsoft Ajax Minifier

, 14 May 2010 CPOL 20.7K 8
Rate this:
Please Sign up or sign in to vote.
Recently Microsoft has announced yet another useful addition to an ASP.NET developer tool belt: Microsoft Ajax Minifier, a tool that enables you to reduce the size of a JavaScript file by removing unnecessary content from it. Clearly this is an extremely useful tool and the ASP.NET development commu
Recently Microsoft has announced yet another useful addition to an ASP.NET developer tool belt: Microsoft Ajax Minifier, a tool that enables you to reduce the size of a JavaScript file by removing unnecessary content from it. Clearly this is an extremely useful tool and the ASP.NET development community has gladly embraced it (just google it up to see a lot of positive responses). The tool indeed works very well and there have even been a number of articles comparing it to other well-known JavaScript compression tools that proved its quality. So there are no doubts whether to use the Minifier or not.

The question however is how to use it. Microsoft Ajax Minifier package does include a set of documentation that explains how to use the tool and even discusses a couple of usage scenarios. Unfortunately the way I wanted to use the Minifier is not covered in the documentation and for some reason I haven't found useful information on the Internet too so I've decided to do some research and share my findings with the community.

So how would I like to use the Minifier? Here are the requirements:
  1. I want to automatically compress embedded JavaScript resources in any project of my web application solution.
  2. I want the compressed JavaScripts have the original names so I don't have to change the references in HTML mark-up.
  3. I want the compression to be done only when I switch to the Release mode in Visual Studio. When I am in the Debug mode I want all the JavaScript files to be uncompressed for easier debugging.
  4. I want compressed JavaScript files never overrides the original JavaScript files and I don't want to keep the compressed JavaScripts so whenever I modify my JavaScript code the compressed resources are always up-to-date.

I believe that the requirements above describe one of the most common web application solution configuration so if there is a way to achieve them it would be very useful.


Can I achieve the requirements above with the Microsoft Ajax Minifier? The answer is yes. The solution is kind of obvious: since the Microsoft Ajax Minifier includes an MSBuild task I just need to modify a project file where I have embedded JavaScript resources that I need to be compressed to include the Microsoft Ajax Minifier build task. It does not sound complicated and below is the solution which is simple indeed. Just include the following XML in your project file right before the closing </Project> tag (in most cases):


<!-- Minify all JavaScript files that were embedded as resources -->
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<PropertyGroup>
<ResGenDependsOn>
MinifyJavaScript;
$(ResGenDependsOn)
</ResGenDependsOn>
</PropertyGroup>
<Target Name="MinifyJavaScript" Condition=" '$(ConfigurationName)'=='Release' ">
<Copy SourceFiles="@(EmbeddedResource)" DestinationFolder="$(IntermediateOutputPath)" Condition="'%(Extension)'=='.js'">
<Output TaskParameter="DestinationFiles" ItemName="EmbeddedJavaScriptResource" />
</Copy>
<AjaxMin SourceFiles="@(EmbeddedJavaScriptResource)" SourceExtensionPattern="\.js$" TargetExtension=".js" />
<ItemGroup>
<EmbeddedResource Remove="@(EmbeddedResource)" Condition="'%(Extension)'=='.js'" />
<EmbeddedResource Include="@(EmbeddedJavaScriptResource)" />
<FileWrites Include="@(EmbeddedJavaScriptResource)" />
</ItemGroup>
</Target>

What this script does is when the solution configuration is 'Release' it finds all the project embedded resource files with the extension '.js' and creates their compressed versions with the same names in the intermediate output folder where they are picked from later by the build process.


A few tips


As you may have noticed the Microsoft Ajax Minifier MSBuild task is referenced from the default folder where it was copied to by the installer. If you want to reference it from a different location, for example if you have a shared development environment and want to have similar setting for everyone, just copy two files ajaxmin.dll and ajaxmintask.dll to another location and include the <UsingTask> tag (below) instead of the <Import> tag in the script above:


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

The presented script performs so called 'Normal Crunching' (see the Ajax Minifier documentation) of the JavaScript code which already does a pretty good job that is good enough in most of the cases: compression rate is over 50%. If you would like to turn on the 'Hypercrunching' mode (see the Ajax Minifier documentation) you only need to modify one line of the script to include the 'LocalRenaming' option of the Ajax Minifier:


<AjaxMin SourceFiles="@(EmbeddedJavaScriptResource)" SourceExtensionPattern="\.js$" TargetExtension=".js" LocalRenaming="CrunchAll" />

And the last note is: don't use the default Hypercrunching mode or RemoveUnneededCode option with the ASP.NET AJAX Framework as it does not work properly with it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alexander Turlov
Architect
Canada Canada
Alexander Turlov has been working in IT industry since 1987. His programming experience includes such languages as FORTRAN, Pascal, and Basic, C, C++ and C#. He's been working for different industries like science, manufacturing, retail, utilities, finance, insurance, health care, education and so on. His area of interests is rich web applications development with .NET, C#, ASP.NET/MVC and JavaScript. He is working in software development doing architecture, design and development on .NET platform and using Microsoft Visual Studio, IIS and SQL Server as his primary tools, and a lot of other commercial and open source frameworks and tools. He holds a M.Sc. degree in physics and an MCSD.NET certification.

View my profile on LinkedIn

View my blog

You may also be interested in...

Comments and Discussions

 
QuestionSomething is going wrong when trying to do it with the new ajax minifier and visual studio 2010 Pin
ekelvin25-Sep-12 23:52
memberekelvin25-Sep-12 23:52 
AnswerRe: Something is going wrong when trying to do it with the new ajax minifier and visual studio 2010 Pin
Alexander Turlov4-Oct-12 5:17
memberAlexander Turlov4-Oct-12 5:17 
QuestionAutomatically compress embedded JavaScript resources with Microsoft Ajax Minifier Pin
Diana Margulis14-Mar-12 4:38
memberDiana Margulis14-Mar-12 4:38 
AnswerRe: Automatically compress embedded JavaScript resources with Microsoft Ajax Minifier Pin
Alexander Turlov4-Oct-12 5:07
memberAlexander Turlov4-Oct-12 5:07 
GeneralCan we do for Content instead of Embedded? Pin
atulsirpal10-May-11 3:14
memberatulsirpal10-May-11 3:14 
AnswerRe: Can we do for Content instead of Embedded? Pin
Alexander Turlov11-May-11 5:53
memberAlexander Turlov11-May-11 5:53 
GeneralMy vote of 4 Pin
Yves10-Mar-11 14:15
memberYves10-Mar-11 14:15 
GeneralGot errors Pin
Yves9-Mar-11 18:00
memberYves9-Mar-11 18:00 
AnswerRe: Got errors Pin
Alexander Turlov10-Mar-11 8:41
memberAlexander Turlov10-Mar-11 8:41 
GeneralRe: Got errors Pin
Yves10-Mar-11 14:13
memberYves10-Mar-11 14:13 
GeneralRe: Got errors Pin
Yves10-Mar-11 14:14
memberYves10-Mar-11 14:14 
AnswerRe: Got errors Pin
Alexander Turlov19-Mar-11 11:41
memberAlexander Turlov19-Mar-11 11:41 
GeneralNot sure were to apply Pin
Member 77393669-Mar-11 4:31
memberMember 77393669-Mar-11 4:31 
AnswerRe: Not sure were to apply Pin
Alexander Turlov10-Mar-11 8:36
memberAlexander Turlov10-Mar-11 8:36 
GeneralThank you! Pin
thomasorton28-Feb-11 5:17
memberthomasorton28-Feb-11 5:17 
GeneralThanks Pin
pentas coder7-Dec-10 4:50
memberpentas coder7-Dec-10 4:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150728.1 | Last Updated 14 May 2010
Article Copyright 2010 by Alexander Turlov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid