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
- https://github.com/broccolijs/broccoli/tree/master/docs
- https://www.solitr.com/blog/2014/02/broccoli-first-release/
- http://walkercoderanger.com/blog/2015/06/state-of-js-build-tools-2015/
- https://hashrocket.com/blog/posts/broccoli-the-build-tool-not-the-vegetable
- http://moduscreate.com/better-builds-begin-with-broccoli/
- http://blog.bguiz.com/2014/06/16/broccolijs-plugin-how-to-write/
- http://givan.se/broccolijs-from-scratch/
Questions?
Thank You
Broccoli The asset pipeline for ambitious applications