A lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.
A lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.
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 build will then fully build the project. With --optimize flag it will be also minified.brunch watch may be used for continuous incremental rebuild of the whole application. You can also use --server flag 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.
See the video that shows starting new app with Brunch:
Brunch has a plugin ecosystem to achieve interoperability with various stuff simply via plugin API.
For example, if you use JavaScript files in your project, you’ll need a plugin that adds JS support. Same with styles, templates, minifiers, linters and much more.
To install new plugin, simply execute npm install --save plugin-name. This will install its node.js dependencies and save to package.json.
To remove it, edit package.json’s dependencies hash.
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
scaffolt project,
which was once used to be a part of brunch as brunch generate.
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
mocha-phantomjs project,
a successor of brunch test command.
Use it like this: mocha-phantomjs public/test/index.html.
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-pages
git 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.
Ostio is an open-source forum for GitHub projects (code). Uses default Chaplin as app skeleton and Rails for backend.
Todos (code) is a port of the famous backbone todos example app. Uses localStorage to persist data.
Hackerank is an example app that finds the top hackers of a github repo search. Uses brunch with hipsters as base skeleton.
Ember-bloggr is a simple demo app based on the Building an App with Ember.js video.
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.
Uber is everyone’s private driver. Their clients app is made with brunch.
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:
Paul, brunch core dev is offering commercial support, consulting and training for Brunch, Chaplin and Backbone-based web applications. Send him an email for more information.
Add your company that offers Brunch services too.
