Hot File

How to Minify js and CSS file using Visual Studio 2012

View: 1742    Dowload: 0   Comment: 0   Post by: naruto  
Author: none   Category: Development Tools   Fields: Other

9 point/4 review File has been tested

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.

Introduction

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

How to Minify js and CSS file using Visual Studio 2012

How to Minify js and CSS file using Visual Studio 2012 Posted on 13-05-2014  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. 2.25/10 1742

Comment:

To comment you must be logged in members.

Files with category

  • Changes in Programmer Tools' Infrastructure

    View: 2941    Download: 0   Comment: 0   Author: none  

    Changes in Programmer Tools' Infrastructure

    Category: Development Tools
    Fields: Other

    0.75/6 review
    The article describes some observations concerning changes in the infrastructure of tools used by programmers in everyday work. First of all, these changes are related to the release of Visual Studio 2010.

  • An Overview of the NuGet Ecosystem

    View: 3336    Download: 0   Comment: 0   Author: none  

    An Overview of the NuGet Ecosystem

    Category: Development Tools
    Fields: none

    0.64285714285714/7 review
    NuGet is a free, open source package management system for .NET and consists out of a few client tools (NuGet Command Line and NuGet Visual Studio Extension) and the official NuGet Gallery hosted at http://www.nuget.org/. Combined, these tools and...

  • Folder Listener: A Tool to Watch File System Activity in any Folder

    View: 3085    Download: 5   Comment: 0   Author: none  

    Folder Listener: A Tool to Watch File System Activity in any Folder

    Category: Development Tools
    Fields: none

    1.5/3 review
    Most of the time when you are doing some development or testing, you might need to know what changes are made in a particular folder. This requirement frequently arises when you are testing /developing software that copies /delete files in the...

  • Generating synchronous method stubs from asynchronous method pairs

    View: 2733    Download: 0   Comment: 0   Author: none  

    Generating synchronous method stubs from asynchronous method pairs

    Category: Development Tools
    Fields: Other

    0/4 review
    During the development of a GSM Modem API, I found I was repeating a lot of code for encapsulating the synchronous versions of asynchronous method templates. The common pattern for such code implements asynchronous methods with the same name as the...

  • How to Minify js and CSS file using Visual Studio 2012

    View: 1742    Download: 0   Comment: 0   Author: none  

    How to Minify js and CSS file using Visual Studio 2012

    Category: Development Tools
    Fields: Other

    1.125/4 review
    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...

  • A New Approach to Designing Web Applications

    View: 3692    Download: 0   Comment: 0   Author: none  

    A New Approach to Designing Web Applications

    Category: Development Tools
    Fields: Other

    0/8 review
    With all the hay being made about UML modeling, you'd think that was the only way to design an application. I've got news for you. It's the wrong approach. Now, before you flame me for my heresy, read the rest of this paragraph. Much like the 60%...

  • How to install SNMP extension agent DLL

    View: 2093    Download: 0   Comment: 0   Author: none  

    How to install SNMP extension agent DLL

    Category: Development Tools
    Fields: none

    0/20 review
    This tutorial is the second part of my previous article "How to develop a SNMP extension agent DLL". Here I shall explain how to install the developed SNMP extension agent DLL in Windows 2000. This agent DLL is from the previous part of this...

  • The Web Developer Checklist : A One-Stop-Shop for Improving the Web

    View: 2574    Download: 0   Comment: 0   Author: none  

    The Web Developer Checklist : A One-Stop-Shop for Improving the Web

    Category: Development Tools
    Fields: Education - Schools

    0/1 review
    I’ve been searching for some time for a single resource that I could go to check a variety of best-practices and methods of improving the performance of my sites and applications and I can now mark that off of my list.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd