Will you be coming to brunch?

Brunch...

Why Brunch instead of competitors?

People love Brunch!

Community

We have a Forum and Stack Overflow tag. We also provide a paid support.

Brunch is an ultra-fast HTML5 build tool

Installation is one-line, once you have node.js. In your console, run:

npm install -g brunch

Getting started

Create a new Brunch project:

brunch new <skeleton-URL> [optional-output-dir]

skeleton-URL specifies a skeleton from which your application will be initialized.

There’s a great guide that lets you explore Brunch in-depth!

You can also see the README for a complete description of app structure.

Develop with Brunch:

brunch watch --server

tells Brunch to watch your project and incrementally rebuild it when source files are changed. The optional server flag launches a 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: brew install terminal-notifier.

Build with Brunch:

brunch build --production

builds a project for distribution. By default it enables minification.

Documentation

All reference docs are available on GitHub. The best way to discover Brunch is probably to start with the guide.

A Quick Demo

For more info on getting started with Brunch, see the article or the introductory video and screencast:

Deploying

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 production option.

To build application that has minified JS and CSS, execute brunch build --production. Then you can deploy it:

  • If you use static hosting site: build your application on your machine and just upload public/ directory to the directory that is served by a webserver.
  • If you use hosting that supports node.js, you can install brunch there and auto-build app every time.
  • If you prefer Heroku, there is a nice small guide on deploying. Should work even on free instances.
  • If you’re into GitHub pages, you’ll need to build your app, move public/ directory to somewhere, switch to gh-pages git branch, remove files from directory and move files from your temporary dir here.

Why Brunch and not Grunt and Gulp

So, you're coming from Grunt or Gulp and may be wondering how Brunch is better.

First of all, Brunch is order-of-magnitude simpler. Check out typical configs for alternative build systems: Grunt, Gulp. And here's a typical Brunch config for comparison.

The reason for the big difference is design. Grunt is merely a set of tasks that would be executed one after another. When this may seem more flexible on a first glance, in reality it isn't. With plugins, Brunch could do anything Grunt tasks do (and beyond). Brunch even has an adapter for Grunt tasks. Gulp is "better Grunt", as they market it; or so may it seem. Gulp doesn't make temporary files, that's why it's a "streaming build system". Still, it's not enough. Brunch's goal, in contast, is to provide you with simplest and fastest possible way of managing and building your HTML5 app.

Think of it. In every app you take a set of files and produce new files with them. You may use different languages, include code quality testers such as JSHint or minify the output, but the basic pipeline is always the same. That's why all brunch plugins may take one of a few predefined roles.

Besides configs, brunch is also simpler in terms of commands. Grunt / Gulp commands replicate all plugins it loads. Brunch always has three commands: new, build and watch. Build / watch commands may receive optional production flag which will tell Brunch to optimize assets, javascripts and stylesheets.

You can find a more in-depth discussion of what sets Brunch apart in chapter 1 of the guide.

Brought to you by