Here in the Front-End Department at Centresource, we've started using Codekit for organizing assets and precompiling the Sass and Coffeescript files we're writing. Codekit works a little like Rail's Asset Pipeline for sites that don't have that functionality built in.
We were initially attracted to the app mainly because it will watch *.coffee and *.sass files (and *.less) and as they are saved, Codekit automatically compiles them and, if you have the feature turned on, injects them into your browser (with CSS files it autoupdates the page, no reload, with JS files it auto-reloads). This alone was worth the price of the app as often times you could hit save and by the time you'd flipped to your browser the page was updated with the new styles. But as we've spent more time with the app, we've found a few other features that really make our lives better. Here are 4 of them:
Our design department creates really spiffy looking designs all the time that we in the Front-End group then slice up with Photoshop for inclusion in web pages. It used to be that you had some ability to optimize .JPG's and .GIF's with Photoshop, but PNG's required other tools or magic voodoo dust. No longer! Codekit can optimize all image files, reducing cruft without any reduction in visible quality. I find this most handy with PNG's, I can save out of Photoshop to the directory in my project I want the file in, Codekit will find it automatically, and then it's just one click to optimize. The results can be astounding. Here's a screenshot I just took of the window I'm writing this post in, and codekit's optimizations: http://cl.ly/image/2p062W0Z0W33 You'll notice that's a Retina screenshot (2878x2374px) that Codekit chopped almost in half, file-size.
We love Thoughtbot's Bourbon framework. It's super lightweight, easy to work with, and extremely flexible as we build custom solutions for our clients. Codekit loves Bourbon too - you can add the framework to any project with just a couple clicks. http://cl.ly/image/41230a062j3C
When organizing files, it's often easier to separate the uncompiled files from the compiled files. Codekit makes that easy. Just right click a file, and hit "Set Output Path" and define where you'd like the compiled file to go. This is handy and helpful, but it becomes even more powerful when used with the next tip.
Just being able to set the output path of files is great, but often times you want to do more than just compile the files to a different directory. When worrying about page speed for your rendered pages, one of the easiest things to do is reduce HTTP requests being made on load. This is often done by concatenating all your JS and CSS files into one larger file, a process that Codekit makes really easy.
At Centresource, we're used to working with the Asset Pipeline in Rails now, so we like to keep our coffee and css files small and organized in a structure similar to the views. This has carried over into development of Static HTML sites and Drupal projects as well. In the past, because wanted as few files as possible, we might have been tempted to just put all our Javascript in to one scripts.js file. Now, with Coffeescript and Codekit, we can break things down into small, semantically named, easy-to-read files.
The easiest way to do this (when you factor in source control and working with multiple developers) is to make a manifest file, say app.coffee, or screen.scss, and use the proprietary "codekit-prepend" and "code kit-append" statements to organize your file. Say you have three coffee classes: Foo, Bar, Baz, and you want them to be concatenated into app.coffee. You put each class in a semantically named .coffee file: foo.coffee, bar.coffee, and baz.coffee. Then, in app.coffee, you'd put this at the top of your file:
# @codekit-prepend 'foo.coffee'
# @codekit-prepend 'bar.coffee'
# @codekit-prepend 'baz.coffee'These statements are not valid Coffeescript so you need to comment them out, but Codekit will catch them none-the-less.
This is great for creating a utilities.js that has all your plugins and frameworks concatenated and minified, or for organizing all your css by pages but only including one css file in the actual page. We love it!
Codekit is a great tool. If you use it, I'd love to hear of other cool ways it helps you improve your workflow. To find out more, check out the Codekit page.