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.
   

   View Slide

2. @MacMladen
   ]{
   2
   MLADEN ĐURIĆ
   a.k.a MacMladen
   $ whoami
   A very boring incompetent guy
   

   View Slide

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.
   

   View Slide

4. @MacMladen
   ]{
   Good Guy Gulp v.2 2018-05-19
   All about us
   ]{ODER
   4
   

   View Slide

5. @MacMladen Good Guy Gulp v.2 2018-05-19
   ]{
   Gulp
   OK, TASK RUNNER, BUT…?
   5
   

   View Slide

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.
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

9. @MacMladen Good Guy Gulp v.2 2018-05-19
   ]{
   WHY TASK RUNNERS?
   9
   

   View Slide

10. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19 10
    DRY
    

    View Slide

11. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19 11
    DON’T
    REPEAT
    YOURSELF
    

    View Slide

12. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    TASK RUNNERS
    12
    

    View Slide

13. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    HOW ABOUT…?
    13
    

    View Slide

14. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    TOOLS
    14
    

    View Slide

15. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    NODE PACKAGE MANAGER
    15
    

    View Slide

16. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GRUNT
    16
    

    View Slide

17. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    WEBPACK
    17
    

    View Slide

18. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    NODE ENVIRONMENT
    18
    

    View Slide

19. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    INSTALL NODE ON YOUR SYSTEM
    19
    

    View Slide

20. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    INSTALL NODE ON YOUR SYSTEM
    20
    

    View Slide

21. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    INITIALIZE PROJECT
    21
    

    View Slide

22. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    STARTING WITH GULP
    22
    

    View Slide

23. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    WHICH GULP 3 OR 4?
    23
    

    View Slide

24. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    ADD GULP
    24
    

    View Slide

25. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    CODE OVER CONFIGURATION
    25
    

    View Slide

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

    View Slide

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
    

    View Slide

28. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP FILE ANATOMY
    28
    

    View Slide

29. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP FILE ANATOMY
    29
    

    View Slide

30. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP FILE ANATOMY
    30
    

    View Slide

31. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    COPY RESOURCES
    31
    

    View Slide

32. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    SRC -> DEST
    32
    

    View Slide

33. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    COMPILE SCSS
    33
    

    View Slide

34. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP-SASS
    34
    

    View Slide

35. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    UGLIFY JS
    35
    

    View Slide

36. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    CONCAT, UGLIFY
    36
    

    View Slide

37. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    WATCH FOR CHANGE
    37
    

    View Slide

38. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP.WATCH
    38
    

    View Slide

39. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    REFRESH DEVICES
    39
    

    View Slide

40. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    STATIC RELOAD (HTML)
    40
    

    View Slide

41. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    DYNAMIC RELOAD (USING PHP BUILT-IN SERVER)
    41
    

    View Slide

42. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    GULP REFERENCES
    42
    

    View Slide

43. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULPJS.ORG
    43
    

    View Slide

44. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    TOPTAL
    44
    

    View Slide

45. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    TOPTAL
    45
    

    View Slide

46. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP API
    46
    

    View Slide

47. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP DOCUMENTATION
    47
    

    View Slide

48. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    DON’T MAKE A PLUGIN
    48
    

    View Slide

49. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    SMASHING ON GULP
    49
    

    View Slide

50. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    GULP VIDEO TUTORIAL
    50
    

    View Slide

51. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    SCOTCH ON GULP
    51
    

    View Slide

52. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19
    MLADEN
    ĐURIĆ
    a.k.a MacMladen
    Professional
    Development
    School
    52
    

    View Slide

53. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    THANKS!
    53
    Mladen Đurić
    @MacMladen
    

    View Slide

54. @MacMladen Good Guy Gulp v.2 2018-05-19
    ]{
    54
    Q & A
    Mladen Đurić
    mladen@koder.rs
    

    View Slide

55. @MacMladen
    ]{
    Good Guy Gulp v.2 2018-05-19 55
    

    View Slide