The best thing about CodeKit

I’ve been giving CodeKit a shot instead of Gulp since the release of version 2. Even though it’s not quite as powerful as Gulp and using it doesn’t make me feel like a hacker, it’s had a great impact on my workflow.

CodeKit can compile Sass, manage Bower packages, concat and minify Javascript and some other good things. I did all of this with Gulp to, and I could even do some of the tasks better with Gulp.

There is however one feature CodeKit has that’s made it my number one tool.
I’m talking about automatic browser refreshing.
Sure, I know, I know. That’s nothing new and it’s nothing unique to CodeKit. I’ve used both Grunt and Guard in the past to implement this feature into my workflow. I’m sure it’s possible to make it happen with Gulp to.
But with CodeKit, it’s so easy! Just click the Preview button in the upper right corner of the app and a new browser window will open.

Codekit will then refresh the browser when you save a file. It will also inject new styles, without a refresh, when you save a css file.

Okey, but…

…what if you don’t work with static HTML files? What if you’re working on, let’s say a WordPress site?
Good news. It will still work! You just have to open the project settings, select ”Browser refreshing” in the sidebar, activate ”External server required” and write the local URL. Hit the Preview button again and you’ll see your WordPress site!

The best part…

…is that you can open the same URL on your phone or tablet and see the changes happen instantly there to! It has become a pleasure to build and test sites on such devices. Once you get used to have automatic refreshing and style injection as a part of the workflow, it’s hard to live without it.