Reader Level:
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
  • 0
  • 0
  • 4375

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

Trending up