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
110
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
970
Felt - a simple web server with the power of the future
cognitom
0
310
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
900
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
590
Other Decks in Programming
See All in Programming
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.2k
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
ミリしらMCP勉強会
watany
3
440
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1.1k
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
Going Structural with Named Tuples
bishabosha
0
170
ベクトル検索システムの気持ち
monochromegane
30
9.1k
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
150
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.4k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.5k
KATA
mclloyd
29
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Docker and Python
trallard
44
3.3k
BBQ
matthewcrist
88
9.5k
It's Worth the Effort
3n
184
28k
For a Future-Friendly Web
brad_frost
176
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Building Your Own Lightsaber
phodgson
104
6.3k
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