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
57
Believe in the Power of CSS
chrisdemars
0
190
I Can't See: Low Vision A11y & Users.
chrisdemars
0
98
A11y for Everyone
chrisdemars
0
100
Block__Element--Magic: CSS Modularity for the Masses!
chrisdemars
0
230
My 3 Favorite Chrome Dev Tools...So Far.
chrisdemars
0
52
My Node CLI Adventure
chrisdemars
0
47
Other Decks in Technology
See All in Technology
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
VS CodeでAWSを操作しよう
smt7174
7
1.6k
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
340
Cracking the KubeCon CfP
inductor
2
230
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2k
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
200
ユーザーストーリーのレビューを自動化したみたの
bun913
1
410
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
430
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
270
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
4 Signs Your Business is Dying
shpigford
175
21k
Navigating Team Friction
lara
178
13k
Fireside Chat
paigeccino
21
2.6k
Producing Creativity
orderedlist
PRO
337
39k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
What's new in Ruby 2.0
geeforr
337
31k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Rails Girls Zürich Keynote
gr2m
91
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