Gulp 101 (demo)

Demo slides to '17 DevCamp talk submission

Transcript

1. felipe bernardes 02.06.2017@DEVCAMP automatização de workflow de desenvolvimento 101
2. ~ $ whoami felipebernardes http://felipebernardes.github.io #votorantim http://tegra.me 2.5
3. why automate? - productive development - consistent development pipeline - come on, it’s 2017 already
4. why Gulp? - vs. [grunt, webpack, browserify]... - easy to learn - easy to use - easy to integrate in your CI - why… not?
5. hummmm
6. We will learn about... - setup - tasks - plugins - globs - watchers
7. We will automate... - browser refresh with browserSync - google pagespeed insights with psi - image minification with Z - console.log removal with clog - css prefixes with autoprefixer - file revision with gulp-rev - unused css selectors removal with uncss - .properties -> json convertion with gulp-props - todo generation with gulp-todo - remote access with gulp-shell & gulp-ssh - responsivity screenshots with pageres
8. QuickStart
9. Setup
10. Setup npm install gulp-cli -g npm install gulp --save-dev touch gulpfile.js gulp --help
11. Tasks
12. Tasks <definição em uma frase>
13. Tasks gulp.task("sass", () => gulp.src("src/**/*.scss") .pipe(sass()) .pipe(concat("styles.css")) .pipe(gulp.dest("dist/css")) );
14. Plugins
15. Plugins <definição em uma frase>
16. Plugins const concat = require(“gulp-concat”), sass = require(“gulp-sass”); // gulp tasks...
17. Globs
18. Globs <definição em uma frase>
19. Globs gulp.task("sass", () => gulp.src("src/**/*.scss") .pipe(sass()) .pipe(concat("styles.css")) .pipe(gulp.dest("dist/css")) );
20. Globs <exemplo com .js>
21. Globs <exemplo com .pug>
22. Globs <exemplo de glob de config>
23. Watchers
24. Watchers <definição em uma frase>
25. Watchers <code snippet>
26. Automation
27. Browser Refresh with browserSync
28. BrowserSync <key features + gif da documentação>
29. Sync Task <code snippet>
30. <outras tasks do slide 7>
31. Further Reading - essential gulp plugins [link] - curated gulp modules [link] - gulp docs [link] - FrontEndBr Forum [link]
32. we're hiring! @sorocaba && @são paulo estagio@tegra.me vagas@tegra.me
33. obrigado! felipe.bernardes@tegra.me speakerdeck.com/felipebernardes that’s all, folks 02.06.2017