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
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
440
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
310
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
110
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
890
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
4 Signs Your Business is Dying
shpigford
184
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Six Lessons from altMBA
skipperchong
28
4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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