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.

Mladen Đurić

April 26, 2018
Tweet

More Decks by Mladen Đurić

Other Decks in Programming

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.

    View Slide

  2. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 2
    MLADEN ĐURIĆ
    a.k.a MacMladen
    $ whoami
    A very boring incompetent guy

    View Slide

  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.

    View Slide

  4. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    All about us
    ]{ODER
    4

    View Slide

  5. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 5
    ENROLL TO GET NOTIFIED

    View Slide

  6. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 6
    ]{oder for VTŠ students:
    Professional

    Development

    Summer Bootcamp
    …more info soon!

    View Slide

  7. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    Gulp
    OK, TASK RUNNER, BUT…?
    7

    View Slide

  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.

    View Slide

  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)

    View Slide

  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

    View Slide

  11. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    WHY TASK RUNNERS?
    11

    View Slide

  12. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 12
    DRY

    View Slide

  13. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 13
    DON’T
    REPEAT
    YOURSELF

    View Slide

  14. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    TASK RUNNERS
    14

    View Slide

  15. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    HOW ABOUT…?
    15

    View Slide

  16. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    TOOLS
    16

    View Slide

  17. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    NODE PACKAGE MANAGER
    17

    View Slide

  18. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GRUNT
    18

    View Slide

  19. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    WEBPACK
    19

    View Slide

  20. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    NODE ENVIRONMENT
    20

    View Slide

  21. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    INSTALL NODE ON YOUR SYSTEM
    21

    View Slide

  22. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    INSTALL NODE ON YOUR SYSTEM
    22

    View Slide

  23. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    INITIALIZE PROJECT
    23

    View Slide

  24. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    STARTING WITH GULP
    24

    View Slide

  25. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    ADD GULP
    25

    View Slide

  26. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    CODE OVER CONFIGURATION
    26

    View Slide

  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])

    View Slide

  28. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP FILE ANATOMY
    28

    View Slide

  29. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP FILE ANATOMY
    29

    View Slide

  30. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP FILE ANATOMY
    30

    View Slide

  31. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    COPY RESOURCES
    31

    View Slide

  32. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    SRC -> DEST
    32

    View Slide

  33. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    COMPILE SCSS
    33

    View Slide

  34. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP-SASS
    34

    View Slide

  35. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    UGLIFY JS
    35

    View Slide

  36. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    CONCAT, UGLIFY
    36

    View Slide

  37. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    WATCH FOR CHANGE
    37

    View Slide

  38. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP.WATCH
    38

    View Slide

  39. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    REFRESH DEVICES
    39

    View Slide

  40. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    STATIC RELOAD (HTML)
    40

    View Slide

  41. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    DYNAMIC RELOAD (USING PHP BUILT-IN SERVER)
    41

    View Slide

  42. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    GULP REFERENCES
    42

    View Slide

  43. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULPJS.ORG
    43

    View Slide

  44. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    TOPTAL
    44

    View Slide

  45. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    TOPTAL
    45

    View Slide

  46. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP API
    46

    View Slide

  47. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP DOCUMENTATION
    47

    View Slide

  48. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    DON’T MAKE A PLUGIN
    48

    View Slide

  49. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    SMASHING ON GULP
    49

    View Slide

  50. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    GULP VIDEO TUTORIAL
    50

    View Slide

  51. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    SCOTCH ON GULP
    51

    View Slide

  52. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26
    MLADEN
    ĐURIĆ
    a.k.a MacMladen
    Professional
    Development
    School
    52

    View Slide

  53. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    THANKS!
    53
    Mladen Đurić
    @MacMladen

    View Slide

  54. @MacMladen Gulp — task runner v.1 2018-04-26
    ]{
    54
    Q & A
    Mladen Đurić
    [email protected]

    View Slide

  55. @MacMladen Gulp — task runner
    ]{
    v.1 2018-04-26 55

    View Slide