modern build workflows with broccoli - scotland js 2014

26
Broccoli build tool #sjsJo Scotland JS 2014 @jo_liss

Upload: joliss

Post on 27-May-2015

287 views

Category:

Software


1 download

DESCRIPTION

Video at http://vimeo.com/96508134

TRANSCRIPT

Page 1: Modern build workflows with Broccoli - Scotland JS 2014

Broccoli build tool

#sjsJo

Scotland JS 2014

@jo_liss

Page 2: Modern build workflows with Broccoli - Scotland JS 2014

!

Background

#sjsJo

Page 3: Modern build workflows with Broccoli - Scotland JS 2014

.coffee

.scss

concat

minify

.handlebars

#sjsJo

Page 4: Modern build workflows with Broccoli - Scotland JS 2014

grunt watch

#sjsJo

Page 5: Modern build workflows with Broccoli - Scotland JS 2014

...

#sjsJo

Page 6: Modern build workflows with Broccoli - Scotland JS 2014

10 sec

#sjsJo

Page 7: Modern build workflows with Broccoli - Scotland JS 2014

Broccoli

#sjsJo

Page 8: Modern build workflows with Broccoli - Scotland JS 2014

Part 1: Demo Part 2: Plugin API Part 3: Ecosystem

#sjsJo

Page 9: Modern build workflows with Broccoli - Scotland JS 2014

Part 1: demo time

#sjsJo

Page 10: Modern build workflows with Broccoli - Scotland JS 2014

‘lib’

libCompiledCoffeeScript

‘vendor’

javascripts

appJs

concat

‘styles’Sass

appCss ‘public’

output

#sjsJo

Page 11: Modern build workflows with Broccoli - Scotland JS 2014

#sjsJo

Page 12: Modern build workflows with Broccoli - Scotland JS 2014

⚠ beta software ahead

#sjsJo

Page 13: Modern build workflows with Broccoli - Scotland JS 2014

Part 2: Plugin API#sjsJo

Page 14: Modern build workflows with Broccoli - Scotland JS 2014

tiny API !

big helper libraries

#sjsJo

Page 15: Modern build workflows with Broccoli - Scotland JS 2014

broccoli-writer

#sjsJo

Page 16: Modern build workflows with Broccoli - Scotland JS 2014

broccoli-filter !

for 1:1 file relationships

#sjsJo

Page 17: Modern build workflows with Broccoli - Scotland JS 2014

broccoli-filter: !

processString = function (string) { return newString }

#sjsJo

Page 18: Modern build workflows with Broccoli - Scotland JS 2014

// 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

broccoli-filter has cache :)

Page 20: Modern build workflows with Broccoli - Scotland JS 2014

Part 3: Ecosystem !

#sjsJo

Page 21: Modern build workflows with Broccoli - Scotland JS 2014

Broccoli is a small library

#sjsJo

Page 22: Modern build workflows with Broccoli - Scotland JS 2014

Broccoli <3 Grunt

#sjsJo

Page 23: Modern build workflows with Broccoli - Scotland JS 2014

grunt-broccoli

#sjsJo

Page 24: Modern build workflows with Broccoli - Scotland JS 2014

Integrate with backends

#sjsJo

Page 25: Modern build workflows with Broccoli - Scotland JS 2014

default stacks e.g. ember-cli

Page 26: Modern build workflows with Broccoli - Scotland JS 2014

!

bit.ly/broccoli-architecture

#sjsJo

@jo_liss