In a previous post I described the importance of optimizing your web site resources and how you can do it using the open source tool Ajax Minifier. I’ve received a few questions about how to automate this process and now I want to share a ASP.NET MVC 3 template with the combining and minification built in as a post compile step.
Since my last post Ajax Minifier is now available as a NuGet package and is easily installed in your solution either via NuGet Package Manager or using the NuGet Package Manager Console command:
PM> Install-Package AjaxMin
However, to get the AjaxMin.exe you’ll have to download it manually from Codeplex. My MVC 3 template is build on a simple Internet Application MVC 3 template with Razor and HTML5 semantic markup. My additions to automate resource optimizations consists of the following:
After the web project is built a custom target is called:
<Import Project="$(MSBuildProjectDirectory)\AfterBuild.tasks" />
<Target Name="AfterBuild">
<CallTarget Targets="Minify">CallTarget>
Target>
The after build target executes the AjaxMin executable:
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<BuildLibPath>$(MSBuildProjectDirectory)\..\packagesBuildLibPath>
<Ajaxmin>$(BuildLibPath)\AjaxMin.4.62.4618.15628\bin\Ajaxmin.exeAjaxmin>
PropertyGroup>
<Target Name="Minify">
<Exec Command='"$(Ajaxmin)" -js -xml minify.js.xml -clobber' Condition="'$(Configuration)' == 'Release'" />
<Exec Command='"$(Ajaxmin) -css -xml minify.css.xml -clobber' Condition="'$(Configuration)' == 'Release'" />
Target>
Project>
The xml files minify.js.xml and minify.css.xml are used to define which resources should be merged together, minified and where to output the result.
<root>
<output path="Scripts/Mvc3Application.min.js">
<input path="Scripts/myplugin.js"/>
<input path="Scripts/viewModel.js"/>
<input path="Scripts/foobar.js"/>
output>
root>
Download ASP.NET MVC Template (3,5MB)
Target: .NET 4.0