Minify js and css files in Visual Studio 2012

Finally we got an integrated tool in VS2012 that does the jobin Solution Explorer:
Web Essentials
You can enable this tool using the Extensions And Updates from the TOOLS menu.

  1. First, right-click on the css file and from the Web Essentials context menu choose to Minify CSS Files. This will ensure that with every build it will generate the accompanying .min.css file too.
  2. Make sure you have the Web.Release.config beside your web.config
  3. In your .aspx or .master file put an if statement to figure out if this is running on your debug mode or release mode:
.
 <% if (HttpContext.Current.IsDebuggingEnabled) { %>
    <link href="/css/MyFile.css" rel="stylesheet" type="text/css"></link>
  <%} else {%>
    <link href="/css/MyFile.min.css" rel="stylesheet" type="text/css"></link>
  <%} %>
.

Author: Pouya Panahy

Microsoft certified DevOps engineer with passion in analysing, designing and implementing solutions for Azure Cloud with hands-on experience in security and quality assurence.

Leave a Reply