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を使うと彼女ができるよ - かんたんな紹介とハンズオン
Search
Kohei Asai
September 30, 2014
Programming
2
990
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。
Kohei Asai
September 30, 2014
Tweet
Share
More Decks by Kohei Asai
See All by Kohei Asai
The State Transparented Web Application
axross
1
230
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.3k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.6k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
350
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
Other Decks in Programming
See All in Programming
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
300
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Vue.js学習の振り返り
hiro_xre
2
130
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
The Language of Interfaces
destraynor
154
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
How GitHub (no longer) Works
holman
311
140k
The World Runs on Bad Software
bkeepers
PRO
65
11k
A designer walks into a library…
pauljervisheath
202
24k
Speed Design
sergeychernyshev
24
570
Teambox: Starting and Learning
jrom
132
8.7k
For a Future-Friendly Web
brad_frost
175
9.4k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Fireside Chat
paigeccino
32
3k
Transcript
HVMQΛ͏ͱ ൴ঁ͕Ͱ͖·͢ ͔ΜͨΜͳհͱϋϯζΦϯ
͓͠ͳ͕͖ HVMQͷ͔ΜͨΜͳઆ໌ ΏΔ͍ϋϯζΦϯ ϋϯζΦϯͰͬͨίʔυͷղઆͭͭ͠"1*ͷઆ໌
ࣗݾհ ͍͋͜͞͏͍ 6*69σβΠϯ෦ϑϩϯτΤϯυΤϯδχΞతͳͭ ݄ೖࣾ OPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ ! Github : @axross
Twitter : @axross_
ͬͯ·͔͢ʁ /PEFKTͰಈ͘ ϏϧυγεςϜϔϧύʔʢλεΫϥϯφʔΈ͍ͨͳΜʣ ϑϩϯτΤϯυ։ൃͰͷ࡞ۀΛࣗಈԽͨ͠Γ͢Δ (SVOUΈ͍ͨͳͭ طଘͷ044ϓϩδΣΫτͷ͍͔ͭ͘HVMQҠߦɺ ৽نͷͷHVMQͷ࠾༻ྫ͕૿͍͑ͯΔ༷
ࣗಈԽ͍ͨ͜͠ͱ MFTT4$44ͷίϯύΠϧ $44ͷϕϯμʔϓϦϑΟοΫεͷهѹॖ $P⒎FF4DSJQU5ZQF4DSJQUͷίϯύΠϧ +BWBTDSJQUͷґଘղܾܰྔԽɾಡԽ ը૾ͷ࠷దԽCBTFԽͯ͠$44ຒΊࠐΉ ελΠϧΨΠυͷੜ ςετ
(SVOUͱͷҧ͍ ΑΓOPEF $PNNPO+4 ͬΆ͍ॻ͖ํ ϝλϑΝΠϧ͕+4ͱͯ݁ͯͨ͠͠Γ 4USFBNΛར༻ͯ͠ॲཧΛͨ͠Γ ϝιουνΣΠϯͰॲཧΛॻ͍͍ͯ͘ λεΫϥϯφʔͱͯ͠ൈ܈ʹॻ͖͍͢ ײతͰ࠷ݶͷ"1* ޙൃͳͷͰ·ͩϓϥάΠϯͷ(SVOUʹٴͳ͍
EJGGUP
࣮ࡍʹͬͯΈΑ͏ ͡Ό͋
ࠓճΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
ࠓճΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
४උ ࠇ͍ը໘Λ͍·͢ ! σΟϨΫτϦΛ࡞͓ͬͯ͘ ࠓޙɺ͜ͷσΟϨΫτϦͷதͰ࡞ۀ͠·͢ $ mkdir gulp_training $ cd
gulp_training
४උʢʣ ࡶʹIUNMΛॻ͘ JOEFYIUNM <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
<link rel="stylesheet" href="./style.min.css"> </head> <body> <div class="accept">͍</div> <div class="decline">͍͍͑</div> <div class="later">͋ͱͰ</div> </body>
४උʢʣ ࡶʹMFTTΛॻ͘ TUZMFMFTT @blue: #03a9f4; @orange: #ff5722; ! .button(@color: #607d8b)
{ display: inline-block; padding: 8px 16px; border-radius: 4px; background: @color; box-shadow: darken(@color, 15%) 0 4px 0; color: #ffffff; } .accept { .button(@blue); } .decline { .button(@orange); } .later { .button(); }
OPEFKTͷΠϯετʔϧ Πϯετʔϧ͞Ε͍ͯΔ͔֬ೝ $ node -v Πϯετʔϧ͍ͯ͠ͳ͍ਓOPEFCSFX͔OWNͰೖΕ ͍ͯͩ͘͞ $ curl -L
git.io/nodebrew | perl - setup $ export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc $ nodebrew install-binary stable $ nodebrew use stable
QBDLBHFKTPOΛ ࡞͓ͬͯ͘ ར༻ʢґଘʣ͢ΔύοέʔδΛهɾڞ༗͢ΔͨΊʹɺ QBDLBHFKTPOΛ࡞͓ͯ͘͠ $ npm init Οβʔυʹରͯ͠ɺͯ͢&OUFSΩʔʢ:FTʣͰ0,
HVMQͷΠϯετʔϧ $-*Ͱ͑ΔΑ͏ʹάϩʔόϧΠϯετʔϧ $ npm install -g gulp
HVMQͷϓϥάΠϯͷ Πϯετʔϧ ࠓճMFTTͷίϯύΠϧΛͯ͠ΈΔ HVMQຊମͱHVMQMFTTΛೖΕΔ $ npm install --save-dev gulp gulp-less
QBDLBHFKTPOʹ͍ͭͯ OQNJOTUBMMͷͱ͖ʹʮTBWFʯʮTBWFEFWʯΛͭ ͚ΔͱɺQBDLBHFKTPOʹه͞ΕΔ ͜ͷQBDLBHFKTPOΛHJUͳͲͰཧɾڞ༗͢Εɺ ίϛοτ͍ͯ͠ΔଞͷϝϯόʔʮOQNJOTUBMMʯ͚ͩͰ ඞཁͳύοέʔδΛΠϯετʔϧͰ͖Δ ʮHʯΛ͚ͭͨͷه͞Εͳ͍ ϓϩδΣΫτͰͳ͘ڥʹΠϯετʔϧ͢ΔͨΊ ʢิʣ
HVMQpMFKTΛ࡞Δ ʮHVMQpMFKTʯͱ͍͏໊લͷϑΝΠϧΛ࡞Γ·͢ $ atom gulpfile.js ීஈͬͯΔΤσΟλ͕͋ΔਓɺTVCMͩͬͨΓWJͩͬͨΓɺ ͦΕͧΕ͍͍ײ͡ʹ͍ͬͯͩ͘͞
HVMQpMFKTΛ࡞Δ ͜Μͳײ͡ʹॻ͖·͢ HVMQpMFKT var gulp = require('gulp'); var less =
require('gulp-less'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')); });
HVMQpMFKTͱ HVMQͷλεΫͱॲཧΛهड़͢Δ ୯ମͷKTϑΝΠϧͰɺ+BWBTDSJQUΛॻ͘ OPEFKTͰී௨ʹಈ͘ͷͰڥมͳΜ͔ΠέΔ 3VCZͷ3BLFͰ͍͏3BLFpMFʹ͍ۙ HVMQͷSFRVJSFΛআ͚ɺϑΝΠϧ୯ମ͕Ϟδϡʔϧͱ͠ ͍ͯ݁ͯ͠ΔͷͰɺґଘ͕ؔΘ͔Γ͍͢ ʢิʣ
HVMQΛಈ͔ͯ͠ΈΔ ʮHVMQʯίϚϯυͰHVMQΛಈ͔͢ $ gulp
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:14:39] Using gulpfile ~/gulp-training/gulpfile.js [13:14:39] Starting
'default'... [13:14:39] Finished 'default' after 42 ms ʮTUZMFDTTʯ͕ੜ͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css index.html package.json style.less
Ͱ͖ͨͶʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
͡Ό͋࣍ʹΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
HVMQͷϓϥάΠϯͷ ՃΠϯετʔϧ $44ͷѹॖͱɺ͚ͯग़ͨ͢ΊʹϦωʔϜΛ͍ͨ͠ HVMQDTTPͱHVMQSFOBNFΛೖΕΔ $ npm install --save-dev gulp-csso gulp-rename
HVMQpMFKTʹॻ͖͢ var gulp = require('gulp'); var less = require('gulp-less'); var
csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); });
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:32:16] Using gulpfile ~/gulp-training/gulpfile.js [13:32:16] Starting
'default'... [13:32:16] Finished 'default' after 68 ms TUZMFDTTʹՃ͑ɺʮTUZMFNJODTTʯ͕ੜ͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css style.min.css index.html package.json style.less
Ͱ͖ͨͶʂʂʂʂʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
࠷ޙʹΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
HVMQpMFKTʹॻ͖͢ var gulp = require('gulp'); var less = require('gulp-less'); var
csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) });
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp watch [13:38:51] Using gulpfile ~/gulp-training/gulpfile.js [13:38:51]
Starting 'watch'... [13:38:51] Finished 'watch' after 6.38 ms TUZMFMFTTΛฤूͯ͠อଘ͢ΔͱɺউखʹʮEFGBVMUʯ λεΫ͕Δ [13:39:09] Starting 'default'... [13:39:09] Finished 'default' after 62 ms
Ͱ͖ͨͶʂʂʂʂʂ ͍͢͝Ͷʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
ϋϯζΦϯ·ͱΊ HVMQΛOQNͰάϩʔόϧΠϯετʔϧ͢Δ HVMQϓϥάΠϯΛOQNͰϩʔΧϧΠϯετʔϧ͢Δ ͜ͷ࣌ɺTBWFEFWͯ͠QBDLBHFKTPOʹه͖͢ HVMQϓϥάΠϯSFRVJSFͯ͠ɺQJQFʹ͢ ϝιουνΣΠϯͰܨ͛ͯ௨ͤΔ HVMQXBUDI͍ͬͯ͏ͭͰϑΝΠϧͷࢹ͕Ͱ͖Δ λεΫॲཧΛॻ͖͢ͷָ͕͍͢͝
"1*ͷઆ໌ ͬ͘͞Γͱ
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); λεΫͷ࡞
λεΫͷ࡞ʢʣ ʮHVMQλεΫ໊ʯͷΑ͏ʹ࣮ߦ͢ΔͨΊͷλεΫΛఆٛ͢Δ OBNFɺλεΫ໊Λ4USJOHͰࢦఆ͢Δ ʮEFGBVMUʯͱ͍͏λεΫ໊༧ޠɺʮHVMQʯͷΈͰ࣮ߦͰ͖Δ EFQTɺ͜ͷλεΫͷલʹ࣮ߦ͍ͤͨ͞λεΫ໊Λ"SSBZͰࢦఆͰ͖Δ ෳͷλεΫΛͭͷΤϯτϦϙΠϯτʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ ͳͯ͘Α͍ GOʹɺλεΫͷதΛ'VODUJPOͱͯ͢͠ gulp.task(name, [deps],
fn)
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷಡΈࠐΈ
ϑΝΠϧͷಡΈࠐΈʢʣ HMPCTɺHMPCͱͳΔ4USJOH͔ɺͦΕΒ͕֨ೲ͞Εͨ"SSBZΛࢦఆ͢Δ ෳͨ͠߹ɺҎ߱ͷQJQFHMPCTͯ͢ʹ͔͔Δ PQUJPOTͰϑϥάΛཱͯΔͱCV⒎FSͱͯ͠ಡΈࠐΜͩΓ৭ʑͰ͖Δ ͋·ΓΒͳ͍ͱࢥ͏ͷͰׂѪɺ"1*ࢀর ͪΖΜͳͯ͘Α͍ 4USFBN͕ฦΔ QJQFԽͨ͠ϓϥάΠϯΛ௨ͤΔ gulp.src(globs [,
options])
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); QJQFΛ௨͢
QJQFΛ௨͢ʢʣ HVMQTSDͰฦͬͨ4USFBNʹɺQJQFԽ͞ΕͨHVMQͷϓϥάΠϯΛ௨͢͜ ͱ͕Ͱ͖Δ ͖ͬ͞ͷྫͩͱɺHVMQMFTTHVMQSFOBNFͳͲ͕ͦΕʹ͋ͨΔ QJQFͦͷ··ܧଓͯ͠4USFBNΛฦ͢ͷͰɺϝιουνΣΠϯͯ࣍͠ʑ ʹQJQFΛ௨͢͜ͱ͕Ͱ͖Δ gulp.src(...).pipe(pipedGulpPlugin)
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷॻ͖ग़͠
ϑΝΠϧͷॻ͖ग़͠ʢʣ ࢦఆͨ͠QBUIʹϑΝΠϧΛॻ͖ग़͢ QBUIͰࢦఆͰ͖ΔͷσΟϨΫτϦ໊·Ͱ ϦωʔϜ͍ͨ͠߹HVMQSFOBNFΛQJQFͰ௨͢ σΟϨΫτϦ͕ଘࡏ͠ͳ͍߹ࣗಈతʹ࡞ΒΕΔ PQUJPOTͰϑΝΠϧͷύʔϛογϣϯࢦఆͨ͠ΓͰ͖Δ HVMQEFTUࣗମ͕QJQFͰ௨ͤΔ gulp.dest(path [, options])
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷࢹ
ϑΝΠϧͷࢹʢʣ HMPCʹ4USJOHͰࢦఆ͞ΕͨϑΝΠϧΛࢹ͢Δ UBTLTʹHVMQUBTLͰఆ͍ٛͯ͠ΔλεΫ໊Λ"SSBZͰࢦఆ͢Δ (SVOUͱಉ͡Α͏ʹ෦ͰHB[Fͱ͍͏ύοέʔδΛ͍ͬͯͯɺ PQUJPOTͷͦͷΜͷ"1*ಉ͡ ୈࡾҾʢUBTLTʣʹ"SSBZ͡Όͳͯ͘'VODUJPOΛ͢ͱɺ DCతͳײ͡ʹΰχϣΰχϣ͢Δ͜ͱͰ͖Δ gulp.watch(glob [, options],
tasks)
͜Μ͚ͩͰ͢ EPDTʹ͜Ε͔͠ࡌͬͯͳ͍
"1*·ͱΊ HVMQUBTLͰλεΫΛఆٛ͢Δ ͜Εͷલʹ͜ͷλεΫͬͯͶɺΈ͍ͨͳͷΧϯλϯ HVMQTSDͰϑΝΠϧΛಡΈࠐΉ HVMQTSDͨ͠ͷʹQJQFͯ͠ɺॲཧΛ௨͍ͯ͘͠ ग़ྗ͢Δͱ͖HVMQEFTU HVMQEFTUࣗମQJQFʹ௨͢ͷͰɺNJOJGZ͢Δ࣌ͱָ͔
2" Կ͔͋Γ·͔͢ʁ
ଞʹֶͼํͱ͔ QMVHJOͷ୳͠ํͱ͔ ެࣜυΩϡϝϯτ https://github.com/gulpjs/gulp/blob/master/docs/README.md ! HVMQKTͦͷϓϥάΠϯҰཡ http://qiita.com/oreo3@github/items/0f037e7409be02336cb9 ! OQNͱ͔(JU)VCΛఆظతʹXBUDI͢ΔͱΑ͍ υΩϡϝϯτʹSFDJQFT͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠