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:
-
Right click on
whichever css file you want to minify. Here I clicked on site.css. You will get
option of "Web Essentials"
- Click on that
menu and you will get a submenu with some option
- 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:
-
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"
-
Click on that
menu and you will get a submenu with some options
- 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 :)
