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.js: Getting Started
Search
Tsutomu Kawamura
August 26, 2014
Programming
2
4k
gulp.js: Getting Started
「はじめてのgulp」gulp.jsの連載始めます〜
LIG月刊ライトニングトーク2014年8月号: MEAN 祭り にて
http://connpass.com/event/7779/
Tsutomu Kawamura
August 26, 2014
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
93
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
920
Felt - a simple web server with the power of the future
cognitom
0
290
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
880
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Programming
See All in Programming
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
830
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
5
170
API Platform for Laravel
dunglas
1
1.2k
GraphQLとGigaViewer for Apps
numeroanddev
4
850
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
180
為醫療加裝Python的引擎
cclai999
0
270
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
130
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
220
App Router 悲喜交々
quramy
7
360
"noncopyable types" の使いどころについて考えてみた
andpad
0
110
宿泊予約サイトにおける検索と料金計算の両立
skaji
1
210
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
270
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Scaling GitHub
holman
458
140k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
How to name files
jennybc
76
98k
Adopting Sorbet at Scale
ufuk
73
8.9k
How to train your dragon (web standard)
notwaldorf
87
5.6k
We Have a Design System, Now What?
morganepeng
48
7.1k
Building an army of robots
kneath
302
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.5k
Transcript
! facebook.com/cognitom Տଜ ͡ΊͯͷHVMQ Ծ HVMQKTͷ࿈ࡌ࢝Ί·͢ʙ
/FX"1*T HVMQQBSBMMFM HVMQTFSJFT 4PVSDF.BQʜFUD
+ + ৭ʑ
ओʹɺ Φʔϓϯιʔε ͳͻͱͰ͢ɻ 執筆/教育 マスター デザイン 開発 成分表
ຊͰ͢ɻ
ίϨ
͍͍ͮͯ·͢ɻ
8FC'VOEBNFOUBMT CZ(PPHMF ! ϚϧνσόΠεରԠͷ ελʔλʔΩοτ λεΫϥϯφʔʹHVMQΛ࠾༻ (PPHMFɺHVMQԡ͠
ͳʹΛࣗಈԽ͢Δͷ HVMQKTͰ
-&44 4BTT 4UZMVT ίϯύΠϧ͢Δͱ$44ʹͳΔͷ HVMQMFTT HVMQSVCZTBTT HVMQTUZMVT
$44࠷దԽ !JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫε ϛχϑΝΠɺܰྔԽ HVMQDTTJNQPSU HVMQBVUPQSFpYFS HVMQDTTP HVMQNJOJGZDTT HVMQVODTT
$PGGFF4DSJQU 5ZQF4DSJQU -JWF4DSJQU΄͔ ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔͷ HVMQDP⒎FF HVMQUZQFTDSJQU HVMQMJWFTDSJQU
#SPXTFSJGZ 3FRVJSFKT %VP 6HMJGZ +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δͷɻ ಡԽɾѹॖ͢Δͷɻ
ը૾ͷ࠷దԽεϥΠεͷΓग़͠ ख࡞ۀͱ͔ɺ͏͋Γ͑ͳ͍ͷͰɻ HVMQCBTF HVMQJNBHFNJO HVMQTLFUDI ! TLFUDIUPPM 4MJDZ΄͔
ϑΥϯτͷࣗಈੜ 47(͔ΒΞΠίϯϑΥϯτΛੜ HVMQJDPOGPOU HVMQTLFUDI
HVMQKTೖ ͱΓ͋͑ͣ
HVMQͱ ʮΨϧϓ HⓟMQ ʯͱൃԻɻ ϑϩϯτΤϯυ੍࡞Ͱඞਢͱͳͬͨɺ ͋Ε͜ΕͷࣗಈԽΛ͢Δɺ ͋ͳͨͷͨΊͷλεΫϥϯφʔ Ϗϧυπʔϧ ɻ
HVMQͷΠϯετʔϧ $ npm install -g gulp άϩʔόϧʹΠϯετʔϧɻ
͍Ζ͍ΖΠϯετʔϧ $ npm install QBDLBHFKTPOΛ༻ҙͯ͠ɺ ϩʔΧϧʹHVMQϓϥάΠϯΛΠϯετʔϧɻ
QBDLBHFKTPO
SFQMBDFHSVOU DPOUMJC H bHVMQ` ͭ·Γ
HVMQpMFΛॻ͘ ࣗಈԽͷखॱΛɺ +BWB4DSJQU$P⒎FF4DSJQUʜ Ͱهड़ɻॲཧύΠϓͰͭͳ͛Δɻ
HVMQpMFDPGGFF ˞KTͰDPGGFFͰ0,
HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2
task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
HVMQKTͷύλʔϯ
ग़ྗઌͭ ࢹ uglify coffee gulp.dest gulp.src gulp = require 'gulp'
coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> gulp = require 'gulp' coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> gulp.src './js/src/*.coffee' .pipe coffee() .pipe uglify() .pipe gulp.dest ‘./js/‘ gulp.task 'watch', -> gulp.watch './js/src/*.coffee', ['js'] 1
ग़ྗઌ͕ෳ gulp.dest autoprexier minify-css rename gulp.dest gulp.src gulp = require
'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' gulp.task 'css', -> gulp.src './css/src/style.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest ‘./css/‘ .pipe minifyCss() .pipe rename extname: '.min.css' .pipe gulp.dest ‘./css/‘ gulp = require 'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' 2
ߋ৽ϑΝΠϧ͚ͩॲཧ changed uglify gulp.dest gulp.src gulp = require 'gulp' changed
= require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> gulp.src './src/*.js' .pipe changed './dist/' .pipe uglify() .pipe gulp.dest './dist/' gulp = require 'gulp' changed = require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> 3
γϦΞϧλεΫ less cssimport gulp.src autoprexier gulp.dest gulp.src concat minify-css streamqueue
gulp = require 'gulp' streamqueue = require 'streamqueue' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat' minifyCss = require 'gulp-minify-css' gulp.task 'css', -> gulp = require 'gulp' streamqueue = require 'streamqueue' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat' minifyCss = require 'gulp-minify-css' gulp.task 'css', -> streamqueue objectMode: true, gulp.src './css/src/first.less' .pipe less() gulp.src './css/src/second.css' .pipe cssimport() .pipe autoprefixer 'last 2 versions' .pipe concat 'app.css' .pipe minifyCss() .pipe gulp.dest './css/' 4
HVMQpMFͨͩͷKTͩͬͨʜ
ͱ͍͏Θ͚Ͱɺ
͜Μͳײ͡ͷ༰Ͱ ɹ࿈ࡌΛ࢝Ί·ͨ͠ɻ
$PEF;JOFʹͯ
ແʹ ӳޠ൛ެ։ ͪ͜ΒΦʔϓϯιʔε
ैདྷͷ υΩϡϝϯτ༁ &OHMJTIɾݩݪߘ ຊޠɾ༁൛ ੈքతʹҰํ௨ߦ
͜ΕͰ͍͍ͷ͔
ݪߘྉͷҰ෦ Λɺ༁ʹͭ͗ࠐΊ স ຊޠɾฤू൛ ຊޠɾݩݪߘ &OHMJTIɾΦʔϓϯιʔε൛ ैདྷͷ υΩϡϝϯτ༁ &OHMJTIɾݩݪߘ ຊޠɾ༁൛
DPHOJUPNHVMQIBOECPPL
5IBOLZPV ! facebook.com/cognitom