A Git Commit Hook to Autocompile Sass to CSS

I’m currently developing a lot of living style guides for projects that don’t use Ruby at all. (They use mostly PHP/Symphony.) Even though I don’t usually include compiled CSS into Git, in this situation it makes life easier for my coworkers since they don’t need a Ruby environment. They can just use the CSS included in the living style guide and switch easily between versions. As I’m a lazy developer (OK, “developer” already includes “lazy”), I tend to forget to compile the CSS via Middleman.

Adding CSS in Middleman to Git

Since it’s usually not a good idea to include the build folder (merge conflicts), I added only the CSS file:

git add -f build/css/desktop.css

If you added the build folder into your .gitignore, you need to use -f.

Creating a Pre-Commit Hook

Pre-commit hooks are stored as .git/hooks/pre-commit. Mine looks like:

#!/bin/bash

### if Ruby 1.8 warnings pop up:
# [[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"
# rvm use `cat .ruby-version`
### If you don’t use .ruby-version, change it to .rvmrc.

### Build the files
middleman build

### Add the compiled CSS
git add -f build/css/desktop.css

### At this point the commit is going to happen automatically.
exit 0

Don’t forget to chmod +x .git/hooks/pre-commit. Every commit from now on includes the latest CSS version.

Teamwork

What we’ve done works perfect on your machine, but Git commit hooks are not stored under version control. If you are using a script/setup or script/bootstrap like GitHub does, move the contents of .git/hooks/pre-commit into script/pre-commit:

Add to your setup script and make sure every committer executes it:

ln -s ../../script/pre-commit .git/hooks/pre-commit

Speed It Up

Building a site with Middleman takes some time and we only need this when the Sass sources actually changed. The final script includes a check for changes:

#!/bin/bash

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"
rvm use `cat .ruby-version`

### Are any Sass files canged and added?
if git status -s | grep  '^M.\+s[ac]ss$'
then
  middleman build
  git add build/css/desktop.css -f
fi

exit 0

Summary

Even if this is not your use case, write your own Git pre-commit hooks to prevent typical mistakes. It’s less work than fixing stuff later.