Improving your workflow with Gulp

Improving your workflow with Gulp

Transcript

1. Improving your workflow twitter.com/alexnewmn github.com/alex.newman alexnewman.io
2. Improving your workflow • Why should you use gulp? • gulp API • gulp vs Grunt • The power of gulp • The future of gulp • Gotchas • Questions at the end
3. Quick Facts • 44,000 downloads a day • Used by ◦ Bede Gaming ◦ Google ◦ Netflix ◦ Soundcloud • Uses Node.js and Orchestrator.js • It’s open source!
4. Why another task runner? • gulp aims to be simple for users • gulp plugins should do one thing well • Can work with existing node modules • Grunt was great but did a few things wrong...
5. Why use gulp? • Code over config
6. Code over config
7. Why use gulp? • Code over config • Minimal API • Uses streams
8. Streams? “If you dig a trench on a hill and fill up the high end using a water hose the water will run down the hill along the trench” Tim Caswell - HowToNode.org
9. • Streams use ‘pipes’, which allow us to pass data through the stream. • • • Streams are what makes gulp fast Streams?
10. Why use gulp? • Code over config • Minimal API • Uses streams • Runs with maximum concurrency
11. Maximum Concurrency • Runs tasks together using orchestrator • Can minify your js and css at the same time • Speed!!!
12. Why use gulp? • Code over config • Minimal API • Uses streams • Runs with maximum concurrency • Fast!
13. gulp API
14. gulp.task • Define a task name • Set dependencies if required • Can run multiple plugins main.scss sass autoprefix min main.css
15. gulp
16. gulp grunt...
17. gulp.task
18. gulp API
19. gulp.src • Specify the file to be processed • Can be a string or an array of files • Can change the base of the file • Accepts globbing - **/*.scss
20. gulp.src
21. gulp API
22. gulp.dest • Where the processed file should be saved • Can be used with src’s base option
23. gulp API
24. gulp.watch • Watch files and run tasks when files change • Accepts globbing - **/*.js
25. gulp API That’s it!
27. gulp • Uses streams • Easy to maintain • Fast! • Runs concurrently • Fast growing Grunt vs
28. gulp • Uses streams • Easy to maintain • Fast! • Runs concurrently • Fast growing Grunt vs • Has to run in order • Difficult to maintain • Slow(er)! • Writes to Temp files • More plugins • Paved the way
29. Task runners at Bede • Switched to gulp in August 2014 • Build times were almost twice as fast with twice as many files to process • Can use arrays instead of specifying each file • gulp in TeamCity for build tasks
30. The power of gulp • gulp can run a lot of tasks and processes easily and very fast • Html minification, css minification, js linting, image compression, clean files, browserify bundles… • Can use plugins without importing each one
31. The power of gulp
32. The power of gulp
33. The future of gulp • gulp 4 is in the line • •
34. gulp.parallel and gulp.series
35. The future of gulp • gulp 4 is in the line • • • ES6
36. ES6 Support
37. The future of gulp • gulp 4 is in the line • • • ES6 • Error handling!
38. Gotchas • Error handling • Errors break the stream, cancelling the task • Can be intimidating • Easy to rely on gulp plugins
39. Summary • Why should you use gulp? • Minimal API • gulp vs Grunt • The power of gulp • The future of gulp • Gotchas
40. alexnewman.io github.com/alexnewmannn twitter.com/alexnewmn All code available on my github in the FrontendNE-Talk repository
41. Questions?