The Brunch.io Guide

This is an attempt at a comprehensive guide to Brunch, an excellent builder for browser apps that gives Grunt, Gulp, Broccoli et al. a run for their money. I adapted this from my (French language) article from early March 2015.

Is your English reading not so good? Check out our translations.

For a short 8-minute version that allows to learn 90% of Brunch features take a look at Brunches official micro guide.

Table of Contents

1. Brunch?! What’s Brunch?

• Brunch vs. others
• Task runners vs. builders
• File-based processing vs. pipelines
• Configuration and boilerplate vs. conventions
• Full builds vs. incremental builds
• The paramount importance of speed
• Then why do I only ever hear about the others?

2. Getting started with Brunch

• Should I use a skeleton?

3. Conventions and defaults

• Built-in processing
• Configuration files
• Folders
• CommonJS module wrapping
• Sourcemaps
• Watcher
• Built-in web server
• Plugin loading

4. Starting from scratch

• How about a shortcut?
• Just a couple files
• Installing a starting set of Brunch modules
• Our first build
• Globals; because, reasons.
• Getting modular again
• Split targets

5. Using third-party module registries
6. A shot at templating
7. Using Brunch on a legacy codebase
8. Production builds
9. Watcher
10. Web server: built-in or custom

• Writing your own server
• And not just Node, either…

11. Plugins for all your build needs

• Enabling a plugin
• Fine-tuning through optional configuration
• Brunch and CSS
• Brunch and JavaScript
• Brunch and templates
• Brunch and development workflows
• Brunch and web performance

12. Writing a Brunch plugin
13. Conclusion

Translations

This guide is also available in the following languages:

• French

To contribute translations, check out our guidelines.

Brunch version

This guide was written against Brunch 2.5. Most of it works in earlier versions, though; still, you should upgrade!

License

This work is © 2015 Christophe Porteneuve, licensed under the MIT license.

Contributing

I welcome all useful contributions: typos, bug fixes, rephrasings, better explanations or examples, extra information and demos, translations, etc.

Be sure to check our contribution guidelines!

Acknowledgments

The Brunch team deserves enormous applause and thanks for their amazing work on this tool. I write this as Brunch turns 4 already, and it's made my life easier (and that of hundreds of my JS trainees) for all that time! You guys rule!