How to Minify js and css Files Using Visual Studio 2012

In my previous article I explaiined what Microsoft's Web Optimization Framework is and how to use this framework in ASP.NET web form applications. There are two pillars of this framework, bundling and minification. So this framework automatically handles the minification of files and the loading of minified files or normal files depending on the configuration. But if you are not using this framework in your application then obviously you need to minify js and CSS files. So by keeping this thing in mind I came up with this article where I can describe how to create a minified version of our js and CSS files. There are many tools present in the market for doing this but for the sake of simplicity I will use Visual Studio 2012's Web Essential extension tool here. It is very user-friendly and we do not want to use any third-party tool.

If you want to learn about the Microsoft Web optimization framework you can check my previous articles:

1. Web Optimization Framework
2. How to use Web Optimization Framework in ASP.NET Web form Application

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 and css files and what will be the outcome after minification by this tool.

So before I proceed further my Solution Explorer looks like the 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 an option for “Web Essentials”
2. Click on that menu and you will get a submenu with some options
3. Now click on the “Minify CSS file(s)” option

The Web Essentials tool will generate a minified CSS file with the 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 the option “Web Essentials”
2. Click on that menu and you will get a submenu with some options
3. Now click on “Minify JavaScript File(s)”

The Web Essentials tool will generate a minify js file with the name jquery-1.7.1.min.js and one more extra map file named jquery-1.7.1.min.js.map that tracks the differences between your source and minified version like variable name and so on.



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

Thanks for reading.