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
Gulp & Grunt - What, Why & How
Search
Michael Wallis
June 01, 2016
Technology
0
71
Gulp & Grunt - What, Why & How
An introduction to Javascript Task Runners using Gulp & Grunt
Michael Wallis
June 01, 2016
Tweet
Share
Other Decks in Technology
See All in Technology
SSII2024 [OS3] 基盤モデルとそのビジネス活用
ssii
PRO
0
110
その失敗から何を学ぶ?不確実性をマネジメントして目標達成するための心得 #webtan
aki_iinuma
19
5.3k
SSM Inventory を使って便利に EC2 棚卸し(ハマりどころを添えて)
masahirokawahara
2
440
10分でわかる株式会社ログラス − エンジニア向け会社説明資料 / Loglass in 10 min for Engineers
loglass2019
3
14k
いまからでも遅くない!ROKS (RedHat OpenShift on IBM Cloud) の運用
helenxiao
0
220
週刊AWSキャッチアップ 生成AI編(2024/5/27週)
minorun365
PRO
4
140
ポスター & デモと総括 / Posters & Demonstrations, and Conclusions
ks91
PRO
0
100
RAG の研究を元に予測する、これからのエンジニアに求められるスキル
isseihamada
3
190
不要な DNS リソースレコードは消そう / Delete unused DNS records
wa6sn
4
3k
入門 電気通信事業者
kurochan
10
4.4k
Gemini in AppSheet_吉積情報株式会社 石見
comucal
PRO
0
2.2k
ドラッグストア店員が 独学で化粧品顧客管理アプリを作成した話
mierune
PRO
1
230
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
8k
Unsuck your backbone
ammeep
664
57k
Documentation Writing (for coders)
carmenintech
61
4.1k
A designer walks into a library…
pauljervisheath
201
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
87
45k
Building an army of robots
kneath
300
42k
The Art of Programming - Codeland 2020
erikaheidi
45
12k
The Power of CSS Pseudo Elements
geoffreycrofte
63
5.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
19
1.7k
The Invisible Side of Design
smashingmag
294
50k
Transcript
Gulp & Grunt What, Why & How Michael Wallis Front
End Developer Platinum Seed
Responsibilities & Things I do everyday • Building HTML templates
• Styling using SASS • Javascript development • Asset handling and organization (e.g images & fonts)
Javascript Task Runners
Why? • Save time • More consistent standards on assets
• Improved workflow • Easy project setup
Things I no longer worry about • SASS/Less compilation •
JS Linting • CSS & JS minification and concatenation • Image optimization • Sprite sheet generation • Asset injection • File cleaning
None
Node.js
npm
Installing • Gulp npm install gulp –g • Grunt npm
install grunt cli –g
Node.js Example Setup
Package.json
• Gulp npm install gulp-sass --save-dev • Grunt npm install
grunt-contrib-sass --save-dev Installing packages
Grunt - Empty
Grunt SASS Example
Running the task
Grunt - SASS, autoprefixer and minify
Running the task
Grunt - Adding Watch
Grunt – Default Watch Task
Running the task
Gulp: SASS Compilation
Running the task
Gulp: SASS, autoprefix & minify
Running the task
Gulp Watch
Running the task
• Styles – sass comp, minify and concat • Load
Plugins – no imports • Error Handling • Live Reloading • Scripts – linting, moving, minifying • Images – optimization, sprite sheet generation, svg icon font • Asset injection and folder cleaning My Gulp Setup
Load Plugins
Error Handling
Error Handling
Error Handling
Error Handling
Javascript Linting
Live Reload
Javascript Minifying
Javascript Other Tasks
Image Optimization
Images Sprite Creation - 01
Images Sprite Creation - 02
Asset Injection
Folder Cleaning
Sequences
Speed
Community
• Downloads in the last month Gulp - 2,207,181 Grunt
- 1,853,883 • Plugins Gulp – 2 436 Grunt – 5 738 Numbers as of 2 hours ago
Who Wins?!
None
Gulp & Grunt What, Why & How Michael Wallis Front
End Developer Platinum Seed
• https://css-tricks.com/gulp-for-beginners/ • http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner- gulp • https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why- the-other-f5d3b398edc4#.6zc1qnn2r • http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
Links & Resources