Chirp Chirp: Visual Studio Add-In for DotLess, Js, and Css Files
http://www.weirdlover.com/2010/05/22/visual-studio-add-in-for-dotless-js-and-css-files/
You’d think minification would be a lot cooler and easier. Like, say,Honey, I Shrunk The Kids. But, alas.
Wayne Brantley released a nice DotLess translator a couple months ago. Before that, Phil Haack created a nice T4 template for mashing and minifying DotLess, Css, and Js files. Today, in the spirit of my Zippy Series, I’ve enhanced (or deprecated [on?]) Wayne’s creation with a couple of new features, which I’ll discuss briefly below.
Before you get too frisky, make sure to download Chirpy Zippy here.
Also, if you’re new to working with Visual Studio AddIns, or if you just need a little help installing Chirpy Zippy, feel free to check out the instructions page. It shouldn’t take you more than a couple of minutes to set Zippy up.
And now, drum roll, shock and awe, get naked please, or sit there, and let’s just get right down to business. The business: for starters, assuming we’ve already added Chirpy Zippy to our AddIns folder, let’s put it to good use. Add a new javascript file to your project. We’ll call it hello.chirp.js. Adding the “.chirp.js” suffix to our filename is Zippy’s cue to look after the file. Quickly, you’ll notice that our new javascript file has a “codebehind” file. Ah, snap:
Codebehind!
Now, whenever we make modifications to our javascript file, the “min.js” version of the file will–you guessed it–be a minified file that we can use however we see fit. If you’re wondering, Zippy uses the YUI Compressor to do his compressing.
Zippy also fondles stylesheets. For example, create a stylesheet called “hello.chirp.css,” and (..if you can’t see what’s coming here, I fear for your children) voila:
Look Familiar?
Zippy also handles .less files. For example, add “howdy.chirp.less” to your project, and you’ll get both a minified and a non-minified css file. Not too shabby:
One Minified, One Not
What about mashing? Add as many .chirp.config files to your project as you want. In the config file, you can specify file groups. You can also specify which files get minified:
<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>
Saving the above config file results in the following outputted files:
McNugget
Think that’s it? Nope. If you’re super-lazy, you can mash together all of the files in a folder:
<root>
<FileGroup Name="main.scripts.js">
<Folder Path="/" Type="*.min.js" Minify="false"/>
<File Path="MicrosoftAjax.js" />
</FileGroup>
</root>
—
1.添加引用 Chirp
2.Add in-manage
3.创建*.chirp.config文件
4.借鉴上