Brunch

Simple front-end build tool

What is brunch

Command line utility for building front-end code
```
npm install -g brunch
```
Written in CoffeeScript
Built and maintained by

http://github.com/brunch/brunch

What it does

Compiles scripts/stylesheets/templates
Lints them
Wraps in Common.js or AMD modules (optional)
Concatenates & minifies
Generates source maps
Copies and optimizes image assets
Watches for file changes
Notifies you of errors via console or notifications
Auto reload (plugin)

Commands

Getting Started

 npm install -g brunch brunch new <skeleton url> <output directory> cd <output directory> brunch watch --server

Build

 brunch build --production [-e <config-override>]

Skeletons

An application boilerplate for starting a new application.

Brunch with Chaplin

CoffeeScript, Stylus, Handlebars

Brunch with AngularJS

Coffeescript, Less, Jade

Brunch with Ember

JavaScript, CSS, Handlebars

And many more

Plugins

Just NPM modules
```
module.exports = {
  brunchPlugin: true
```
Plugin API

lint()
compile()
optimize()
onCompile() - after compilation is complete

List of plugins

Config File


  exports.config =
    files:
      javascripts:
        joinTo:
          'javascripts/app.js': /^app/
          'javascripts/vendor.js': /^(?!app)/

      stylesheets:
      joinTo: 'stylesheets/app.css'

    templates:
      joinTo: 'javascripts/app.js'

(how it starts at least)

Config Docs

Bower Integration

You don't need to manually specify all the used files
Brunch includes all scripts based on the "main" attribute in each bower.json
But how does it track dependences, what if my dependency doesn't have a main attribute, multiple scripts need included, ect...?

Bower Dependencies

Specify order in brunch config

exports.config =
    files:
      javascripts:
        joinTo:
          'javascripts/app.js': /^app/
          'javascripts/vendor.js': /^(?!app)/
        order:
          before: [
            'bower_components/jquery/jquery.js',
            'bower_components/underscore/underscore.js',
            'bower_components/backbone/backbone.js',
          ]

Add overrides to bower.json

{
  "dependencies": {"backbone": "*"},
  "overrides": {
    "backbone": {
      "main": "backbone.js",
      "dependencies": {
        "underscore": "~1.5.0",
        "jquery": "~2.0.0"
      }
    }
  }
}

Doesn't Grunt do all this?

Does a lot of things out-of-the box
It's fast!

Recompiles only changed files and relies on cache for the rest (very important for watching/auto-reload)

Simple

Config files for brunch are considerably shorter

Convention vs configuration
Plugins can share config attributes

Bower made a little easier

Questions?

Brunch

By Andrew Heuermann

Brunch

1,022