gulp - the streaming build system - Appsterdam Milan

38 %
62 %
Information about gulp - the streaming build system - Appsterdam Milan

Published on October 22, 2014

Author: granze



My talk about gulp @ Appsterdam Milan

Original HTML slides here:

Presentation made with Applause:

1. gulp The streaming build system Appsterdam Milan 23/10/2014

2. whoami Maurizio Mangione @granze Lead Frontend Developer Founder

3. Why gulp code­over­configuration speed easy to read and write NPM packages flexibility

4. ...and Grunt? we owe a big thanks to Grunt, but...

5. Build wars? Who cares! gulp is cool VS gulp is cool compared to Grunt

6. Streams bower search jquery | grep carousel Streams enable you to pass some data through a number of usually small functions, which will modify the data and then pass the modified data to the next function. “

7. How gulp works Vinyl a metadata object that describes a file Vinyl adapters (Vinyl­fs) A way to access these files Orchestrator A module for sequencing and executing tasks and dependencies in maximum concurrency

8. A common task Credits: Smashing Magazine

9. A common gulp task var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('scripts', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });

10. gulp APIs gulp.task(name[, deps], fn) gulp.src(globs[, options]) gulp.dest(path[, options])[, opts, cb])

11. A more "complex" example gulp.task('scripts', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); }); gulp.task('styles', function () { return gulp.src('scss/*.scss') .pipe(sass()) .pipe(gulp.dest('css')); }); gulp.task('default', ['scripts', 'styles']);

12. Error handling “ I’ll be completely honest with you: error management in gulp sucks currently. ­Eric Schoffstall

13. Plumber to the rescue! var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber'); gulp.task('styles', function () { return gulp.src('scss/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(gulp.dest('css')); });

14. The future gulp 4 better error handling task ordering (parallel/series) better APIs

15. Questions?

16. Keep in touch Twitter ­Github @granze Slides made with Applause

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...