Lightning talk given at SanDiego.js Meetup September 2016 on Broccoli build tool outside of the Ember.js ecosystem.

1. BUILD TOOL
BROCCOLI

2. WAT?BROCCOLI

3. WAT?
Fast build pipeline from Ember
that you can use without Ember
BROCCOLI

4. WAT?
Composable plugin system
Highly performant with sub-second speeds
Easy to setup and use in a new project
BROCCOLI

5. HOW?
Given the above project structure…
.
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
BROCCOLI

6. .
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
HOW?
We want to bundle all this stuff and provide it to
the end user
BROCCOLI

7. HOW?
$> npm install -g broccoli-cli
$> npm install --save-dev broccoli
BROCCOLI

8. HOW?
$> npm i --save-dev broccoli-concat
$> npm i --save-dev broccoli-merge-trees
$> npm i --save-dev broccoli-static-compiler
$> npm i --save-dev broccoli-uglify-js
BROCCOLI

9. HOW?
$> vim Brocfile.js
BROCCOLI

10. .
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
HOW?
pick this directly
BROCCOLI

11. HOW?
const pickFiles = require(‘broccoli-static-compiler');
const mergeTrees = require('broccoli-merge-trees');
const app = 'app';
let appHTML = pickFiles(app, {
srcDir: '/',
files: ['index.html'],
destDir: '/'
});
module.exports = mergeTrees([appHTML]);
BROCCOLI

12. .
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
HOW?
pick this directly too
BROCCOLI

13. HOW?
const pickFiles = require(‘broccoli-static-compiler');
const mergeTrees = require('broccoli-merge-trees');
const app = 'app';
let appHTML = pickFiles(app, {
srcDir: '/',
files: ['index.html'],
destDir: '/'
});
let appImages = pickFiles(app, {
srcDir: '/img',
files: ['**/*'],
destDir: '/img'
});
module.exports = mergeTrees([appHTML, appImages]);
BROCCOLI

14. .
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
HOW?
put ‘em together and uglify
BROCCOLI

15. HOW?
const pickFiles = require(‘broccoli-static-compiler’);
const mergeTrees = require('broccoli-merge-trees');
const concatenate = require(‘broccoli-concat');
const uglifyJS = require('broccoli-uglify-js');
// …
let appJS = concatenate(app, {
inputFiles: ['js/**/*.js'],
outputFile: '/app.js'
});
appJS = uglifyJS(appJS, {
compress: true
});
module.exports = mergeTrees([appHTML, appImages, appJS]);
BROCCOLI

16. .
+-- app
| +-- css
| +-- js
| +-- img
| +-- index.html
+-- node_modules/
+-- .gitignore
+-- Brocfile.js
+-- README.md
+-- package.json
HOW?
put ‘em together
BROCCOLI

17. HOW?
const pickFiles = require(‘broccoli-static-compiler’);
const mergeTrees = require('broccoli-merge-trees');
const concatenate = require(‘broccoli-concat');
const uglifyJS = require('broccoli-uglify-js');
// …
let appCSS = concatenate(app, {
inputFiles: ['css/**/*.css'],
outputFile: '/app.css'
});
module.exports = mergeTrees([appHTML, appImages, appJS, appCSS]);
BROCCOLI

18. HOW?$> broccoli serve
Serving on http://localhost:4200
Slowest Trees | Total
----------------------------------------------+---------------------
SourceMapConcat | 16ms
UglifyJSFilter | 11ms
BroccoliMergeTrees | 11ms
StaticCompiler | 6ms
SimpleConcat | 3ms
StaticCompiler | 3ms
Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
SourceMapConcat (1) | 16ms
UglifyJSFilter (1) | 11ms
BroccoliMergeTrees (1) | 11ms
StaticCompiler (2) | 9ms (4 ms)
SimpleConcat (1) | 3ms
Built - 55 ms @ Fri Sep 02 2016 16:01:26 GMT-0400 (EDT)
BROCCOLI

19. HOW?
$> broccoli build 'dist'
BROCCOLI

20. NOW WHUT?BROCCOLI

21. NOW WHUT?BROCCOLI
Transpile ES6 modules with Babel
https://github.com/givanse/broccoli-babel-examples
Add live-reloading
https://github.com/stfsy/broccoli-livereload
Learn more about broccoli extensibility
https://www.youtube.com/watch?v=h-dy5tHm2TA

22. @CALIGOANIMUS
THANKS!