How to Minify js and CSS file using Visual Studio 2012

In my previous article I have talked about what is Microsoft’s Web Optimization Framework and how to use this framework in Asp.net web form application. There are two pillars of this framework bundling and minification. So this framework automatically handles the minification of files and loading of minified file or normal file according to configuration. But if you are not using this framework in your application then obviously you need to minify js and css file .So by keeping this thing in mind I came up with this article where I can describe how we can create minified version of our js and css file. There are lots of tools present in market for doing this task but for the sake of simplicity I am going to use here Visual Studio 2012’s Web Essential extension tool. It is very user-friendly and we do not want to use any third party tool.

In order to use this tool you need to download this tool from here. You will get WebEssentials2012.vsix file, Install it. It will automatically integrate with your visual studio 2012.

Now here I will explain one by one how to minify js, css file and what will be outcome after minification by this tool.

So before I proceed further my solution explorer look like following so later on you can observe which extra files will be added by this tool.

Minification of css file:

1. Right click on whichever css file you want to minify. Here I clicked on site.css. You will get option of "Web Essentials"
2. Click on that menu and you will get a submenu with some option
3. Now click on "Minify css file" option

Web essential tool will generate minify css file with name of site.min.css.

Minification of js file:

1. Right click on whichever js file you want to minify. Here I clicked on jquery-1.7.1.js. You will get option of "Web Essentials"
2. Click on that menu and you will get a submenu with some options
3. Now click on "Minify JavaScript File(s)"

Web essential tool will generate minify js file with name of jquery-1.7.1.min.js and one more extra map file named as jquery-1.7.1.min.js.map which keep track of the differences between your source and minified version like variable name etc.

One more interesting thing about this tool is, it automatically update minify version of the file whenever anyone updates original file.

Thanks for reading :)