Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gulping ALL the things
Search
Chris DeMars
January 11, 2017
Technology
1
110
Gulping ALL the things
CodeMash 2017 & Detroit.Code() 2017 talk.
Chris DeMars
January 11, 2017
Tweet
Share
More Decks by Chris DeMars
See All by Chris DeMars
Believe in the Power of CSS - 30min Edition
chrisdemars
1
240
Hacking the Human Perception
chrisdemars
0
61
Believe in the Power of CSS
chrisdemars
0
200
I Can't See: Low Vision A11y & Users.
chrisdemars
0
100
A11y for Everyone
chrisdemars
0
110
Block__Element--Magic: CSS Modularity for the Masses!
chrisdemars
0
240
My 3 Favorite Chrome Dev Tools...So Far.
chrisdemars
0
60
My Node CLI Adventure
chrisdemars
0
54
Other Decks in Technology
See All in Technology
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
210
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
MobileActOsaka_250704.pdf
akaitadaaki
0
130
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
OPENLOGI Company Profile for engineer
hr01
1
34k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
306
45k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Designing for Performance
lara
610
69k
Facilitating Awesome Meetings
lara
54
6.4k
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
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
@saltnburnem | Chris DeMars So…Build Systems
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars ✨ ✨
@saltnburnem | Chris DeMars What is Gulp?
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars X O
@saltnburnem | Chris DeMars
@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
@saltnburnem | Chris DeMars
@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'
@saltnburnem | Chris DeMars gulp.task gulp.task( , , {}; 'name'
[deps]
@saltnburnem | Chris DeMars gulp.task gulp.task( , , {}; 'name'
[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 // 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
@saltnburnem | Chris DeMars
@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 https://goo.gl/B3YLGM
@saltnburnem | Chris DeMars https://goo.gl/B3YLGM
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars npm Install That Shiz!
@saltnburnem | Chris DeMars npm Install That Shiz! BUT FIRST
@saltnburnem | Chris DeMars npm Install That Shiz! BUT FIRST
@saltnburnem | Chris DeMars Install Gulp npm install --save-dev gulp
@saltnburnem | Chris DeMars package.json
None
None
@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 Tasks & Pipes
@saltnburnem | Chris DeMars Tasks & Pipes
@saltnburnem | Chris DeMars Plugins for the win!
@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
@saltnburnem | Chris DeMars CSS Compiling
npm install --save-dev gulp-less @saltnburnem | Chris DeMars CSS Compiling
@saltnburnem | Chris DeMars CSS Compiling
npm install --save-dev gulp-stylus @saltnburnem | Chris DeMars CSS Compiling
@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
@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
@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
None
None
@saltnburnem | Chris DeMars The problem!
@saltnburnem | Chris DeMars The problem!
X X X @saltnburnem | Chris DeMars X X
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@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
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars ~18% increase in site performance
None
@saltnburnem | Chris DeMars
None
@saltnburnem | Chris DeMars Demo Time
@saltnburnem | Chris DeMars Takeaways ! !
@saltnburnem | Chris DeMars Takeaways ! ! Care about the
front end please ✅
@saltnburnem | Chris DeMars Takeaways ! ! Care about the
front end please ✅ #PerfMatters ✅
@saltnburnem | Chris DeMars Takeaways ! ! Care about the
front end please ✅ #PerfMatters ✅ Run your assets through a build system ✅
@saltnburnem | Chris DeMars Takeaways ! ! Care about the
front end please ✅ #PerfMatters ✅ Run your assets through a build system ✅ Download and use Bulp! ✅
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
@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
@saltnburnem | Chris DeMars
@saltnburnem | Chris DeMars
Chris DeMars @saltnburnem http://bit.ly/2il6OZx