Gulping ALL the things

Gulping All The Things

Chris DeMars @saltnburnem

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

@saltnburnem | Chris DeMars @TalesFTScript Coming Soon!

@saltnburnem | Chris DeMars Free Stickers? !

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

@saltnburnem | Chris DeMars What are these things?

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

@saltnburnem | Chris DeMars Tool

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

@saltnburnem | Chris DeMars

@saltnburnem | Chris DeMars So…Build Systems

@saltnburnem | Chris DeMars ✨ ✨

@saltnburnem | Chris DeMars What is Gulp?

@saltnburnem | Chris DeMars X O

@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

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

@saltnburnem | Chris DeMars Only 5 functions to learn!

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

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

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

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

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

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

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

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

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

[deps]

[deps] function ()

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

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

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

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

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

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

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

@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')); });

@saltnburnem | Chris DeMars Default

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

@saltnburnem | Chris DeMars Build System Comparisons

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

@saltnburnem | Chris DeMars npm Install That Shiz!

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

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

@saltnburnem | Chris DeMars package.json

@saltnburnem | Chris DeMars How does gulp work? &

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

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

@saltnburnem | Chris DeMars Tasks & Pipes

@saltnburnem | Chris DeMars Plugins for the win!

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

@saltnburnem | Chris DeMars CSS Compiling

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

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

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

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

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

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

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

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

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

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

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

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

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

@saltnburnem | Chris DeMars gulpfile.js

@saltnburnem | Chris DeMars The problem!

X X X @saltnburnem | Chris DeMars X X

@saltnburnem | Chris DeMars #perfmatters

@saltnburnem | Chris DeMars Paul Irish @paul_irish

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

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

@saltnburnem | Chris DeMars Demo Time

@saltnburnem | Chris DeMars Takeaways ! !

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

front end please ✅ #PerfMatters ✅

front end please ✅ #PerfMatters ✅ Run your assets through a build system ✅

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

@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

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

Gulping ALL the things

Gulping ALL the things

More Decks by Chris DeMars

Other Decks in Technology

Featured

Transcript