Broccoli

The asset pipeline for ambitious applications

Ritesh Keswani

Panasonic Avionics

Twitter: @bmbrcp

JS Build Tool Actions

  • Transpiling

  • Concatenation and Minification

  • CSS Preprocessors

  • CSS Linters: jshint, csslint etc

  • Watching for Changes

  • Rebuild

  • Cache Busting

  • Compiling Templates

  • Copying Assets

  • Unit Tests

  • Generating tags for bundled files

  • Build configurations for environments

  • Development web server

  • Handling npm and bower dependencies

Broccoli

  • Started around 3 years back by Jo Liss
  • Based on Node's File System module
  • CLI, File System Watcher, Live Reloads
  • Provides sub-second compile time incremental rebuilds
  • Unit of abstraction is a directory

Overview

Plugins

  • Has a plugin based ecosystem - over 600 plugins
  • Each plugin caches it's build output as appropriate
  • Chainable Plugins - all plugins return a tree
  • Can perform asynchronous work

  • Can use common caching code provided by the broccoli-filter package

  • No Partial Rebuilding (Brunch)
    • Adds unnecessary complexity
    • Makes file deletion tricky
  • No Parallelism
    • Leads to race conditions
    • Not much performance benefits
  • No In-Memory API (Gulp)
    • Just use the file system
    • The bandwidth of modern SSDs make the overhead negligible.

Comparison with other build tools

Ember CLI

Default Plugins

broccoli-babel-transpiler ES6
broccoli-config-loader Writes the environment files
broccoli-config-replace Templating using a config and regex
broccoli-funnel Reduce node to only a subset of the files
broccoli-kitchen-sink-helpers Collection of helper functions
broccoli-merge-trees Merge multiple trees into one
broccoli-plugin Base class
broccoli-sane-watcher Wrapper for node 'sane' module
broccoli-source Refer to source directories on the file system
broccoli-sourcemap-concat Generates source maps
broccoli-viz Visualizations
broccoli-filter Helper base class to map files one-to-one

Demo

Resources

Questions?

Thank You

Made with Slides.com