Tweet
Tweet

Slide 1

Slide 1 text

HVMQΛ࢖͏ͱ ൴ঁ͕Ͱ͖·͢ ͔ΜͨΜͳ঺հͱϋϯζΦϯ

Slide 2

Slide 2 text

͓͠ͳ͕͖ HVMQͷ͔ΜͨΜͳઆ໌ ΏΔ͍ϋϯζΦϯ ϋϯζΦϯͰ࢖ͬͨίʔυͷղઆͭͭ͠"1*ͷઆ໌

Slide 3

Slide 3 text

ࣗݾ঺հ ͍͋͜͞͏΁͍ 6*69σβΠϯ෦ϑϩϯτΤϯυΤϯδχΞతͳ΍ͭ ೥݄຤ೖࣾ OPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ ! Github : @axross Twitter : @axross_

Slide 4

Slide 4 text

஌ͬͯ·͔͢ʁ /PEFKTͰಈ͘ ϏϧυγεςϜϔϧύʔʢλεΫϥϯφʔΈ͍ͨͳ΋Μʣ ϑϩϯτΤϯυ։ൃͰͷ࡞ۀΛࣗಈԽͨ͠Γ͢Δ (SVOUΈ͍ͨͳ΍ͭ طଘͷ044ϓϩδΣΫτͷ͍͔ͭ͘͸HVMQ΁Ҡߦɺ ৽نͷ΋ͷ΋HVMQͷ࠾༻ྫ͕૿͍͑ͯΔ໛༷

Slide 5

Slide 5 text

ࣗಈԽ͍ͨ͜͠ͱ MFTT΍4$44ͷίϯύΠϧ $44ͷϕϯμʔϓϦϑΟοΫεͷ௥ه΍ѹॖ $P⒎FF4DSJQU΍5ZQF4DSJQUͷίϯύΠϧ +BWBTDSJQUͷґଘղܾ΍ܰྔԽɾ೉ಡԽ ը૾ͷ࠷దԽ΍CBTFԽͯ͠$44΁ຒΊࠐΉ ελΠϧΨΠυͷੜ੒ ςετ

Slide 6

Slide 6 text

(SVOUͱͷҧ͍ ΑΓOPEF $PNNPO+4 ͬΆ͍ॻ͖ํ ϝλϑΝΠϧ͕+4ͱͯ͠׬݁ͯͨ͠Γ 4USFBNΛར༻ͯ͠ॲཧΛͨ͠Γ ϝιουνΣΠϯͰॲཧΛॻ͍͍ͯ͘ λεΫϥϯφʔͱͯ͠͸ൈ܈ʹॻ͖΍͍͢ ௚ײతͰ࠷௿ݶͷ"1* ޙൃͳͷͰ·ͩϓϥάΠϯͷ਺͸(SVOUʹٴ͹ͳ͍ EJGGUP

Slide 7

Slide 7 text

࣮ࡍʹ΍ͬͯΈΑ͏ ͡Ό͋

Slide 8

Slide 8 text

ࠓճ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 9

Slide 9 text

ࠓճ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 10

Slide 10 text

४උ ࠇ͍ը໘Λ࢖͍·͢ ! σΟϨΫτϦΛ࡞͓ͬͯ͘ ࠓޙɺ͜ͷσΟϨΫτϦͷதͰ࡞ۀ͠·͢ $ mkdir gulp_training $ cd gulp_training

Slide 11

Slide 11 text

४උʢʣ ࡶʹIUNMΛॻ͘ JOEFYIUNM
͸͍
͍͍͑
͋ͱͰ

Slide 12

Slide 12 text

४උʢʣ ࡶʹ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(); }

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

QBDLBHFKTPOΛ ࡞͓ͬͯ͘ ར༻ʢґଘʣ͢ΔύοέʔδΛه࿥ɾڞ༗͢ΔͨΊʹɺ QBDLBHFKTPOΛ࡞੒͓ͯ͘͠ $ npm init ΢Οβʔυʹରͯ͠ɺ͢΂ͯ&OUFSΩʔʢ:FTʣͰ0,

Slide 15

Slide 15 text

HVMQͷΠϯετʔϧ $-*Ͱ࢖͑ΔΑ͏ʹάϩʔόϧΠϯετʔϧ $ npm install -g gulp

Slide 16

Slide 16 text

HVMQͷϓϥάΠϯͷ Πϯετʔϧ ࠓճ͸MFTTͷίϯύΠϧΛͯ͠ΈΔ HVMQຊମͱHVMQMFTTΛೖΕΔ $ npm install --save-dev gulp gulp-less

Slide 17

Slide 17 text

QBDLBHFKTPOʹ͍ͭͯ OQNJOTUBMMͷͱ͖ʹʮTBWFʯ΍ʮTBWFEFWʯΛͭ ͚ΔͱɺQBDLBHFKTPOʹه࿥͞ΕΔ ͜ͷQBDLBHFKTPOΛHJUͳͲͰ؅ཧɾڞ༗͢Ε͹ɺ ίϛοτ͍ͯ͠Δଞͷϝϯόʔ͸ʮOQNJOTUBMMʯ͚ͩͰ ඞཁͳύοέʔδΛΠϯετʔϧͰ͖Δ ʮHʯΛ͚ͭͨ΋ͷ͸ه࿥͞Εͳ͍ ϓϩδΣΫτͰ͸ͳ͘؀ڥʹΠϯετʔϧ͢ΔͨΊ ʢิ଍ʣ

Slide 18

Slide 18 text

HVMQpMFKTΛ࡞Δ ʮHVMQpMFKTʯͱ͍͏໊લͷϑΝΠϧΛ࡞Γ·͢ $ atom gulpfile.js ීஈ࢖ͬͯΔΤσΟλ͕͋Δਓ͸ɺTVCMͩͬͨΓWJͩͬͨΓɺ ͦΕͧΕ͍͍ײ͡ʹ΍͍ͬͯͩ͘͞

Slide 19

Slide 19 text

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('./')); });

Slide 20

Slide 20 text

HVMQpMFKTͱ͸ HVMQͷλεΫͱॲཧΛهड़͢Δ ୯ମͷKTϑΝΠϧͰɺ+BWBTDSJQUΛॻ͘ OPEFKTͰී௨ʹಈ͘ͷͰ؀ڥม਺ͳΜ͔΋ΠέΔ 3VCZͷ3BLFͰ͍͏3BLFpMFʹ͍ۙ HVMQͷSFRVJSFΛআ͚͹ɺϑΝΠϧ୯ମ͕Ϟδϡʔϧͱ͠ ͯ׬͍݁ͯ͠ΔͷͰɺґଘؔ܎͕Θ͔Γ΍͍͢ ʢิ଍ʣ

Slide 21

Slide 21 text

HVMQΛಈ͔ͯ͠ΈΔ ʮHVMQʯίϚϯυͰHVMQΛಈ͔͢ $ gulp

Slide 22

Slide 22 text

͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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

Slide 23

Slide 23 text

Ͱ͖ͨͶʂʂʂ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 24

Slide 24 text

͡Ό͋࣍ʹ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 25

Slide 25 text

HVMQͷϓϥάΠϯͷ ௥ՃΠϯετʔϧ $44ͷѹॖͱɺ෼͚ͯग़ͨ͢ΊʹϦωʔϜΛ͍ͨ͠ HVMQDTTPͱHVMQSFOBNFΛೖΕΔ $ npm install --save-dev gulp-csso gulp-rename

Slide 26

Slide 26 text

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('./')); });

Slide 27

Slide 27 text

͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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

Slide 28

Slide 28 text

Ͱ͖ͨͶʂʂʂʂʂʂʂ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 29

Slide 29 text

࠷ޙʹ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 30

Slide 30 text

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']) });

Slide 31

Slide 31 text

͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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

Slide 32

Slide 32 text

Ͱ͖ͨͶʂʂʂʂʂ ͍͢͝Ͷʂʂʂ MFTTΛDTTʹม׵͍ͨ͠ ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠

Slide 33

Slide 33 text

ϋϯζΦϯ·ͱΊ HVMQΛOQNͰάϩʔόϧΠϯετʔϧ͢Δ HVMQϓϥάΠϯΛOQNͰϩʔΧϧΠϯετʔϧ͢Δ ͜ͷ࣌ɺTBWFEFWͯ͠QBDLBHFKTPOʹه࿥͢΂͖ HVMQϓϥάΠϯ͸SFRVJSFͯ͠ɺQJQFʹ౉͢ ϝιουνΣΠϯͰܨ͛ͯ௨ͤΔ HVMQXBUDI͍ͬͯ͏΍ͭͰϑΝΠϧͷ؂ࢹ͕Ͱ͖Δ λεΫ΍ॲཧΛॻ͖଍͢ͷָ͕͍͢͝

Slide 34

Slide 34 text

"1*ͷઆ໌ ͬ͘͞Γͱ

Slide 35

Slide 35 text

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']) }); λεΫͷ࡞੒

Slide 36

Slide 36 text

λεΫͷ࡞੒ʢʣ ʮHVMQλεΫ໊ʯͷΑ͏ʹ࣮ߦ͢ΔͨΊͷλεΫΛఆٛ͢Δ OBNF͸ɺλεΫ໊Λ4USJOHͰࢦఆ͢Δ ʮEFGBVMUʯͱ͍͏λεΫ໊͸༧໿ޠɺʮHVMQʯͷΈͰ࣮ߦͰ͖Δ EFQT͸ɺ͜ͷλεΫͷલʹ࣮ߦ͍ͤͨ͞λεΫ໊Λ"SSBZͰࢦఆͰ͖Δ ෳ਺ͷλεΫΛͭͷΤϯτϦϙΠϯτʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ ͳͯ͘΋Α͍ GOʹ͸ɺλεΫͷத਎Λ'VODUJPOͱͯ͠౉͢ gulp.task(name, [deps], fn)

Slide 37

Slide 37 text

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']) }); ϑΝΠϧͷಡΈࠐΈ

Slide 38

Slide 38 text

ϑΝΠϧͷಡΈࠐΈʢʣ HMPCT͸ɺHMPCͱͳΔ4USJOH͔ɺͦΕΒ͕֨ೲ͞Εͨ"SSBZΛࢦఆ͢Δ ෳ਺౉ͨ͠৔߹ɺҎ߱ͷQJQF͸HMPCT͢΂ͯʹ͔͔Δ PQUJPOTͰϑϥάΛཱͯΔͱCV⒎FSͱͯ͠ಡΈࠐΜͩΓ৭ʑͰ͖Δ ͋·Γ΍Βͳ͍ͱࢥ͏ͷͰׂѪɺ"1*ࢀর ΋ͪΖΜͳͯ͘΋Α͍ 4USFBN͕ฦΔ QJQFԽͨ͠ϓϥάΠϯΛ௨ͤΔ gulp.src(globs [, options])

Slide 39

Slide 39 text

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Λ௨͢

Slide 40

Slide 40 text

QJQFΛ௨͢ʢʣ HVMQTSDͰฦͬͨ4USFBNʹ͸ɺQJQFԽ͞ΕͨHVMQͷϓϥάΠϯΛ௨͢͜ ͱ͕Ͱ͖Δ ͖ͬ͞ͷྫͩͱɺHVMQMFTT΍HVMQSFOBNFͳͲ͕ͦΕʹ͋ͨΔ QJQF͸ͦͷ··ܧଓͯ͠4USFBNΛฦ͢ͷͰɺϝιουνΣΠϯͯ࣍͠ʑ ʹQJQFΛ௨͢͜ͱ͕Ͱ͖Δ gulp.src(...).pipe(pipedGulpPlugin)

Slide 41

Slide 41 text

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']) }); ϑΝΠϧͷॻ͖ग़͠

Slide 42

Slide 42 text

ϑΝΠϧͷॻ͖ग़͠ʢʣ ࢦఆͨ͠QBUIʹϑΝΠϧΛॻ͖ग़͢ QBUIͰࢦఆͰ͖Δͷ͸σΟϨΫτϦ໊·Ͱ ϦωʔϜ͍ͨ͠৔߹͸HVMQSFOBNFΛQJQFͰ௨͢ σΟϨΫτϦ͕ଘࡏ͠ͳ͍৔߹͸ࣗಈతʹ࡞ΒΕΔ PQUJPOTͰϑΝΠϧͷύʔϛογϣϯࢦఆͨ͠ΓͰ͖Δ HVMQEFTUࣗମ͕QJQFͰ௨ͤΔ gulp.dest(path [, options])

Slide 43

Slide 43 text

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']) }); ϑΝΠϧͷ؂ࢹ

Slide 44

Slide 44 text

ϑΝΠϧͷ؂ࢹʢʣ HMPCʹ4USJOHͰࢦఆ͞ΕͨϑΝΠϧΛ؂ࢹ͢Δ UBTLTʹ͸HVMQUBTLͰఆ͍ٛͯ͠ΔλεΫ໊Λ"SSBZͰࢦఆ͢Δ (SVOUͱಉ͡Α͏ʹ಺෦ͰHB[Fͱ͍͏ύοέʔδΛ࢖͍ͬͯͯɺ PQUJPOTͷͦͷ΁Μͷ"1*͸ಉ͡ ୈࡾҾ਺ʢUBTLTʣʹ"SSBZ͡Όͳͯ͘'VODUJPOΛ౉͢ͱɺ DCతͳײ͡ʹΰχϣΰχϣ͢Δ͜ͱ΋Ͱ͖Δ gulp.watch(glob [, options], tasks)

Slide 45

Slide 45 text

͜Μ͚ͩͰ͢ EPDTʹ΋͜Ε͔͠ࡌͬͯͳ͍

Slide 46

Slide 46 text

"1*·ͱΊ HVMQUBTLͰλεΫΛఆٛ͢Δ ͜Εͷલʹ͜ͷλεΫ΍ͬͯͶɺΈ͍ͨͳͷΧϯλϯ HVMQTSDͰϑΝΠϧΛಡΈࠐΉ HVMQTSDͨ͠΋ͷʹQJQFͯ͠ɺॲཧΛ௨͍ͯ͘͠ ग़ྗ͢Δͱ͖͸HVMQEFTU HVMQEFTUࣗମ΋QJQFʹ௨͢ͷͰɺNJOJGZ͢Δ࣌ͱָ͔

Slide 47

Slide 47 text

2" Կ͔͋Γ·͔͢ʁ

Slide 48

Slide 48 text

ଞʹ΋ֶͼํͱ͔ QMVHJOͷ୳͠ํͱ͔ ެࣜυΩϡϝϯτ https://github.com/gulpjs/gulp/blob/master/docs/README.md ! HVMQKTͦͷϓϥάΠϯҰཡ http://qiita.com/oreo3@github/items/0f037e7409be02336cb9 ! OQNͱ͔(JU)VCΛఆظతʹXBUDI͢ΔͱΑ͍ υΩϡϝϯτʹSFDJQFT͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍

Slide 49

Slide 49 text

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠