Minify CSS and JS file using Visual Studio 2012

Before going on our main topic we have to discuss about one of the Dot Net feature i.e. Microsoft’s Web Optimization Framework. So, what is Web Optimization Framework and how to use this framework in Asp.net web form application? Microsoft’s (ASP.NET) Web Optimization Framework introduces a way to bundle and optimize CSS and JavaScript files.

If anyone wants to install Microsoft ASP.NET Web Optimization Framework, run the following command in the Package Manager Console of Visual Studio 2012.

		PM> Install-Package Microsoft.AspNet.Web.Optimization

There are two pillars of this framework bundling and minification. 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 .

How we can create minified version of our js and css file. If can be done using Visual Studio 2012’s Web Essential extension tool then why to use third party tool. Yes, there is no need of 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.

So, now you will see all step by step processes to minify JS and CSS file using Visual Studio 2012

Minification of js file and css file:

Suppose this is your Solution Explorer

1. Right click any js file (or css file) which you want to minify. Here I clicked on multiply.js. You will get option of "Web Essentials"

2. Click on that menu (Web Essentials) and you will get a submenu with some options

3. Now click on "Minify JavaScript file(s)" ( if you have css file then click on "Minify CSS file(s)")

Web essential tool will generate minify js file with name of multiply.min.js and one more extra map file named as multiply.min.js.map which keep track of the differences between your source and minified version like variable name etc. This minify version of file will automatically update whenever anyone updates its original file.

Conclusion :

I hope that this article would have helped you in understanding to Minify CSS and JS file using Visual Studio 2012. Your feedback and constructive contributions are always welcome.