Application assembler
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 watches your files for changes and automatically wraps your scripts and templates in require.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.
Brunch uses node.js plugins to speak with compilers. There are a bunch of plugins already:
- Programming languages: JavaScript, CoffeeScript, IcedCoffeeScript, Roy
- Pre-compiled templates: Handlebars.js, Jade, Mustache, Eco
- Styles: CSS, Stylus, LESS, Sass
- Minifiers: uglify.js, clean-css
In case your favorite language / tool is not supported yet, you can write brunch plugin for it, it's very simple. Feel free to edit the wiki page and add new plugins there.
Brunch doesn't encourage you to use any particular technology, but application skeletons can do it. Some interesting skeletons:
- Simple coffee (comes with brunch): very simple, HTML5 Boilerplate with Backbone.js. Main languages are CoffeeScript, Stylus and Handlebars. If you don't like coffeescript, there's a very same project that uses js as main scripting language: simple js.
- Brunch with Chaplin: Bootstrap, HTML5 Boilerplate, Chaplin classes over Backbone.js. Main languages are CoffeeScript, Stylus and Handlebars.
- Brunch with eggs and bacon: fat and tasty. Main languages are JavaScript, Sass, LESS & Handlebars. Includes Backbone.Mediator & Twitter Bootstrap.
- @jokull's skeleton: Backbone.js, Zepto.js, forms, Stylus adjustable responsive grid, modernizr, Facebook login, slideshow.
Of course, you can throw skeleton technologies away and build your own structure.
Getting started
You'll need node.js 0.6.10+. Execute:
npm install -g brunch
You're done!
To create a new project, execute brunch new <project name>.
Now you can edit the code. app/ directory has files of your project and vendor/ has libraries etc. that would not be wrapped in common.js modules.
To build it, execute brunch build in project directory.
To continuously rebuild the project on every change, run brunch watch.
To run a simple http server, execute brunch watch --server.
To install / uninstall a plugin, add it to package.json and execute npm install.
Documentation
More detailed documentation located at brunch.readthedocs.org. If you're upgrading from earlier version, you might be interested in upgrading guide and changelog.
Examples
We know of a few folks who are using brunch already. Ranging from internal tooling to high traffic facebook apps. Know someone else who is enjoying brunch already? Feel free to edit the wiki page!
Todos
Todos is a port of the famous backbone todos example app (code). Uses localStorage to persist data.
Sébastien Béal also made an alternative which uses Django + Django Rest Framework to persist data.
Tweet your brunch is a simple twitter client (code). Uses Chaplin as app skeleton.
blossom
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
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.
Salon.io
Salon.io provides a space where photographers, artists and designers freely arrange their visual art on virtual walls. Salon.io runs on Rails, but does not use much of the traditional stack, as the entire frontend is designed as a single page web app, using Backbone.js and CoffeeScript.
Snip.it
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.
Uber
Uber is everyone's private driver. Their clients app is made with brunch.
Community
Follow @brunch and @paulmillr on twitter to get latest updates & news.
Contributing to Brunch
- Fork the official repository.
- Clone your fork:
git clone git@github.com:<your-username>/brunch.git - Make sure tests are passing for you:
npm install && npm test - Create a topic branch:
git checkout -b topics/new-feature-name - Add tests and code for your changes.
- Once you're done, make sure all tests still pass:
npm install && npm test - Make sure your code conforms coffee style guide
- Commit and push to your fork.
- Create an pull request from your branch.
- Sit back and enjoy.