Gulping ALL the things

CodeMash 2017 & Detroit.Code() 2017 talk.

Transcript

1. Gulping All The Things
   

   View Slide

2. Chris DeMars
   @saltnburnem
   

   View Slide

3. @saltnburnem | Chris DeMars
   Slides
   http://bit.ly/2il6OZx
   

   View Slide

4. @saltnburnem | Chris DeMars
   @TalesFTScript
   Coming Soon!
   

   View Slide

5. @saltnburnem | Chris DeMars
   Free Stickers?
   !
   

   View Slide

6. @saltnburnem | Chris DeMars
   Good Ole’ Build Systems
   OR
   Asset Pipeline(s)
   

   View Slide

7. @saltnburnem | Chris DeMars
   What are these things?
   

   View Slide

8. @saltnburnem | Chris DeMars
   What are these things?
   Good Question
   

   View Slide

9. @saltnburnem | Chris DeMars
   Tool
   

   View Slide

10. @saltnburnem | Chris DeMars
    A set of tasks that help to
    automate the Web workflow.
    

    View Slide

11. @saltnburnem | Chris DeMars
    

    View Slide

12. @saltnburnem | Chris DeMars
    

    View Slide

13. @saltnburnem | Chris DeMars
    So…Build Systems
    

    View Slide

14. @saltnburnem | Chris DeMars
    

    View Slide

15. @saltnburnem | Chris DeMars
    

    View Slide

16. @saltnburnem | Chris DeMars
    

    View Slide

17. @saltnburnem | Chris DeMars
    

    View Slide

18. @saltnburnem | Chris DeMars
    

    View Slide

19. @saltnburnem | Chris DeMars
    ✨
    ✨
    

    View Slide

20. @saltnburnem | Chris DeMars
    What is Gulp?
    

    View Slide

21. @saltnburnem | Chris DeMars
    

    View Slide

22. @saltnburnem | Chris DeMars
    X
    O
    

    View Slide

23. @saltnburnem | Chris DeMars
    

    View Slide

24. @saltnburnem | Chris DeMars
    Gulp is a streaming build system, by using
    node’s streams, file manipulation is all done
    in memory, and a file isn’t written until you
    tell it to do so.
    “
    “
    - https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
    

    View Slide

25. @saltnburnem | Chris DeMars
    

    View Slide

26. @saltnburnem | Chris DeMars
    

    View Slide

27. @saltnburnem | Chris DeMars
    One pretty cool thing
    about Gulp!
    

    View Slide

28. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    

    View Slide

29. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    x
    

    View Slide

30. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    x
    4
    

    View Slide

31. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    gulp.task
    x
    4
    

    View Slide

32. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    gulp.task
    gulp.run
    x
    4
    

    View Slide

33. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    gulp.watch
    gulp.task
    gulp.run
    x
    4
    

    View Slide

34. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    gulp.src
    gulp.watch
    gulp.task
    gulp.run
    x
    4
    

    View Slide

35. @saltnburnem | Chris DeMars
    Only 5 functions to learn!
    gulp.src
    gulp.dest
    gulp.watch
    gulp.task
    gulp.run
    x
    4
    

    View Slide

36. @saltnburnem | Chris DeMars
    gulp.task
    gulp.task( , , {};
    

    View Slide

37. @saltnburnem | Chris DeMars
    gulp.task
    gulp.task( , , {};
    'name'
    

    View Slide

38. @saltnburnem | Chris DeMars
    gulp.task
    gulp.task( , , {};
    'name' [deps]
    

    View Slide

39. @saltnburnem | Chris DeMars
    gulp.task
    gulp.task( , , {};
    'name' [deps] function ()
    

    View Slide

40. @saltnburnem | Chris DeMars
    gulp.watch
    gulp.watch( , );
    

    View Slide

41. @saltnburnem | Chris DeMars
    gulp.watch
    gulp.watch( , );
    'glob'
    

    View Slide

42. @saltnburnem | Chris DeMars
    gulp.watch
    gulp.watch( , );
    'glob' [tasks]
    

    View Slide

43. @saltnburnem | Chris DeMars
    gulp.task('watch', function () {
    gulp.watch('src/scss/*.scss', ['sass']);
    });
    

    View Slide

44. @saltnburnem | Chris DeMars
    gulp.src
    gulp.src( ,);
    

    View Slide

45. @saltnburnem | Chris DeMars
    gulp.src
    gulp.src( ,);
    'glob'
    

    View Slide

46. @saltnburnem | Chris DeMars
    gulp.src
    gulp.src( ,);
    'glob'
    return
    

    View Slide

47. @saltnburnem | Chris DeMars
    // Configure JS.
    gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(concat('script.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/js'));
    });
    

    View Slide

48. @saltnburnem | Chris DeMars
    // Configure JS.
    gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(concat('script.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/js'));
    });
    

    View Slide

49. @saltnburnem | Chris DeMars
    Default
    

    View Slide

50. @saltnburnem | Chris DeMars
    gulp.task('default',
    ['sass', 'js', 'images', ‘serve']
    );
    

    View Slide

51. @saltnburnem | Chris DeMars
    

    View Slide

52. @saltnburnem | Chris DeMars
    

    View Slide

53. @saltnburnem | Chris DeMars
    gulp.task('default',
    ['sass', 'js', 'images', ‘serve']
    );
    

    View Slide

54. @saltnburnem | Chris DeMars
    Build System
    Comparisons
    

    View Slide

55. @saltnburnem | Chris DeMars
    https://goo.gl/B3YLGM
    

    View Slide

56. @saltnburnem | Chris DeMars
    https://goo.gl/B3YLGM
    

    View Slide

57. @saltnburnem | Chris DeMars
    https://goo.gl/B3YLGM
    

    View Slide

58. @saltnburnem | Chris DeMars
    

    View Slide

59. @saltnburnem | Chris DeMars
    

    View Slide

60. @saltnburnem | Chris DeMars
    npm Install That Shiz!
    

    View Slide

61. @saltnburnem | Chris DeMars
    npm Install That Shiz!
    BUT FIRST
    

    View Slide

62. @saltnburnem | Chris DeMars
    npm Install That Shiz!
    BUT FIRST
    

    View Slide

63. @saltnburnem | Chris DeMars
    Install Gulp
    npm install --save-dev gulp
    

    View Slide

64. @saltnburnem | Chris DeMars
    package.json
    

    View Slide

65. View Slide

66. View Slide

67. @saltnburnem | Chris DeMars
    How does gulp work?
    &
    

    View Slide

68. @saltnburnem | Chris DeMars
    How does gulp work?
    Tasks
    &
    

    View Slide

69. @saltnburnem | Chris DeMars
    How does gulp work?
    Tasks
    & Pipes
    

    View Slide

70. @saltnburnem | Chris DeMars
    Tasks & Pipes
    

    View Slide

71. @saltnburnem | Chris DeMars
    Tasks & Pipes
    

    View Slide

72. @saltnburnem | Chris DeMars
    Tasks & Pipes
    

    View Slide

73. @saltnburnem | Chris DeMars
    Plugins for the win!
    

    View Slide

74. @saltnburnem | Chris DeMars
    Plugins for the win!
    

    View Slide

75. @saltnburnem | Chris DeMars
    Install ALL the things!
    http://gulpjs.com/plugins/
    

    View Slide

76. @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

77. npm install --save-dev gulp-sass
    @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

78. @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

79. npm install --save-dev gulp-less
    @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

80. @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

81. npm install --save-dev gulp-stylus
    @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

82. @saltnburnem | Chris DeMars
    CSS Compiling
    

    View Slide

83. @saltnburnem | Chris DeMars
    Minification
    npm install --save-dev gulp-cssmin
    npm install --save-dev gulp-uglify
    

    View Slide

84. @saltnburnem | Chris DeMars
    Renaming
    .min
    npm install --save-dev gulp-rename
    

    View Slide

85. @saltnburnem | Chris DeMars
    Concat what?
    npm install --save-dev gulp-concat
    

    View Slide

86. @saltnburnem | Chris DeMars
    Autoprefixing
    npm install --save-dev gulp-autoprefixer
    

    View Slide

87. @saltnburnem | Chris DeMars
    Linting
    npm install --save-dev xo
    

    View Slide

88. @saltnburnem | Chris DeMars
    Linting
    npm install --save-dev xo
    

    View Slide

89. @saltnburnem | Chris DeMars
    Linting
    npm install --save-dev xo
    Sindre Sorhus
    @sindresorhus
    

    View Slide

90. @saltnburnem | Chris DeMars
    Accessibility
    npm install --save-dev gulp-axe-webdriver
    

    View Slide

91. @saltnburnem | Chris DeMars
    Accessibility
    npm install --save-dev gulp-axe-webdriver
    

    View Slide

92. @saltnburnem | Chris DeMars
    Accessibility
    npm install --save-dev gulp-axe-webdriver
    Felix Zapata
    @felixzapata
    

    View Slide

93. @saltnburnem | Chris DeMars
    And….The best of ALL!
    

    View Slide

94. @saltnburnem | Chris DeMars
    https://browsersync.io/docs/gulp
    npm install --save-dev browser-sync
    

    View Slide

95. @saltnburnem | Chris DeMars
    gulpfile.js
    

    View Slide

96. @saltnburnem | Chris DeMars
    

    View Slide

97. View Slide

98. View Slide

99. @saltnburnem | Chris DeMars
    The problem!
    

    View Slide

100. @saltnburnem | Chris DeMars
     The problem!
     

     View Slide

101. X
     X X
     @saltnburnem | Chris DeMars
     X
     X
     

     View Slide

102. @saltnburnem | Chris DeMars
     

     View Slide

103. @saltnburnem | Chris DeMars
     

     View Slide

104. @saltnburnem | Chris DeMars
     #perfmatters
     

     View Slide

105. @saltnburnem | Chris DeMars
     Paul Irish
     @paul_irish
     

     View Slide

106. @saltnburnem | Chris DeMars
     CSS Files
     JS Files
     13 / 81 CSS
     34 / 81 JS
     16% of all requests
     41% of all requests
     

     View Slide

107. @saltnburnem | Chris DeMars
     

     View Slide

108. @saltnburnem | Chris DeMars
     

     View Slide

109. @saltnburnem | Chris DeMars
     

     View Slide

110. @saltnburnem | Chris DeMars
     

     View Slide

111. @saltnburnem | Chris DeMars
     ~18% increase in site performance
     

     View Slide

112. View Slide

113. @saltnburnem | Chris DeMars
     

     View Slide

114. View Slide

115. @saltnburnem | Chris DeMars
     Demo Time
     
     
     

     View Slide

116. @saltnburnem | Chris DeMars
     Takeaways
     !
     !
     

     View Slide

117. @saltnburnem | Chris DeMars
     Takeaways
     !
     !
     Care about the front end please
     ✅
     

     View Slide

118. @saltnburnem | Chris DeMars
     Takeaways
     !
     !
     Care about the front end please
     ✅
     #PerfMatters
     ✅
     

     View Slide

119. @saltnburnem | Chris DeMars
     Takeaways
     !
     !
     Care about the front end please
     ✅
     #PerfMatters
     ✅
     Run your assets through a build system
     ✅
     

     View Slide

120. @saltnburnem | Chris DeMars
     Takeaways
     !
     !
     Care about the front end please
     ✅
     #PerfMatters
     ✅
     Run your assets through a build system
     ✅
     Download and use Bulp!
     ✅
     

     View Slide

121. @saltnburnem | Chris DeMars
     

     View Slide

122. @saltnburnem | Chris DeMars
     

     View Slide

123. @saltnburnem | Chris DeMars
     Resources
     http://gulpjs.com/
     https://css-tricks.com/gulp-for-beginners/
     https://www.sitepoint.com/introduction-gulp-js/
     https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
     

     View Slide

124. @saltnburnem | Chris DeMars
     

     View Slide

125. @saltnburnem | Chris DeMars
     

     View Slide

126. Chris DeMars
     @saltnburnem
     http://bit.ly/2il6OZx
     

     View Slide