Chirpy to the XXXtreme – v1.0.0.5 Release (Party? NSFW? Eh? Eh?)

Feature 1: Chirpy Handles Seven New File Extensions

The new extensions include:

1. .michaelash.css. Minify your stylesheets using Michael Ash’s Regex enhancements. If you’re unfamiliar with Michael Ash’s Regex CSS enhancements, you can read more about the project here.
2. .hybrid.css. Minify your stylesheets with YUI Compressor + Michael Ash’s Regex enhancements.
3. .msajax.css. Minify your stylesheets with Ms Ajax Minifier. If you’re unfamiliar with Microsoft’s Ajax Minifier, you can read more about the library here.
4. .msajax.js. Minify your javascript files with Ms Ajax Minifier. If you’re unfamiliar with Microsoft’s Ajax Minifier, you can read more about the library here.
5. .michaelash.less. Translate your Less files with the DotLess Translator, and minify the outputted CSS file with Michael Ash’s Regex enhancements.
6. .hybrid.less. Translate your Less files with the DotLess Translator, and minify the outputted CSS file with YUI Compressor + Michael Ash’s Regex enhancements.
7. .msajax.less. Translate your Less files with the DotLess Translator, and minify the outputted CSS file with MS Ajax Minifier.

Feature 2: Chirpy Handles Inline Aspx and Ascx Translation and Minification

Step 1: In your MVC or WebForms project, create a new View. Name the view Test.chirp.aspx:

Step 2: Insert a new inline script into your Test.chirp.aspx file:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Test.Chirp.aspx</h2>

    <script type="text/javascript">
        function thisWillGetMinifiedYo() {
            alert("hi");
            alert("bye");
        }
    </script>
</asp:Content>

Step 3: In the codebehind Test.aspx file, you’ll notice that all of your inline javascript has been minified:

Step 4: Now, for the fun part. Let’s create an inline Less tag. And let’s add some less code into our aspx page:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/less">
        @color : #123456;

        tag
        {
            background-color:@color;
        }
    </style>
</asp:Content>

Step 5: In the codebehind Test.aspx file, you’ll notice that your inline Less code has been translated into minified CSS. Fun for all (don’t mind the mistake here, if you can sniff it out):

Feature 3: Chirpy’s Source is Now More Modularized and Multi-Threaded

It’s easier than ever to add your own translator to Chirpy. For starters, if you haven’t already, download and open Chirpy’s source project (you can download the source at Codeplex). Easy enough. Now, for Step 1, go ahead and open up the project in Visual Studio:

Step 2: Create a new Engine class in the Engines folder. In this example, I’ll create a really simple (read: stupid) Transform Engine:

using System;

namespace Zippy.Chirp.Engines
{
    public class TestEngine : TransformEngine
    {
        public TestEngine()
        {
            Extensions = new string[] { ".test.moo", ".test.foo" }; //extensions that this engine handles
            OutputExtension = ".test"; //outputted extension
        }

        public override string Transform(string fullFileName, string text, EnvDTE.ProjectItem projectItem)
        {
            return "//here is the outputted text:" + Environment.NewLine + text;
        }

        public override void Process(Manager.VSProjectItemManager manager, string fullFileName, EnvDTE.ProjectItem projectItem, string baseFileName, string outputText)
        {
            //process occurs after transformation
            //you can override, if you so choose...
            base.Process(manager, fullFileName, projectItem, baseFileName, outputText);
        }
    }
}

Step 3: Once your Engine class is built, you need to register your new engine in the Chirp class (Chirp.cs):

internal TestEngine TestEngine { get; set; }

public void LoadActions() {
    if(_EngineManager == null || _EngineManager.IsDisposed)
        _EngineManager = new EngineManager(this);

    _EngineManager.Clear();
    _EngineManager.Add(YuiCssEngine = new YuiCssEngine());
    _EngineManager.Add(YuiJsEngine = new YuiJsEngine());
    _EngineManager.Add(ClosureCompilerEngine = new ClosureCompilerEngine());
    _EngineManager.Add(LessEngine = new LessEngine());
    _EngineManager.Add(MsJsEngine = new MsJsEngine());
    _EngineManager.Add(MsCssEngine = new MsCssEngine());
    _EngineManager.Add(ConfigEngine = new ConfigEngine());
    _EngineManager.Add(ViewEngine = new ViewEngine());
    _EngineManager.Add(T4Engine = new T4Engine());
    _EngineManager.Add(TestEngine = new TestEngine()); //here's our baby
}

Step 4: Rebuild the vsi package. If you’re not comfortable creating a vsi file manually (as described here), you can automatically generate the vsi file as part of the Build process. Just make sure that the following commands are included in the Post-build event command line:

del “$(ProjectDir)$(OutDir)Chirpy.vsi”
“$(ProjectDir)$(OutDir)\ILMerge” /out:”$(ProjectDir)$(OutDir)Chirpy.dll” “$(TargetPath)” “$(ProjectDir)$(OutDir)EcmaScript.NET.modified.dll” “$(ProjectDir)$(OutDir)Yahoo.YUI.Compressor.dll” “$(ProjectDir)$(OutDir)dotless.Core.dll” “$(ProjectDir)$(OutDir)AjaxMin.dll”
“$(ProjectDir)$(OutDir)7za.exe” u Chirpy.zip “$(ProjectDir)$(OutDir)Chirpy.dll” “$(ProjectDir)$(OutDir)Chirpy.vscontent” “$(ProjectDir)$(OutDir)Zippy.AddIn”
rename “$(ProjectDir)$(OutDir)Chirpy.zip” “Chirpy.vsi”

Step 5: Open the vsi file, and install your customized version of Chirpy!

Step 6: Test out your awesome new engine. For my TestEngine, I created a file with the extension “.test.moo”. As a result, Chirpy creates a codebehind file:

Step 7: Take a look at the codebehind file that Chirpy created. Notice that we “transformed” the .test.moo file by adding a comment at the top of the file:

Step 8: If your engine might be helpful to other developers, please (and I mean PLEASE) consider submitting your addition to the project. I’d be excited to include it. And I’d be forever grateful for your contribution.

Feature 4: Use Google Closure Tools Offline

Though this feature has yet to be integrated into the main Chirpy project, Erik Zaadi has been working on a great Chirpy extension. The extension allows for offline use of Google Closure Tools. If you’re interested in using Erik’s madness, you can read about it here, and you can download the fork at Codeplex.

Feature 5: Chirpy’s Config File Now Totes Intellisense

You can download the XML schema file from here, or, if you’re lazy, you can reference the xsd file thusly:

<?xml version="1.0"?>

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

  <FileGroup Name="mash.js" Minify="False">
    <File Path="jquery-1.4.2.min.js"/>
    <File Path="json2.min.js"/>
  </FileGroup>

  <FileGroup Name="mash.min.js" Minify="True">
    <File Path="jquery-1.4.2.min.js"/>
  </FileGroup>
</root>

Once you’ve referenced the xsd file, you’ll get your oh-so-desired intellisense:

That’s it! Once again, Chirpy says: Happy Coding!