Drupal-Nis: Good Guy Gulp

Second Drupal meetup in Niš with a bit updated Gulp presentation.

Eventbrite event: https://www.eventbrite.com/e/drupal-meetup-nis-tickets-45232609954

YouTube video: (soon to be published)

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 Good Guy Gulp v.2 2018-05-19 ]{ Good Guy Gulp TASK RUNNER 1 Mladen Đurić @MacMladen Drupal Meetup Niš Deli prostor, 19.05.2018.
2. @MacMladen ]{ 2 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy
3. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 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 ]{ Good Guy Gulp v.2 2018-05-19 All about us ]{ODER 4
5. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ Gulp OK, TASK RUNNER, BUT…? 5
6. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ 6 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.
7. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INTRODUCE YOURSELF! 7 • Your… style weapon of choice? (gulp, grunt, npm…) • Your field? (frontend, developer) • Coding experience? (none, some, pro)
8. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 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 8
9. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ WHY TASK RUNNERS? 9
10. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 10 DRY
11. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 11 DON’T REPEAT YOURSELF
12. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ TASK RUNNERS 12
13. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 HOW ABOUT…? 13
14. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOOLS 14
15. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 NODE PACKAGE MANAGER 15
16. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GRUNT 16
17. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 WEBPACK 17
18. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ NODE ENVIRONMENT 18
19. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INSTALL NODE ON YOUR SYSTEM 19
20. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INSTALL NODE ON YOUR SYSTEM 20
21. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INITIALIZE PROJECT 21
22. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ STARTING WITH GULP 22
23. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 WHICH GULP 3 OR 4? 23
24. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 ADD GULP 24
25. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 CODE OVER CONFIGURATION 25
26. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP METHODS 26 gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name [, deps, fn]) gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])
27. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP 4 METHODS 27 gulp.src(globs[, options]) - Emit files matching one or more globs gulp.dest(path[, options]) - Write files to directories gulp.symlink(folder[, options]) - Write files to symlinks gulp.task([name,] fn) - Define tasks gulp.lastRun(taskName, [timeResolution]) - Timestamp of last OK run gulp.parallel(...tasks) - Run tasks in parallel gulp.series(…tasks) - Run tasks in series gulp.watch(globs[, opts][, fn]) - Do something when a file changes gulp.tree(options) - Get the tree of tasks gulp.registry([registry])- Get or set the task registry
28. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 28
29. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 29
30. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 30
31. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ COPY RESOURCES 31
32. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SRC -> DEST 32
33. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ COMPILE SCSS 33
34. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP-SASS 34
35. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ UGLIFY JS 35
36. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 CONCAT, UGLIFY 36
37. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ WATCH FOR CHANGE 37
38. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP.WATCH 38
39. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ REFRESH DEVICES 39
40. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 STATIC RELOAD (HTML) 40
41. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 DYNAMIC RELOAD (USING PHP BUILT-IN SERVER) 41
42. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ GULP REFERENCES 42
43. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULPJS.ORG 43
44. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOPTAL 44
45. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOPTAL 45
46. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP API 46
47. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP DOCUMENTATION 47
48. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 DON’T MAKE A PLUGIN 48
49. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SMASHING ON GULP 49
50. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP VIDEO TUTORIAL 50
51. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SCOTCH ON GULP 51
52. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 MLADEN ĐURIĆ a.k.a MacMladen Professional Development School 52
53. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ THANKS! 53 Mladen Đurić @MacMladen
54. @MacMladen Good Guy Gulp v.2 2018-05-19 ]{ 54 Q & A Mladen Đurić mladen@koder.rs
55. @MacMladen ]{ Good Guy Gulp v.2 2018-05-19 55