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. @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
  2. @saltnburnem | Chris DeMars Only 5 functions to learn! gulp.src

    gulp.dest gulp.watch gulp.task gulp.run x 4
  3. @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')); });
  4. @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')); });
  5. @saltnburnem | Chris DeMars CSS Files JS Files 13 /

    81 CSS 34 / 81 JS 16% of all requests 41% of all requests
  6. @saltnburnem | Chris DeMars Takeaways ! ! Care about the

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

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

    front end please ✅ #PerfMatters ✅ Run your assets through a build system ✅ Download and use Bulp! ✅