modern build workflows with broccoli - scotland js 2014
DESCRIPTION
Video at http://vimeo.com/96508134TRANSCRIPT
![Page 1: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/1.jpg)
Broccoli build tool
#sjsJo
Scotland JS 2014
@jo_liss
![Page 2: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/2.jpg)
!
Background
#sjsJo
![Page 3: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/3.jpg)
.coffee
.scss
concat
minify
.handlebars
#sjsJo
![Page 4: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/4.jpg)
grunt watch
#sjsJo
![Page 5: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/5.jpg)
...
#sjsJo
![Page 6: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/6.jpg)
10 sec
#sjsJo
![Page 7: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/7.jpg)
Broccoli
#sjsJo
![Page 8: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/8.jpg)
Part 1: Demo Part 2: Plugin API Part 3: Ecosystem
#sjsJo
![Page 9: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/9.jpg)
Part 1: demo time
#sjsJo
![Page 10: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/10.jpg)
‘lib’
libCompiledCoffeeScript
‘vendor’
javascripts
appJs
concat
‘styles’Sass
appCss ‘public’
output
#sjsJo
![Page 11: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/11.jpg)
#sjsJo
![Page 12: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/12.jpg)
⚠ beta software ahead
#sjsJo
![Page 13: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/13.jpg)
Part 2: Plugin API#sjsJo
![Page 14: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/14.jpg)
tiny API !
big helper libraries
#sjsJo
![Page 15: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/15.jpg)
broccoli-writer
#sjsJo
![Page 16: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/16.jpg)
broccoli-filter !
for 1:1 file relationships
#sjsJo
![Page 17: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/17.jpg)
broccoli-filter: !
processString = function (string) { return newString }
#sjsJo
![Page 18: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/18.jpg)
// CoffeeFilter subclasses Filter !
!
CoffeeFilter.prototype.extensions = ['coffee'] CoffeeFilter.prototype.targetExtension = 'js' !
CoffeeFilter.prototype.processString = function (string) { return coffeeScript.compile(string) }
#sjsJo
![Page 19: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/19.jpg)
broccoli-filter has cache :)
![Page 20: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/20.jpg)
Part 3: Ecosystem !
#sjsJo
![Page 21: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/21.jpg)
Broccoli is a small library
#sjsJo
![Page 22: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/22.jpg)
Broccoli <3 Grunt
#sjsJo
![Page 24: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/24.jpg)
Integrate with backends
#sjsJo
![Page 25: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/25.jpg)
default stacks e.g. ember-cli
![Page 26: Modern build workflows with Broccoli - Scotland JS 2014](https://reader034.vdocument.in/reader034/viewer/2022052310/5564af40d8b42a3e618b4763/html5/thumbnails/26.jpg)
!
bit.ly/broccoli-architecture
#sjsJo
@jo_liss