Rickard Nilsson

  • Blog
  • Archive
  • About
  • Contact

Welcome to rickardnilsson.net

Rickard Nilsson is a software architect, developer, craftsman, agile enthusiast, and father of three... More

Rickard blogs about crafting software using .NET tooling and solid, development practices.

Follow @rickardn

Top Posts

  • Applying stylesheets dynamically with jQuery
  • My customized Son of Obsidian Visual Studio color scheme for ReSharper
  • .NET Development with Visual Studio on MacBook Pro
  • Code Kata Cast
  • ReSharper User tip #2: Refactor rename namespace
  • Combining and minifying JavaScript and CSS files with Ajax Minifier
  • Dependency injection in ASP.NET MVC with Unity IoC Container
  • C# REPL and Interactive interpreter

Categories

  • .NET
  • Agile
  • ASP.NET 2.0
  • ASP.NET 3.5
  • ASP.NET 4
  • ASP.NET MVC
  • BlogEngine.NET
  • C# 2.0
  • C# 3.0
  • C# 4.0
  • Continuous Integration
  • CSS
  • Design by Contract
  • Design Patterns
  • iPhone
  • JavaScript
  • Kata
  • Moles
  • Open source
  • Personal
  • Review
  • Social media
  • Software development
  • TDD
  • Testing
  • Umbraco
  • Unit testing
  • Unity
  • User tip
  • Web development

Five most recent posts

  • How to unit test your database code when using ServiceStack OrmLite
  • Extract class - ReSharper Ninja tricks
  • ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minification
  • ReSharper Ninja tricks - Generate code from usage
  • Unit testing continuously

Tag cloud

  • agile
  • blogengine.net
  • c#
  • code kata
  • codegarden11
  • continuous integration
  • css
  • dependency injection
  • fakes
  • iso 8601
  • javascript
  • jquery
  • refactoring
  • resharper
  • resharper usertip
  • tdd
  • testing
  • umbraco
  • unit test
  • unit testing
  • visual studio

Recent comments

<< ReSharper Ninja tricks - Generate code from usage | Extract class - ReSharper Ninja tricks >>

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

Monday, 3 September 2012 07:28 by Rickard Nilsson

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 3 Template

Target: .NET 4.0

Tags:   optimization, javascript, css, front end, minification
Categories:   JavaScript | CSS | User tip | Web development
Actions:   | Ping backs (1)

Related posts

Combining and minifying JavaScript and CSS files with Ajax MinifierCombine and minify your JavaScript and CSS files for optimized performance on your page load time wi...Dependency injection in ASP.NET MVC with Unity IoC ContainerEnabling truly easy testability with ASP.NET MVC Controllers requires a Dependency Injection contain...ASP.NET MVC 2 Framework and Unity 2.0 Dependency Injection ContainerThis is an update to a previous post on MVC and Unity: Dependency injection in ASP.NET MVC with Unit...

Comments

September 3. 2012 13:20

trackback

Combining and minifying JavaScript and CSS files with Ajax Minifier

Combining and minifying JavaScript and CSS files with Ajax Minifier

Rickard Nilsson

 
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.
© 2008-2011 rickardnilsson.net
Creative Commons-licens