ARTICLE

Chirpy - VS Add In For Handling CSS, JS, DotLess and T4 Files

Posted by Amit Patel Articles | Visual Studio .NET October 07, 2012
Chirpy mashes, minifies (Google Closure Tools, YUI Compressor for .Net, Ajax Minifier, or Uglify.js) and validates your JavaScript (JsHint), stylesheet (CSSLint), and dotless files
Reader Level:

Introduction


We generally write a Httphandler to remove white space from a CSS and JS file or we use minifies versions of CSS and JS files. Like in jQuery they give us a min version of a JS file. 


Now we don't need to write any external utility to remove white space because now we have Chirpy, which is a Visual Studio Add-in for handling CSS, JS, DotLess and T4 files. 


Now let me try to explain how to use this add in. 


Step 1


First go to http://nuget.org/packages/ChirpyVSI or http://chirpy.codeplex.com/ and download and install it.

 

Step 2


See in the following image, there is much white space:
 

image1.png

 

Now we will try to remove it using Chirpy.


Step 3
:

Add a new config file inside the content folder. The file name would be 
Bundle.chirp.config and the content will be:
 

image2.png

 

<?xmlversion="1.0"encoding="utf-8" ?>

<rootxmlns="urn:ChirpyConfig"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="urn:ChirpyConfig http://www.weirdlover.com/chirpy/chirp.xsd">

  <FileGroupName="Site.css">

    <FilePath="Site.less" />

  </FileGroup>

</root>

 

When you create the bundle file and filegroup and file path all are correct and then it will automatically generate it. It will look like:
 

image3.png

 

Now you can see as in the following image that all white space has been removed from the CSS:
 

image4.png


Note: You can use the same bundle file for JS also.
 

Happy Coding.

COMMENT USING
Employers - Post Free Jobs