This is a guest post by Michael Schmatz, Lead Developer at CodeCombat
One of the most important parts of CodeCombat’s development workflow is Brunch. In this post I’ll tell you why CodeCombat chose Brunch, run through setting up a basic Brunch project, explain CodeCombat’s Brunch configuration, and compare Brunch to several popular alternative build systems.
Why CodeCombat uses Brunch
In early 2013, CodeCombat was just getting started. One of the cofounders, Nick, wanted a workflow skeleton to kickstart development. After examining several different tools, including Brunch and Yeoman, he ended up choosing Brunch, mainly because of the awesome project skeletons available.
As time went on and the build times grew and grew, we appreciated one design choice of Brunch more and more: incremental rebuilding and caching. For small projects, the time difference between partial and complete rebuilds isn’t very significant. However, for large projects, long build times can be very detrimental to developer efficiency and happiness. Doing a complete rebuild of CodeCombat can take a few minutes on older computers, whereas partial rebuilds only take a few seconds, if that. Such responsiveness is integral to our development process.
Setting up a basic Brunch project
First, we need to install Brunch. Once you have npm installed, just run:
To get us started, we can use Brunch’s built in skeleton installer. There are many skeletons to choose from; I chose one of the more popular ones that includes AngularJS, CoffeeScript, LESS, and Jade.
brunch new gh:scotch/angular-brunch-seed jetbrains
All we have to do now is start Brunch. Move into the new directory, and then start the Brunch watcher/server.
brunch watch --server
Now any time we make a change to our app, Brunch will automatically recompile the files that changed, rebuild the app, and refresh the page. On my machine, this takes only about 70ms.
Let’s change the header on the front page. Open up your favorite IDE and start editing
app/partials/todo.jade. In addition, open a web browser to the URL Brunch provided, in my case,
Notice how, if you change something, for instance the
<h2>, the app automatically is rebuilt and the page refreshes.