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
59
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
58
My Node CLI Adventure
chrisdemars
0
51
Other Decks in Technology
See All in Technology
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
520
Microsoft_20250311_第2回AI_IoT共創ラボ.pdf
iotcomjpadmin
0
120
Dify触ってみた。
niftycorp
PRO
0
120
マネコン操作いらず! TerraformでAWSインフラのコーディングに入門しよう
minorun365
PRO
2
890
LangGraph × Bedrock による複数の Agentic Workflow を利用した Supervisor 型のマルチエージェントの実現/langgraph-bedrock-supervisor-agent
ren8k
4
460
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
180
Codar: Arte ou Ciência?! A Jornada de um DEV na Creator Economy
vclementino
0
180
x86-64 Assembly Essentials
latte72
4
920
最近のSRE支援ニーズ考察 | sogaoh's LT @ Road to SRE NEXT@札幌
sogaoh
PRO
1
180
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
400
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
4
370
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
290
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for Performance
lara
605
68k
Side Projects
sachag
452
42k
Making Projects Easy
brettharned
116
6.1k
Into the Great Unknown - MozCon
thekraken
35
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
Typedesign – Prime Four
hannesfritz
41
2.5k
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