nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。
HVMQΛ͏ͱ൴ঁ͕Ͱ͖·͔͢ΜͨΜͳհͱϋϯζΦϯ
View Slide
͓͠ͳ͕͖HVMQͷ͔ΜͨΜͳઆ໌ΏΔ͍ϋϯζΦϯϋϯζΦϯͰͬͨίʔυͷղઆͭͭ͠"1*ͷઆ໌
ࣗݾհ͍͋͜͞͏͍6*69σβΠϯ෦ϑϩϯτΤϯυΤϯδχΞతͳ݄ͭೖࣾOPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ!Github : @axrossTwitter : @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ʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͜͠ΕΒΛࣗಈԽ͍ͨ͠
४උࠇ͍ը໘Λ͍·͢!σΟϨΫτϦΛ࡞͓ͬͯ͘ࠓޙɺ͜ͷσΟϨΫτϦͷதͰ࡞ۀ͠·͢$ mkdir gulp_training$ cd gulp_training
४උʢʣࡶʹIUNMΛॻ͘JOEFYIUNM͍͍͍͑͋ͱͰ
४උʢʣࡶʹ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Λ࡞Δ͜Μͳײ͡ʹॻ͖·͢HVMQpMFKTvar 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ʯ͕ੜ͞Ε͍ͯΔ% lsgulpfile.js node_modules/ style.cssindex.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 msTUZMFDTTʹՃ͑ɺʮTUZMFNJODTTʯ͕ੜ͞Ε͍ͯΔ% lsgulpfile.js node_modules/ style.css style.min.cssindex.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 msTUZMFMFTTΛฤूͯ͠อଘ͢Δͱɺউखʹʮ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ͯ͠ɺॲཧΛ௨͍ͯ͘͠ग़ྗ͢Δͱ͖HVMQEFTUHVMQEFTUࣗମ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͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
axross
kazuhitoyokoi
lanberb
beenos
sr2mg4
star_zero
hiranabe
nozomiito
manfredsteyer
ogiwarat
yatasunshine
tagomoris
lhespanha
thekraken
tammielis
mojombo
mraible
lara
skipperchong
stephaniewalter
jnunemaker
destraynor
ddemaree
marcduiker
denniskardys