Click here to Skip to main content
Click here to Skip to main content

Tagged as

How to Minify js and CSS file using Visual Studio 2012

, 25 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
I came up with this article where I can describe how we can create minified version of our js and css file.

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 Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhishek Kumar Goswami
Software Developer
India India
I like to code and I really enjoy to share my knowledge with all, Its my passion.
 
http://allaboutdotnet.com/

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 25 Mar 2014
Article Copyright 2014 by Abhishek Kumar Goswami
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid