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

Gulping ALL the things

Gulping ALL the things

CodeMash 2017 & Detroit.Code() 2017 talk.

Chris DeMars

January 11, 2017
Tweet

More Decks by Chris DeMars

Other Decks in Technology

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