Installation is one-line, once you have node.js. In your console, run:
npm install -g 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 es6would init a simple app that supports ECMAScript 6 compilation with Babel.
brunch new -s reactand
brunch new -s reduxare lovely skeletons for React fans.
There’s a great guide that lets you explore Brunch in-depth!
Also check out the complete description of app structure.
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.
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.
Brunch-generated applications are a bunch of simple static files. You can
host them everywhere, even on free hostings, like
Because production environments are usually
slightly different than development envs,
To build application that has minified JS and CSS, execute
brunch build --production. Then you can deploy it:
public/directory to the directory that is served by a webserver.
public/directory to somewhere, switch to
gh-pagesgit branch, remove files from directory and move files from your temporary dir here.
So, you're coming from Grunt or Gulp and may be wondering how Brunch is better.
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:
watch. Build / watch commands may receive optional
You can find a more in-depth discussion of what sets Brunch apart in chapter 1 of the guide.