Use Coyote to watch for changes in your LESS stylesheets

Let me start with a little back story. When I start a new WordPress theme, I use a starter theme that I have put together over the years. It has a lot of customizations and is a great place to start any new project. The base theme uses Twitter Bootstrap as the front-end framework. Twitter Bootstrap uses LESS, which is a dynamic stylesheet language. There are a few ways you can compile LESS stylesheets. You can compile:

  • On the client side using Javascript
  • On the server side using node.js
  • Locally and just serve up the CSS generated from your LESS compilation
I’ve tried all of these options and none of them really fit into my workflow well. I’m always looking for ways to streamline my workflow and this problem just has not gone away. I thought of explaining all the ways that I tried that didn’t work, but that doesn’t seem very nice now does it. If you’re interested in some of my other attempts let me know in the comments and I’ll explain.

Eureka!

What I’m looking for is a compiler that will watch my LESS files and when one changes, quickly and efficiently compile my LESS into CSS. Enter Coyote. To get Coyote up and running all you need to do is:
gem install coyote

Then create a Rakefile which will contain configuration for how you want Coyote to compile your files. And then go to the command line and run your rake command to watch your LESS files.

rake watch

After that, all you need to do is bust out your sweet LESS files, sit back and let Coyote take care of the compilation.

I’m still early on in the implementation of this and I hope to find ways to tweak this so it’s even more efficient. But, it’s nice to have a solid, dependable solution in place.