ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minification

asp-net-mvc-3In 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>

The after build target executes the AjaxMin executable:

<Project ToolsVersion="4.0" xmlns="">
    <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'" />

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.

  <output path="Scripts/Mvc3Application.min.js">
    <input path="Scripts/myplugin.js"/>
    <input path="Scripts/viewModel.js"/>
    <input path="Scripts/foobar.js"/>

Download ASP.NET MVC Template (3,5MB)

Target: .NET 4.0

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.