Minify JS and CSS in Visual Studio Build Events

It’s pretty widely accepted (and common sense) that if you’re putting a site out into the wild – such a simple task as minifying CSS and JavaScript files can save a bunch of load time, especially on mobile devices.

I’ve been playing about with this today and was quite happily using jsmin as described here until I noticed that in IE 7 and IE 8 the minified CSS didn’t work.

The problem seems to be when using a background style, it takes out the space between the image url close bracket and the next style.

background:url(image.png) no-repeat;
background:url(image.png)no-repeat;

Not a problem in IE 9 or chrome (haven’t tested others).

So I set about researching the problem and found nothing…struggled a bit getting the search term right and clearly never mastered it as I found zip.

Not to be put off, I was looking at the YUI compression tool from Yahoo, said to be better…but needs the java runtime and seems to complex to simply use, certainly for my simple taste!

Then I found a YUI .net implementation on codeplex.  Excellent, its was even in NuGet.

However…I wanted it as a build task to run in VS, I don’t really want to think about this stuff more than once.

So I wrote a little command line wrapper for it.  Excellent.  Even got ILMerge involved to merge the YUI dll’s into my exe.  I know there are ways to use Reflection to load dll’s as embedded resources…but I didn’t fancy doing that!

I did look at using CommandLine (also on codeplex) as I have done before, but ILMerge does not like that.  Don’t take my word for it, but it seems to be something to do with ILMerge is .net 2 and CommandLine uses some .net4 features.  It wasn’t happy…anyway, I just wrote a few lines of code to parse the command line args myself.

Perfect!!!

It’s not complex or very flexible, but is very suitable to my needs.

You can pass in an array of files to minify and a target path.  That’s it.  It’ll merge the files if you pass more than one…you have no choice!

> SCmin.exe –s C:\big.css C:\big1.css –t C:\small.css

// This will take big.css and big1.css and put it into small.css

Simples!

Download the exe or full source.

  

Print | posted on Saturday, December 3, 2011 3:52 AM

Feedback

No comments posted yet.

Your comment:





 
 

Copyright © Steve Clements

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski