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.
   

   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ć
    mladen@koder.rs
    

    View Slide

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

    View Slide