Will you be coming to brunch?

Brunch...

Why Brunch instead of competitors?

People love Brunch!

Community

Report any bugs or request features on our GitHub Issues. 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

First steps

Start with Brunch

brunch new [dir] [--skeleton url]

Would create a new Brunch project. You may specify a skeleton from which your application will be initialized:

  • brunch new: The default skeleton does not add any libraries or frameworks
  • brunch new -s es6 would init a simple app that supports ECMAScript 6 compilation with Babel.
  • brunch new -s react and brunch new -s redux are lovely skeletons for React fans.
  • Other 50+ community-made skeletons are available at the skeletons page.

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

Also check out the 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 push state 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.

Deploy with Brunch

brunch build --production

builds a project for distribution. By default it enables minification. You can then publish those static assets to a server or a CDN of your preference.

Diving in

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 Webpack, Grunt or 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.

There's also speed. When you spin off a brunch file watcher, the usual compilation time is less than 500ms. When combined with auto reload plugin, this allows a very efficient development environment. All thanks to the complex incremental compilation.

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 contrast, 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