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.

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
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
●
●

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?