Automatically generate Pattern Lab on git pull

Pattern libraries are becoming better known as sites such as the BBC and A List Apart release their pattern libraries publicly. For the uninitiated, a pattern library is a collection of elements used on a web site. They define everything from the base font to page layouts.

Brad Frost and Dave Olsen’s Pattern Lab is one tool for creating a style guide. As the demo shows, it combines both a style guide and a method for testing the responsiveness of a web site.

When creating a style guide using Pattern Lab for your site, it’s necessary to store the /source directory in your Git repo. This is done by commenting out the exclusion from the .gitignore file:

# source/*

It’s wasteful to store the /public directory in the Git repo too – especially if cache busting is enabled – so it’s helpful to generate the directory automatically when you pull to the live server.

Automating the rebuild

According the the Git book, hooks can be used to “fire off custom scripts when certain important actions occur”.

Behind the scenes, a git pull includes a git merge, so creating this post-merge hook will work:

DIR="$( cd "$( dirname "$0" )" && pwd )"
php "$DIR/../../core/builder.php" -g

On the server, you save the file to /.git/hooks/post-merge. As hooks aren’t stored in the git repo, you need to set this up on a per server basis

A rebuild is required when you merge a feature branch into master, as the name implies the post-merge hook will fire at this time too.

If you have multiple branches, you can get same code to run after switching branches using the post-checkout hook.

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.