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
61
My Node CLI Adventure
chrisdemars
0
54
Other Decks in Technology
See All in Technology
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
140
Kiroと学ぶコンテキストエンジニアリング
oikon48
5
5.5k
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.4k
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
210
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
440
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
2
520
制約理論(ToC)入門
recruitengineers
PRO
9
3.7k
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
A Modern Web Designer's Workflow
chriscoyier
696
190k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
309
31k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Being A Developer After 40
akosma
90
590k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Bash Introduction
62gerente
614
210k
Visualization
eitanlees
147
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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