VTS184: Gulp, task runner

This is the fourth lecture in cooperation with High Technical School in Novi Sad (Visoka tehnička škola strukovnih studija) held on April 26, 2018.

Meetup event: https://www.meetup.com/koderrs/events/249966347/

YouTube video: https://youtu.be/kRqu-uvlxxc

Gulp is a tool to automate repetitive tasks in everyday routine of a serious frontend developer so we can focus on more important thing like our work itself.

Gulp can help you with

— Translating Sass to CSS (using node-sass)
— Check if the coding style is right (linting)
— Optimize and compress CSS (compressed output style)
— Optimize and reduce the size of images (imagemin)
— Optimize and reduce JavaScript (uglify)
— Reload all devices with new HTML/CSS/JS/PHP (yes, plural, browser-sync)
— Output different versions of the same files (production and dev)
— To gather and convert fonts for web
— ...to repeat all mentioned as needed.

Transcript

1. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ Gulp TASK RUNNER 1 Mladen Đurić @MacMladen Viša tehnička škola strukovnih studija Novi Sad Predavaona, 26.04.2018.
2. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 2 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy
3. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 3 As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organized first computer club and gave first BASIC course. It was around 1982. In 2016 I have started a Professional Web Development School ]{oder.
4. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 All about us ]{ODER 4
5. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 5 ENROLL TO GET NOTIFIED
6. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 6 ]{oder for VTŠ students: Professional
 Development
 Summer Bootcamp …more info soon!
7. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ Gulp OK, TASK RUNNER, BUT…? 7
8. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ 8 Gulp nodejs streams task runner gulp.js is an open-source JavaScript toolkit, 
 used as a streaming build system in front-end web development. It is built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single- purposed plugins to carry them out. The gulp ecosystem includes more than 300 such plugins.
9. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 INTRODUCE YOURSELF! 9 • Your… style weapon of choice? (gulp, grunt, npm…) • Your field? (frontend, developer) • Coding experience? (none, some, pro)
10. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 TIMETABLE: 1. Why task runners 2. Task runners 3. Node environment 4. Starting with gulp 5. Copy resources 6. Compile SCSS 7. Uglify JS 8. Watch for change 9. Refresh devices 10. Gulp references 10
11. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ WHY TASK RUNNERS? 11
12. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 12 DRY
13. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 13 DON’T REPEAT YOURSELF
14. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ TASK RUNNERS 14
15. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 HOW ABOUT…? 15
16. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 TOOLS 16
17. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 NODE PACKAGE MANAGER 17
18. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GRUNT 18
19. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 WEBPACK 19
20. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ NODE ENVIRONMENT 20
21. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 INSTALL NODE ON YOUR SYSTEM 21
22. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 INSTALL NODE ON YOUR SYSTEM 22
23. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 INITIALIZE PROJECT 23
24. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ STARTING WITH GULP 24
25. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 ADD GULP 25
26. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 CODE OVER CONFIGURATION 26
27. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP METHODS 27 gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name [, deps, fn]) gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])
28. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP FILE ANATOMY 28
29. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP FILE ANATOMY 29
30. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP FILE ANATOMY 30
31. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ COPY RESOURCES 31
32. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 SRC -> DEST 32
33. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ COMPILE SCSS 33
34. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP-SASS 34
35. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ UGLIFY JS 35
36. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 CONCAT, UGLIFY 36
37. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ WATCH FOR CHANGE 37
38. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP.WATCH 38
39. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ REFRESH DEVICES 39
40. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 STATIC RELOAD (HTML) 40
41. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 DYNAMIC RELOAD (USING PHP BUILT-IN SERVER) 41
42. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ GULP REFERENCES 42
43. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULPJS.ORG 43
44. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 TOPTAL 44
45. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 TOPTAL 45
46. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP API 46
47. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP DOCUMENTATION 47
48. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 DON’T MAKE A PLUGIN 48
49. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 SMASHING ON GULP 49
50. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 GULP VIDEO TUTORIAL 50
51. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 SCOTCH ON GULP 51
52. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 MLADEN ĐURIĆ a.k.a MacMladen Professional Development School 52
53. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ THANKS! 53 Mladen Đurić @MacMladen
54. @MacMladen Gulp — task runner v.1 2018-04-26 ]{ 54 Q & A Mladen Đurić mladen@koder.rs
55. @MacMladen Gulp — task runner ]{ v.1 2018-04-26 55