Visual Studio Fun: Chirpy is Awesome!
Chirpy allows for this to be done in a Visual Studio project at build time. If you have already gone through the tutorial and are starting to work through adding your own chirp files into Visual Studio. You need to start maching files together with Chirpy using *.chirp.config files. I’ve included a quick screenshot that I am using on a project to illustrate how I’ve organized things. This is an ASP.NET MVC3 project. I have included folders for css and javscript inside ~/Content/. The Bundle.chirp.config file is pulling everything from there and generating five virtual files…and that is all of the content required for the entire site!
So what does my Bundle.chirp.config look like?
<?xml version="1.0" encoding="utf-8" ?> <root xmlns="urn:ChirpyConfig" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:ChirpyConfig http://www.weirdlover.com/chirpy/chirp.xsd"> <FileGroup Name="style.css"> <File Path="css/fontface.less" /> <File Path="css/reset.less" /> <File Path="css/base.less" /> <File Path="css/fonts.less" /> <File Path="css/mixins.less" Minify="false" /> <File Path="css/layout.less" Minify="false" /> <File Path="css/homepage.less" Minify="false" /> <File Path="css/registration.less" Minify="false" /> </FileGroup> <FileGroup Name="ie.css"> <File Path="css/ie.less" /> </FileGroup> <FileGroup Name="script.js"> <File Path="../Scripts/jquery-1.5.1.min.js" Minify="false" /> <File Path="js/ui.js" Minify="false" /> </FileGroup>--> <FileGroup Name="ielt9.js"> <File Path="js/html5.js" Minify="false" /> </FileGroup> <FileGroup Name="ie.js"> <File Path="js/PIE.js" Minify="false" /> <File Path="js/selectivizr-min.js" Minify="false" /> </FileGroup> </root>
Now i have the 5 files that I am ready to include. Why 5 files? I need to support IE 7,8,9. The labels on the bundle give some hints to the logic, but looking at the HTML in the template should clear it all up.
<link rel="stylesheet" media="all" href="/Content/style.css" /> <!--[if lt IE 9]> <script src="/content/ielt9.js"></script> <![endif]--> <!--[if lte IE 9]> <link rel="stylesheet" media="all" href="/Content/ie.min.css" /> <![endif]--> </head>
<script src="/Content/script.js"></script> <!--[if lte IE 9]> <script type="/Content/ie.js"></script> <![endif]--> </body> </html>
Now I have 13 files being reduced to 5. I’m confident that I will be adding more files as I complete the project—and I am even more confident that 5 files are all that I will be including in my HTML pages.