Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VTS184: Gulp, task runner

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.

A9934ebac3d430f4b6c7b215d07081ed?s=128

Mladen Đurić

April 26, 2018
Tweet

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