Brunch — Convention-Over-Configuration Build Tool for the Web

Introduction

Brunch is a front-end build tool that prioritizes speed and simplicity through convention over configuration. Instead of requiring long build configuration files, Brunch uses sensible defaults and a simple config to compile, concatenate, and minify assets for web projects.

What Brunch Does

• Compiles JavaScript (ES modules, CoffeeScript, TypeScript) into bundled output files
• Processes CSS preprocessors (Sass, Less, Stylus) with concatenation and minification
• Watches files for changes and rebuilds incrementally in milliseconds
• Serves a local development server with auto-reload
• Supports project scaffolding via skeletons (starter templates)

Architecture Overview

Brunch operates on a file-watching pipeline. It scans source directories for changes, routes files through compiler plugins based on extension, concatenates the compiled output into configured bundle files, and optionally minifies for production. The pipeline is parallel by default, and incremental rebuilds only reprocess changed files. Plugins are npm packages that hook into compile, lint, or optimize stages.

Self-Hosting & Configuration

• Install globally via npm or as a project dependency
• Configure with a brunch-config.js file (typically under 20 lines)
• Place source files in the app directory following Brunch conventions
• Add plugins for your stack (babel-brunch, sass-brunch, etc.) via npm
• Run brunch build --production for optimized output with minification and source maps

Key Features

• Sub-second incremental rebuilds through intelligent file watching and caching
• Minimal configuration with convention-based project structure
• Plugin ecosystem for transpilers, preprocessors, linters, and optimizers
• Built-in development server with live reload and source map support
• Skeleton system for bootstrapping projects with common framework setups

Comparison with Similar Tools

• Webpack — highly configurable module bundler; Brunch trades flexibility for simplicity and speed
• Vite — modern ES-module dev server; Brunch predates it with a simpler pipeline model
• Parcel — zero-config bundler; Brunch offers a similar philosophy with explicit convention-based structure
• esbuild — ultra-fast compiler; Brunch provides a full build pipeline including watch and serve
• Rollup — library-focused bundler; Brunch targets full application builds with asset management

FAQ

Q: Is Brunch still maintained? A: Brunch is in maintenance mode. It remains functional for existing projects, though new projects may prefer Vite or esbuild.

Q: How does Brunch achieve fast rebuilds? A: Brunch caches compiled output and only reprocesses changed files. Its pipeline avoids full re-bundling on each save.

Q: Can I use Brunch with React or Vue? A: Yes. Install the appropriate compiler plugins (babel-brunch for JSX, vue-brunch for SFCs) and Brunch handles them like any other source file.

Q: How does the skeleton system work? A: Skeletons are GitHub repositories containing a pre-configured Brunch project. Running brunch new with a skeleton URL clones and sets up the project.

Sources

• https://github.com/brunch/brunch
• https://brunch.io/