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
How to start gulp
Search
kkeeth
April 09, 2018
Programming
160
0
Share
How to start gulp
kkeeth
April 09, 2018
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
84
とある EM の初めての育休からの学び
clown0082
1
5.5k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
220
Visually experience the beauty of mathematics with p5.js
clown0082
1
3.3k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.9k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
660
JavaScript × Mathematics go to Digital Art
clown0082
1
450
In-house study group at YUMEMI
clown0082
0
240
Playing Ionic Logo by p5.js
clown0082
0
340
Other Decks in Programming
See All in Programming
Road to RubyKaigi: Play Hard(ware)
makicamel
1
540
JOAI2026 1st solution - heron0519 -
heron0519
0
170
継続的な負荷検証を目指して
pyama86
0
110
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
2.7k
Liberating Ruby's Parser from Lexer Hacks
ydah
2
2.6k
AI時代のエンジニアリングの原則 / Engineering Principles in the AI Era
haru860
0
1.1k
PHPでバイナリをパースして理解するASN.1
muno92
PRO
0
400
JAWS-UG横浜 #100 祝・第100回スペシャルAWS は VPC レスの時代へ
maroon1st
0
210
[RubyKaigi 2026] Require Hooks
palkan
1
280
AgentCore Optimizationを始めよう!
licux
3
170
How We Benchmarked Quarkus: Patterns and anti-patterns
hollycummins
1
180
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか? #phpconkagawa
akase244
0
320
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
9
860
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
540
We Have a Design System, Now What?
morganepeng
55
8.1k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Automating Front-end Workflow
addyosmani
1370
200k
The Invisible Side of Design
smashingmag
302
52k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
sira's awesome portfolio website redesign presentation
elsirapls
0
230
GraphQLとの向き合い方2022年版
quramy
50
15k
Transcript
What is Gulp? How to use Gulp? k-kuwahara @kuwahara_jsri @clown0082
Who I am
Basic Information const my_info = { Name: ‘܂ݪਔ’, Home: ‘ෑ,
ౡ’, Interest: ‘όεέ, কع, ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
Communities staff translator staff staff
github.com/riot
Recent front-end development environment
Development tools CSS JavaScript
to automate
Automated tools Bundler Task runners
Automated tools Bundler Task runners
What is Gulp?
gulp is a toolkit for automating painful or time-consuming tasks
in your development workflow, so you can stop messing around and build something. Gulp quote: https://gulpjs.com
Task1 Task2 Task3 …
What gulp can do
• compile AltJS, AltCSS • minify and rename JS, CSS
• optimize Images • develop and debug with browsersync …etc Using Tools
How to start Gulp?
1. install “gulp” and plugins 2. setting commands into “package.json”
3. setting each tasks into “gulpfile.js” 4. execute gulp tasks Get started
…?
Let’s start gulp with me !!
Hands on →