gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン

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

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

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

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

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

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

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

ࠓճ΍Γ͍ͨ͜ͱ 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*ͷઆ໌ ͬ͘͞Γͱ

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

= 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Λࢦఆ͢Δ ෳ਺౉ͨ͠৔߹ɺҎ߱ͷQJQF͸HMPCT͢΂ͯʹ͔͔Δ PQUJPOTͰϑϥάΛཱͯΔͱCV⒎FSͱͯ͠ಡΈࠐΜͩΓ৭ʑͰ͖Δ ͋·Γ΍Βͳ͍ͱࢥ͏ͷͰׂѪɺ"1*ࢀর ΋ͪΖΜͳͯ͘΋Α͍ 4USFBN͕ฦΔ QJQFԽͨ͠ϓϥάΠϯΛ௨ͤΔ gulp.src(globs [,
options])

= 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ͷϓϥάΠϯΛ௨͢͜ ͱ͕Ͱ͖Δ ͖ͬ͞ͷྫͩͱɺHVMQMFTT΍HVMQSFOBNFͳͲ͕ͦΕʹ͋ͨΔ QJQF͸ͦͷ··ܧଓͯ͠4USFBNΛฦ͢ͷͰɺϝιουνΣΠϯͯ࣍͠ʑ ʹQJQFΛ௨͢͜ͱ͕Ͱ͖Δ gulp.src(...).pipe(pipedGulpPlugin)

= 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])

= 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͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠

gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン

gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン

More Decks by Kohei Asai

Other Decks in Programming

Featured

Transcript