Brunch is an assembler for HTML5 applications. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology. To simplify app development, brunch automatically:
Installation is one-line. You’ll need node.js. Execute in console:
npm install -g brunch.
brunch new <project-name>will create new project. Now you can edit the code. See description of app structure. With
--skeleton <url>option you can specify custom app boilerplate.
brunch buildwill then fully build the project. With
--optimizeflag it will be also minified.
brunch watchmay be used for continuous incremental rebuild of the whole application. You can also use
--serverflag to launch simple web server with pushstate support.
If you use OS X and want brunch to show system notification every time
compilation error happens, you will need
to install terminal-notifier:
[sudo] gem install terminal-notifier.
Brunch has a plugin ecosystem to achieve interoperability with various stuff simply via plugin API.
To install new plugin, simply execute
npm install --save plugin-name. This will install its node.js dependencies and save to
To remove it, edit
See npm docs
for more docs on packages.
All plugins are available at the Plugins wiki page. Feel free to add your plugins to it. Some interesting plugins from there:
Brunch skeleton is basically an application boilerplate that provides a good starting point for new applications. Creating new application with any skeleton is pretty simple:
brunch new <app> --skeleton <address>
Brunch doesn’t encourage you to use any particular technology, but application skeletons can do it.
If you create your own open-source skeleton, feel free to add it to the wiki page, which contains over 40 skeletons for now. Some interesting skeletons from there:
If you need scaffolding, there is a separate
which was once used to be a part of brunch as
It is the simplest one, with implementation based on JSON scaffolder specifications and Handlebars templates for stuff.
Use it like this:
scaffolt model user.
If you need console test runner and don’t want to launch browser,
there is a separate
a successor of
brunch test command.
Use it like this:
Brunch-generated applications are a bunch of simple static files. You can host them everywhere, even on free hostings, like GitHub pages.
Because production environments are usually
slightly different than development envs,
brunch has minify option. To build application
that has minified JS and CSS, execute
brunch build --optimize.
Then you can deploy it:
public/directory to the directory that is served by a webserver.
public/directory to somewhere, switch to
gh-pagesgit branch, remove files from directory and move files from your temporary dir here.
Brunch is similar to Yeoman, LiveReload and CodeKit. And it’s also different. Here’s a quick table that compares their features.
Google’s Yeoman builder is the most popular alternative to Brunch. See the Differences between brunch and Yeoman for more information.
|Feature||Brunch||Grunt / Yeoman||LiveReload||CodeKit||Comment|
|Builder, linter, concatenator, minifier||✓||✓||✓||✓||Brunch can compile your JS, CoffeeScript, Stylus, Sass (+ Compass), LESS, Mustache, Handlebars, Jade, Eco (and much more) files, concatenate output to and minify it. It just doesn’t care about languages or frameworks you use.|
|File watcher||✓||✓||✓||✓||Brunch recompiles and concats all your stuff automatically on any change, headlessly. No more need in compicated Makefiles and watchers.|
|Automatic browser reloading||✓||✓||✓||✓||Brunch reloads your browser window every time you change stuff. (with autoreload plugin)|
|Blazing fast recompilation||✓||✗||✗||✗||Speed is important for app watchers. Usual brunch compilation takes less than 100ms. Unlike Grunt, Brunch recompiles only changed parts of your app and extensively uses caching for others. You can use Brunch features in your node.js projects without mess.|
|Super simple||✓||✗||✓||✓||All you need to do with Brunch is run one command and everything will be managed for you, without need to write sophisticated 300LOC build configs.|
|Automatic wrapping of scripts in modules||✓||✓||✗||✗||All script and template files in `app/` directory are wrapped in modules (CommonJS or AMD) to prohibit global public access and encapsulate code.|
|OS X Notification Center / Growl / Inotify output for errors||✓||✗||✗||✓||If any compiler throws an error, brunch displays it as detailed notification.|
|Built-in webserver||✓||✓||✗||✗||Brunch has a webserver that runs on `public` directory and an API for simple custom webservers.|
|Skeletons (boilerplates)||✓||✓||✗||✗||Brunch can generate your project from predefined template. There’s a lot of great skeleton projects you can use already.|
|Package manager||✗||✓||✗||✗||Brunch does not have frontend package manager integration currently, but it is coming in the next release.|
|Cross-platform||✓||✓||✗||✗||Brunch works everywhere.|
|Free||✓||✓||✗||✗||Brunch is free, both as in beer and as in speech.|
We know of a few folks who are using brunch already. Ranging from internal tooling to high traffic facebook apps.
Delicious is a free service designed to be the best place to save what you love on the web, whether it's a video, picture, product, blog post, article or music. We then help you remember and find it later. It’s using Brunch as application builder and Chaplin as a framework on top of Backbone.
Blossom is a lightweight project management tool for lean teams. Backbone.js is heavily used in combination with CoffeeScript to provide a smooth interaction experience. The RESTful backend is built with Flask on Google App Engine.
ChainCal is an iPhone app that helps you to track your daily goals in a minimalist, visual way. The app is written almost entirely in CoffeeScript, Backbone handles the models, collections and views, and persistence is done with a Backbone.sync localStorage adapter. Templates are written in Eco and the app is packaged with Brunch and deployed with Phonegap.
Cozy Cloud is your own private personal cloud. A server you can trust to store your personal data and host web apps. You can host it with us at Cozy or host it at home, it's up to you!
Cozy cloud aims at using only standard execution environments. For each of them they suggest a coherent set of powerful technologies.
Snip.it help you collect your thoughts and your opinions about your favorite topics, and discover others who care about the things you care about.
Their client app is built with Brunch on top of Chaplin & Backbone. The backend is Rails.
Follow @brunch and @paulmillr on twitter to get latest updates & news. Feel free to discuss things with other users and ask for help in our ost.io forum section. You can also ask questions with #brunch tag at Stack Overflow
If you want to add something new to brunch or create your own plugin, contributing guidelines can help you.
There are also some text editor plugins that simplify developing apps: