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
1k
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
240
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.4k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.6k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
370
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
Other Decks in Programming
See All in Programming
為你自己學 Python
eddie
0
540
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
2.3k
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.1k
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
230
DMMオンラインサロンアプリのSwift化
hayatan
0
270
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
8
1.3k
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
230
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
600
定理証明プラットフォーム lapisla.net
abap34
1
670
AHC041解説
terryu16
0
540
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Done Done
chrislema
182
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Music & Morning Musume
bryan
46
6.3k
Designing Experiences People Love
moore
139
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
600
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for humans not robots
tammielis
250
25k
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͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠