Want to run something on the command line every time brunch compiles? Easy.

For a new project at Creative Licence, we have been using the awesome Brunch. Brunch is an assembler for HTML5 applications, which means that all the work watching, compiling, optimizing and concatenating source files is handled for you. It also has a fantastic plugin ecosystem, so it supports a diverse range of languages and project architectures.

We are also trialling the use of a live styleguide for this project, and in order to keep this in sync with the project’s development, it’s necessary to update the styleguide after every Brunch compile.

Instead of creating a plugin for a tool with no API - which could have been a huge headache - we created a tiny CLI wrapper plugin for Brunch that will run command line processes after the compile event. It boils down to an array of commands that you store in your Brunch

Using after-brunch

To use after-brunch, add "after-brunch": "x.y.z" to your package.json of your brunch app. You could also just npm install after-brunch --save.

Then in your just add any commands to the afterBrunch array in the config’s plugins object. For example, you might want to use styledocco to create a live styleguide for your projects stylesheets.

exports.config =
    afterBrunch: [
      "styledocco -n \"My Project\" css"

Check it out

You can check out and contribute to after-brunch on GitHub.

Sydney-based UI/UX Designer, Art Director & Front End Developer

If you want to get in touch, shoot me an email. Maybe we can build something together.

You can also find me on Github.