Improving your workflow with gulp
4 likes589 views
gulp is a task runner tool that improves workflow. It uses streams to run tasks concurrently for maximum speed. gulp has a minimal API with tasks, src and dest functions. It is faster than Grunt as it runs tasks concurrently without writing to temporary files. The future of gulp includes support for ES6 and improved error handling in gulp 4.
Improving your workflow with gulp
- 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
- 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
- 27. gulp ● Uses streams ● Easy to maintain ● Fast! ● Runs concurrently ● Fast growing Gruntvs
- 28. gulp ● Uses streams ● Easy to maintain ● Fast! ● Runs concurrently ● Fast growing Gruntvs ● 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 ● ●
- 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?