10 minute guide to get Visual Studio to combine and minify your javascripts on build

I thought this was going to be a tough nut to crack, but it turned out to be pretty straight forward.

Install JsMin

JsMin is a pretty slick tool. I like it because it is stand alone and small enough to have in your Solutions “tool” folder. So the first step is just to head over, download it and put it somewhere in your solution.

Add post-build event

Right click on your project, select options and go to the tab Build event. You will find a small (too small if you ask me!) textarea; Post-build event command line. You will want to write something like this:

type “$(ProjectDir)\Scripts\Pitfall\*.js” | “$(ProjectDir)..\tools\jsmin” > “$(ProjectDir)\Scripts\pitfall.min.js”

let’s go through the different things that happens in that oh so slick one-liner:

  • type “$(ProjectDir)\Scripts\Pitfall\*.js”: type is a command that displays content in files. In this case, since I have wildcard .js it will give me the content of all the files I have there
  • “$(ProjectDir)..\tools\jsmin” > “$(ProjectDir)\Scripts\pitfall.min.js”: this first finds the directory in which I have places JsMin. Since I used the pipe command (“|”) it will take that as first input. Lastly it outputs the minified file to pitfall.min.js

Given that you don’t have a more complex scenario with dependencies that you don’t want to add into the minified file this is pretty much it. I said it was going to be a ten minute guide. Looking back, it feels more like a 2 minute guid. Good luck :)

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>