Slide 1

Slide 1 text

The streaming build system

Slide 2

Slide 2 text

Levan Velijanashvili [email protected] twitter.com/Stichoza github.com/Stichoza

Slide 3

Slide 3 text

WHY BUILD SYSTEM Minify Mangle File concatenation Sprite generation Image optimization Live Server Testing (TTD) Deployment Fun!

Slide 4

Slide 4 text

Code over config Stream based Fast, Efficient Simple API WHY GULP

Slide 5

Slide 5 text

CODE OVER CONFIG

Slide 6

Slide 6 text

grunt.initConfig({ sass: { dist: { files: [{ cwd: 'styles', src: '**/*.scss', dest: '../.tmp/styles', expand: true, ext: '.css' }] } }, autoprefixer: { options: ['last 1 version'], dist: { files: [{ expand: true, cwd: '.tmp/styles', src: '{,*/}*.css', dest: 'dist/styles' }] } }, watch: { styles: { files: ['styles/{,*/}*.scss'], tasks: ['sass:dist', 'autoprefixer:dist'] } } }); grunt.registerTask('default', ['watch']); gulp.task('sass', function () { gulp.src('styles/**/*.scss') .pipe(sass()) .pipe(autoprefixer('last 1 version')) .pipe(gulp.dest('dist/styles')); }); gulp.task('default', function() { gulp.watch('styles/**/*.scss',function(){ gulp.run('sass'); }); }); CODE OVER CONFIG

Slide 7

Slide 7 text

STREAM BASED

Slide 8

Slide 8 text

RTFM: nodejs.org/api/stream.html STREAM BASED

Slide 9

Slide 9 text

ls -Sla | grep "^d" | head -n 2 STREAM BASED

Slide 10

Slide 10 text

STREAM BASED a.styl b.styl c.styl minify auto prefix concat d.css How gulp works (and how we think it should)

Slide 11

Slide 11 text

STREAM BASED a.styl b.styl c.styl minify auto prefix concat d.css How grunt works (not how we think it should) foo.tmp bar.tmp baz.tmp hei.tmp heu.tmp hoy.tmp Intensive I/O

Slide 12

Slide 12 text

SIMPLE API

Slide 13

Slide 13 text

gulp.task() SIMPLE API

Slide 14

Slide 14 text

gulp.src() SIMPLE API

Slide 15

Slide 15 text

gulp.dist() SIMPLE API

Slide 16

Slide 16 text

SIMPLE API gulp.watch()

Slide 17

Slide 17 text

Watch this video: youtu.be/czAvYaPWBko

Slide 18

Slide 18 text

FAST MAXIMUM CONCURRENCY

Slide 19

Slide 19 text

FAST Orchestrator sequencing and executing tasks in maximum concurrency

Slide 20

Slide 20 text

FAST

Slide 21

Slide 21 text

FAST 3-4min Manual 1300ms Grunt 210ms Gulp

Slide 22

Slide 22 text

OTHER Excellent Plugins Intuitive Laravel Elixir

Slide 23

Slide 23 text

.pipe(questions())

Slide 24

Slide 24 text

[email protected] twitter.com/Stichoza github.com/Stichoza Thanks!