Hopefully, you’re a fan of hyperbole.

If you’re new to Chirpy, or if you need a refresher, or if you’re interested in learning about the new Chirpy functionality, this post is for you. I’m lifting my glass. I hope that you’re lifting yours, too.

Let’s start with the simplest part: download Chirpy at codeplex. Start fiddling around. If something doesn’t work complain about it. If something does work, tweet or blog about how awesome your life has become. Finally, if you’re feeling really frisky, download Chirpy’s source code and add something. I don’t care what it is. Just add something. Surprise me. I’ll probably love you forever. Or, I’ll throw something at you.

Speaking of contributors. I’d like to tip my hat to the main Chirpy contributors: Please send them money and flowers: Wayne Brantley, Francis Noel (aka ploufs), and Andy Edinborough. I owe them all a huge thank you. And many beers. And hugs.

This page contains everything (new and old) that you’d ever need to know about Chirpy. For all intents and purposes, you can navigate to the section that interests you most, follow the quasi-steps, and be on your merry way. Or, if you’re a sucker for pain, you can sludge through the entire document. Whatever makes you happiest. In sum, with Chirpy, you can:

• …minify javascript files
• …translate DotLess files into css files
• …minify css files
• …mash content files together
• …validate javascript and DotLess files
• …autorun T4 templates (incl. T4MVC)

Benefit 1: Minify the Crap Out of Your Javascript Files

Step 1: Install Chirpy. The latest version of Chirpy can be downloaded at Codeplex.

Step 2: Add a javascript file to your project. Name the file “woo.yui.js”. Adding the “.yui.js” suffix to our filename is Chirpy’s cue to look after the file. Right away, you’ll notice that Chirpy has adorned our new javascript file with a “codebehind” file:

Step 3: Type some javascript in the woo.yui.js file. Save your changes, and check out the codebehind file. Chirpy has created a minified version of your file (using YUI Compressor). Here’s my unminified file:

And here’s the codebehind file, which Chirpy generated for me:

Step 4: Use a different compressor. If you don’t like the YUI Compressor, that’s okay. Chirpy can also minify your file using Google Closure Tools. Currently, Chirpy will handle five different javascript extensions:

• file.yui.js – uses YUI Compressor to minify your file
• file.whitespace.js – uses Google Closure Tools to remove all of the extra spaces from your file
• file.simple.js – uses Google Closure Tools to minify your javascript file (with simple optimizations)
• file.gct.js – uses Google Closure Tools to minify your javascript file (with advanced optimizations)
• file.chirp.js – Chirpy picks the best minifier for the job, and minifies your javascript file accordingly

So, let’s go ahead and change woo.yui.js to woo.whitespace.js. Here’s the new codebehind file:

Step 5: Still not happy? Change the extension names. If you don’t like the extensions that Chirpy uses to manhandle files, click Tools >> Options >> Chirpy. Here, you can change the file extensions to whatever suits your fancy. For demoing purposes, I’ll change “.whitespace.js” to “.w.js”:

Now, when I change my “woo.whitespace.js” file to “woo.w.js”, Chirpy still performs its magic:

Benefit 2: Translate DotLess Files.

Step 1: Install Chirpy. The latest version of Chirpy can be downloaded at Codeplex.

Step 2: Add a DotLess file to your project.. Name the file “woo.chirp.less”. Adding the “.chirp.less” suffix to our filename is Chirpy’s cue to look after the file. Right away, you’ll notice that Chirpy has adorned our new DotLess file with two (that’s right, count ‘em, two) “codebehind” files:

Step 3: Add DotLess crap to our DotLess file.. If you’re new to DotLess, check out the documentation. Here’s a little taste of the DRYer-than-css DotLess syntax:

Chirpy translates this DotLess craziness into valid css. The unminified version of the css can be found in the “woo.css” file:

And the minified version of the css can be found in the “woo.min.css” file:

Step 4: Change the file’s extension. Like the javascript extensions, you can change the “.chirp.less” extension to whatever you like by fiddling with the configuration settings in the Tools >> Options >> Chirpy menu. By default, even without changing any of Chirpy’s configuration settings, Chirpy will convert files with the “.chirp.less” and the “.chirp.less.css” extensions.

Benefit 3: Minify the crap out of CSS Files.

Step 1: Install Chirpy. The latest version of Chirpy can be downloaded at Codeplex.

Step 2: Add a css file to your project.. Name the file “coo.chirp.css”. Adding the “.chirp.css” suffix to our filename is Chirpy’s cue to look after the file. Right away, you’ll notice that Chirpy has adorned our new css file with a “codebehind” file:

Step 3: Write some css in your chirp.css file. The codebehind file will contain a minified version of your madness.

Here’s my unminified css file:

And here’s the minified css file that Chirpy autogenerated for me:

Benefit 4: Mash files together.

Step 1: Install Chirpy. The latest version of Chirpy can be downloaded at Codeplex.

Step 2: Add a config file to your project.. Name the file “mash.chirp.config”. Adding the “.chirp.config” suffix to our filename is Chirpy’s cue to look after the file.

Step 3: Specify what files you want to mash together. Here’s the syntax:

<root>
    <FileGroup Name="group1.js">
        <File Path="jquery-1.4.1.min.js" Minify="false" />
        <File Path="jquery.json.js" />
        <File Path="MicrosoftAjax.js" />
    </FileGroup>

    <FileGroup Name="group2.js">
        <File Path="jquery-1.4.1.min.js" Minify="false" />
        <File Path="jquery.json.js" />
    </FileGroup>

    <FileGroup Name="group1.css">
        <File Path="../Styles/jquery-ui-1.8.custom.css" />
        <File Path="../Styles/colorbox.css" />
        <File Path="howdy.chirp.less" />
    </FileGroup>
</root>

Step 4: Save the config file. As a result, three codebehind files will be created:

Step 5: Add folders to your config file (if you’d like). If you have a folder full of files that you’d like to mash together, you don’t have to list out each file. Instead, you can do something like this:

<root>
    <FileGroup Name="main.scripts.js">
        <Folder Path="/" Type="*.min.js" Minify="false"/>
        <File Path="MicrosoftAjax.js" />
    </FileGroup>
</root>

Benefit 5: Validate Javascript and DotLess files

Step 1: Screw up some of your coveted javascript. Assuming that you followed the steps for creating a yui.js file, go ahead and add some stupid code into your file. Maybe, eh, something stupidly awesome like this:

Step 2: Save your screw-up. Upon saving, you’ll notice a pleasantly annoying error message:

Step 3: Screw up some css in your DotLess file. Upon saving, you’ll receive yet another annoyingly friendly error message:

Benefit 6: Autorun T4 Templates

Step 1: Install Chirpy. The latest version of Chirpy can be downloaded at Codeplex.

Step 2: In Visual Studio, go to Tools >> Options >> Chirpy. You can tell Chirpy to auto-update T4 templates whenever you build your project:

Step 3: Get to know T4MVC. Granted, this feature may feel a wee bit out of place. But there’s a special place in my heart (and Wayne Brantley’s heart) for David Ebbo’s labor-of-love, T4MVC. So, Chirpy can auto-update T4MVC when you make a change to a pertinent MVC file (as discussed by Wayne here). To smart-run the T4MVC template, just make sure that the Smart Run T4MVC checkbox is checked:

That’s it! Chirpy says: Happy Coding!

Read More

• Chirpy Has a New Cage (and New Features!) (3)
  Already know sir Zippy biblically? Well, then. Due to overwhelming demand (and a deadly case of the avian bird flu), Chirpy (aka Chirpy Zippy) is now ...
• Chirpy to the XXXtreme – v1.0.0.5 Release (Party? NSFW? Eh? Eh?) (32)
  I'm excited to announce the release of Chirpy v.1.0.0.5--Chirpy to the XXXtreme. That's right. This version of Chirpy will blow the pants off of every...
• The Joys of Chirpy Zippy : How To Install (7)
  Let's start with the obvious. Adding Visual Studio AddIns. First, open your My Documents/Visual Studio folder (for me, it's "C:\Users\Evan\Documents\V...