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 intensive 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
You can leave a response, or trackback from your own site.
26 Responses to “Chirpy Attains Godlike Bird-Power In Version 1.0.0.4”
Leave a Reply
Wicked update!
Thanks for all the fish, and please keep up the awesome work!
Martin,
Thanks, friend! I definitely appreciate your support.
If anything breaks, please let me know. Or, if you have any ideas for new features, I’d love to hear ‘em.
Cheers,
Evan
This looks really good. I shall add it to my list of ‘things to use on that project I keep meaning to start where I use lots of new things’
Thank you for such a nice summarization. One question, how can I choose js compressor in mash files together mode?
Hey Daniel,
Right now, unfortunately, you can’t. The config file always uses YUI to mash the files.
That said, in the next release, I think that we should add a “MinifyWith” attribute. So, you could write MinifyWith=”yui” or MinifyWith=”gct”. Or maybe we should switch Minify=”true” to Minify=”minifyTypeName/none”. Something like that.
Until then, you can always minify the file via the codebehind method. Meaning: create a javascript file and name it “fileName.whitespace.js”. Then, in your config file, add a reference to “fileName.min.js”, and set Minify to false.
The latter method is actually better, as the config-generated files get regenerated every time you change any of the corresponding files. So, to keep things speedy, it’s probably best to reduce the amount of minification being requested by the config file.
Hope that makes sense. If not, let me know!
Thank you for fast response
So here is my wishlist:
1) Config-generated files have to be regenerated every time I change any of the corresponding files, even in mash mode only. I definitely do not want to create separate chirp for each of my 150 files
2) Mash mode, which I prefer, should support something like this:
To disable temporally minification of all files.
Again. Thank you very much. Your tool rocks.
Ha, code was eaten. So again FileGroup _Minify=”false”_ Name=”site.js”
Hey Daniel,
I totally agree with you, and thanks for the great suggestion. Definitely a feature we’ll be adding soonly.
Cheers,
Evan
Another real life suggestion
I changed default mvc structure a bit. Instead silly root Content Scripts directories, I prefer such structure
/assets/js
/assets/css
Would be fine, to use this:
/assets/site.chirp.config
and in site.aspx
What’s the point?
I can’t move generated site.css to another directory, since images path from stylesheet is relative to stylesheet itself.
So now I have to maintain two separate chirps (for js and css).
Path (or maybe PathPrefix) on FileGroup should fix it
oh, html again eaten
link href=’assets/css/site.css..
script src=’assets/js/site.js..
sorry, here is it http://pastie.org/1053664
Hi there,
shouldn’t the plugin try to validate only the “final” css file when using a .less file? I got a lot of “errors” because the css-validator doesn’t know how to parse the .less-file
Also there is sometimes a problem when changing a .less or a .js file and the plugin doesn’t check if those changed files are used by a .chirp.config file, so my included files from that .config isn’t updated with the fresh code. I have to open the .chirp.config file on my behalf and save it explicitly.
Last suggestion: Maybe you could contact the creator of the plugin “CSS is LESS” and integrate it’s functionality (use the css-editor for .less files) so you don’t need to install both plugins. I’m working on a plugin to edit .less files with syntax highlighting, intellisense & co. myself, but it’s far away from alpha-use yet
Greets & THANKS for your ongoing work!
–Gordon // Anheledir
Hey Gordon,
Thanks for reporting those issues. I’m on it.
And double thanks for pointing me to CSS is LESS. I’ll see if I can use my Midwesternly charm to include that in the project.
Get that intellisense done, brother! Would love to see it.
Also, Gordon,
Any way you can add the .config bug to Codeplex? Maybe write up a scenario where Chirpy craps out on you? That’d be really helpful.
Let me know. And thanks again!
Cheers,
Evan
Your tool really rocks. Why? It’s much better than any deploy script. I prefer to have web.config switch “dev/stage/deploy”. So I can easily test deploy configuration (which includes chirp less/js compression) localy
This is simply awesome.
I cloned the source repo with the initial intention of adding jQuery support for the google closure compiler.
The code (my part) is way ugly so far, but it works.
It got me thinking though, about a couple of features that might be useful:
Offline minification with Google Closure compiler, since it’s using the Google App for this, hacking when disconnected is not possible.
Perhaps extending the config screen to be able to choose the java path and embed the compiler.jar…
Adding custom externs (passing existing javascripts to Google Closure compiler so it doesn’t minify function names etc) in the .config, thus being able to support jQuery, Mootools or whatever javascript framework you throw at it..
Using an offline .jar to compress the code will allow you to be able to mash up several files with Google Closure compiler as well..
I’ll be trying to add those features to the clone soon..
Anyhow, thanks for an awesome addin!
Erik
Erik,
I love everything you said. Everything.
Looking forward to playing with the features. And a huge thank you for helping out.
Cheers,
Evan
This is amazing!
Thanks!
Please, release your updates. I can’t wait for
This plug-in is unbelievably cool. My jaw hit the floor when I found it. I needed to run T4 templates with the build, but the LESS parsing, and minification of CSS and JS makes this truly amazing.
Question: Is there a way to have the build-triggered T4 generation check out the file that is being regenerated? If I save the TT file manually it will check them both out, but the build is not triggering the T4 unless it’s already checked out.
Mark
Does this work in VS 2008 Evan. I just installed and I don’t see it anywhere
Hey Praveen,
You can download an older version of the project (for VS ’08) here:
http://chirpy.codeplex.com/releases/view/46193
You can also download the VS 2010 version, open the .AddIn file in the AddIns folder, and change the version to 2008. No promises there, as the newer functionality hasn’t been tested in VS ’08.
Let me know if that helps.
Best,
Evan
Can you make a new installer please? Or note how to build and deploy from source. Thank for awesome tool.
My only concern is that something like this is blurring the responsibilities between building and deployment.
Great tool! It would be nice to have some kind of config option to specify that minified files should be used in production environment and regular version in local builds, staging,etc. Daniel Steigerwald mentioned something about that on Jul 25th. I wonder how he does it.
Also, if I mash files using chirp.config, should I reference that file by FileGroup name in my aspx or MVC pages? Is that how it works?
Thanks,
Yevgeniya
What would be a reason to have multiple .chirp.config files? Could not I just keep all my groups in one file? Could you put different config files into different folders?