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

nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。

Transcript

1. HVMQΛ࢖͏ͱ
   ൴ঁ͕Ͱ͖·͢ ͔ΜͨΜͳ঺հͱϋϯζΦϯ
2. ͓͠ͳ͕͖ HVMQͷ͔ΜͨΜͳઆ໌
   ΏΔ͍ϋϯζΦϯ
   ϋϯζΦϯͰ࢖ͬͨίʔυͷղઆͭͭ͠"1*ͷઆ໌
3. ࣗݾ঺հ ͍͋͞
   ͜͏΁͍
   6*
   
   69
   σβΠϯ෦
   
   
   ϑϩϯτΤϯυΤϯδχΞ
   తͳ΍ͭ
   ೥
   ݄຤
   ೖࣾ
   OPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ
   ! Github : @axross Twitter : @axross_
4. ஌ͬͯ·͔͢ʁ /PEFKTͰಈ͘
   ϏϧυγεςϜϔϧύʔʢλεΫϥϯφʔΈ͍ͨͳ΋Μʣ
   ϑϩϯτΤϯυ։ൃͰͷ࡞ۀΛࣗಈԽͨ͠Γ͢Δ
   (SVOUΈ͍ͨͳ΍ͭ
   طଘͷ044ϓϩδΣΫτͷ͍͔ͭ͘͸HVMQ΁Ҡߦɺ
   ৽نͷ΋ͷ΋HVMQͷ࠾༻ྫ͕૿͍͑ͯΔ໛༷
5. ࣗಈԽ͍ͨ͜͠ͱ MFTT΍4$44ͷίϯύΠϧ
   $44ͷϕϯμʔϓϦϑΟοΫεͷ௥ه΍ѹॖ
   $P⒎FF4DSJQU΍5ZQF4DSJQUͷίϯύΠϧ
   +BWBTDSJQUͷґଘղܾ΍ܰྔԽɾ೉ಡԽ
   ը૾ͷ࠷దԽ΍CBTFԽͯ͠$44΁ຒΊࠐΉ
   ελΠϧΨΠυͷੜ੒
   ςετ
6. (SVOUͱͷҧ͍ ΑΓOPEF
   $PNNPO+4
   ͬΆ͍ॻ͖ํ
   ϝλϑΝΠϧ͕+4ͱͯ͠׬݁ͯͨ͠Γ
   4USFBNΛར༻ͯ͠ॲཧΛͨ͠Γ
   ϝιουνΣΠϯͰॲཧΛॻ͍͍ͯ͘
   λεΫϥϯφʔͱͯ͠͸ൈ܈ʹॻ͖΍͍͢
   ௚ײతͰ࠷௿ݶͷ"1*
   ޙൃͳͷͰ·ͩϓϥάΠϯͷ਺͸(SVOUʹٴ͹ͳ͍ EJGG
   UP
7. ࣮ࡍʹ΍ͬͯΈΑ͏ ͡Ό͋
8. ࠓճ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠
   ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
   ͜ΕΒΛࣗಈԽ͍ͨ͠
9. ࠓճ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠
   ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
   ͜ΕΒΛࣗಈԽ͍ͨ͠
10. ४උ ࠇ͍ը໘Λ࢖͍·͢
    ! σΟϨΫτϦΛ࡞͓ͬͯ͘
    ࠓޙɺ͜ͷσΟϨΫτϦͷதͰ࡞ۀ͠·͢ $ mkdir gulp_training $ cd gulp_training
11. ४උʢʣ ࡶʹ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>
12. ४උʢʣ ࡶʹ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(); }
13. 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
14. QBDLBHFKTPOΛ
    ࡞͓ͬͯ͘ ར༻ʢґଘʣ͢ΔύοέʔδΛه࿥ɾڞ༗͢ΔͨΊʹɺ QBDLBHFKTPOΛ࡞੒͓ͯ͘͠
    $ npm init ΢Οβʔυʹରͯ͠ɺ͢΂ͯ&OUFSΩʔʢ:FTʣͰ0,
15. HVMQͷΠϯετʔϧ $-*Ͱ࢖͑ΔΑ͏ʹάϩʔόϧΠϯετʔϧ $ npm install -g gulp
16. HVMQͷϓϥάΠϯͷ
    Πϯετʔϧ ࠓճ͸MFTTͷίϯύΠϧΛͯ͠ΈΔ
    HVMQຊମͱHVMQMFTTΛೖΕΔ $ npm install --save-dev gulp gulp-less
17. QBDLBHFKTPOʹ͍ͭͯ OQN
    JOTUBMMͷͱ͖ʹʮTBWFʯ΍ʮTBWFEFWʯΛͭ ͚ΔͱɺQBDLBHFKTPOʹه࿥͞ΕΔ
    ͜ͷQBDLBHFKTPOΛHJUͳͲͰ؅ཧɾڞ༗͢Ε͹ɺ
    
    
    
    
    
    ίϛοτ͍ͯ͠Δଞͷϝϯόʔ͸ʮOQN
    JOTUBMMʯ͚ͩͰ ඞཁͳύοέʔδΛΠϯετʔϧͰ͖Δ
    ʮHʯΛ͚ͭͨ΋ͷ͸ه࿥͞Εͳ͍
    ϓϩδΣΫτͰ͸ͳ͘؀ڥʹΠϯετʔϧ͢ΔͨΊ ʢิ଍ʣ
18. HVMQpMFKTΛ࡞Δ ʮHVMQpMFKTʯͱ͍͏໊લͷϑΝΠϧΛ࡞Γ·͢ $ atom gulpfile.js ීஈ࢖ͬͯΔΤσΟλ͕͋Δਓ͸ɺTVCMͩͬͨΓWJͩͬͨΓɺ
    ͦΕͧΕ͍͍ײ͡ʹ΍͍ͬͯͩ͘͞
19. 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('./')); });
20. HVMQpMFKTͱ͸ HVMQͷλεΫͱॲཧΛهड़͢Δ
    ୯ମͷKTϑΝΠϧͰɺ+BWBTDSJQUΛॻ͘
    OPEFKTͰී௨ʹಈ͘ͷͰ؀ڥม਺ͳΜ͔΋ΠέΔ
    3VCZͷ3BLFͰ͍͏3BLFpMFʹ͍ۙ
    HVMQͷSFRVJSFΛআ͚͹ɺϑΝΠϧ୯ମ͕Ϟδϡʔϧͱ͠ ͯ׬͍݁ͯ͠ΔͷͰɺґଘؔ܎͕Θ͔Γ΍͍͢ ʢิ଍ʣ
21. HVMQΛಈ͔ͯ͠ΈΔ ʮHVMQʯίϚϯυͰHVMQΛಈ͔͢ $ gulp
22. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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
23. Ͱ͖ͨͶʂʂʂ MFTTΛDTTʹม׵͍ͨ͠
    ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
    ͜ΕΒΛࣗಈԽ͍ͨ͠
24. ͡Ό͋࣍ʹ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠
    ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
    ͜ΕΒΛࣗಈԽ͍ͨ͠
25. HVMQͷϓϥάΠϯͷ
    ௥ՃΠϯετʔϧ $44ͷѹॖͱɺ෼͚ͯग़ͨ͢ΊʹϦωʔϜΛ͍ͨ͠
    HVMQDTTPͱHVMQSFOBNFΛೖΕΔ $ npm install --save-dev gulp-csso gulp-rename
26. 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('./')); });
27. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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
28. Ͱ͖ͨͶʂʂʂʂʂʂʂ MFTTΛDTTʹม׵͍ͨ͠
    ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
    ͜ΕΒΛࣗಈԽ͍ͨ͠
29. ࠷ޙʹ΍Γ͍ͨ͜ͱ MFTTΛDTTʹม׵͍ͨ͠
    ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
    ͜ΕΒΛࣗಈԽ͍ͨ͠
30. 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']) });
31. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ 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
32. Ͱ͖ͨͶʂʂʂʂʂ
    ͍͢͝Ͷʂʂʂ MFTTΛDTTʹม׵͍ͨ͠
    ͦΕΛNJOJGZʢ୹ॖԽʣͨ͠΋ͷΛผʹग़ྗ͍ͨ͠
    ͜ΕΒΛࣗಈԽ͍ͨ͠
33. ϋϯζΦϯ·ͱΊ HVMQΛOQNͰάϩʔόϧΠϯετʔϧ͢Δ
    HVMQϓϥάΠϯΛOQNͰϩʔΧϧΠϯετʔϧ͢Δ
    ͜ͷ࣌ɺTBWFEFWͯ͠QBDLBHFKTPOʹه࿥͢΂͖
    HVMQϓϥάΠϯ͸SFRVJSFͯ͠ɺQJQFʹ౉͢
    ϝιουνΣΠϯͰܨ͛ͯ௨ͤΔ
    HVMQXBUDI͍ͬͯ͏΍ͭͰϑΝΠϧͷ؂ࢹ͕Ͱ͖Δ
    λεΫ΍ॲཧΛॻ͖଍͢ͷָ͕͍͢͝
34. "1*ͷઆ໌ ͬ͘͞Γͱ
35. 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']) }); λεΫͷ࡞੒
36. λεΫͷ࡞੒ʢʣ ʮHVMQ
    λεΫ໊ʯͷΑ͏ʹ࣮ߦ͢ΔͨΊͷλεΫΛఆٛ͢Δ
    OBNF͸ɺλεΫ໊Λ4USJOHͰࢦఆ͢Δ
    ʮEFGBVMUʯͱ͍͏λεΫ໊͸༧໿ޠɺʮHVMQʯͷΈͰ࣮ߦͰ͖Δ
    EFQT͸ɺ͜ͷλεΫͷલʹ࣮ߦ͍ͤͨ͞λεΫ໊Λ"SSBZͰࢦఆͰ͖Δ
    ෳ਺ͷλεΫΛͭͷΤϯτϦϙΠϯτʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ
    ͳͯ͘΋Α͍
    GOʹ͸ɺλεΫͷத਎Λ'VODUJPOͱͯ͠౉͢ gulp.task(name, [deps], fn)
37. 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']) }); ϑΝΠϧͷಡΈࠐΈ
38. ϑΝΠϧͷಡΈࠐΈʢʣ HMPCT͸ɺHMPCͱͳΔ4USJOH͔ɺͦΕΒ͕֨ೲ͞Εͨ"SSBZΛࢦఆ͢Δ
    ෳ਺౉ͨ͠৔߹ɺҎ߱ͷQJQF͸HMPCT͢΂ͯʹ͔͔Δ
    PQUJPOTͰϑϥάΛཱͯΔͱCV⒎FSͱͯ͠ಡΈࠐΜͩΓ৭ʑͰ͖Δ
    ͋·Γ΍Βͳ͍ͱࢥ͏ͷͰׂѪɺ"1*ࢀর
    ΋ͪΖΜͳͯ͘΋Α͍
    4USFBN͕ฦΔ
    QJQFԽͨ͠ϓϥάΠϯΛ௨ͤΔ
    gulp.src(globs [, options])
39. 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Λ௨͢
40. QJQFΛ௨͢ʢʣ HVMQTSDͰฦͬͨ4USFBNʹ͸ɺQJQFԽ͞ΕͨHVMQͷϓϥάΠϯΛ௨͢͜ ͱ͕Ͱ͖Δ
    ͖ͬ͞ͷྫͩͱɺHVMQMFTT΍HVMQSFOBNFͳͲ͕ͦΕʹ͋ͨΔ
    QJQF͸ͦͷ··ܧଓͯ͠4USFBNΛฦ͢ͷͰɺϝιουνΣΠϯͯ࣍͠ʑ ʹQJQFΛ௨͢͜ͱ͕Ͱ͖Δ gulp.src(...).pipe(pipedGulpPlugin)
41. 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']) }); ϑΝΠϧͷॻ͖ग़͠
42. ϑΝΠϧͷॻ͖ग़͠ʢʣ ࢦఆͨ͠QBUIʹϑΝΠϧΛॻ͖ग़͢
    QBUIͰࢦఆͰ͖Δͷ͸σΟϨΫτϦ໊·Ͱ
    ϦωʔϜ͍ͨ͠৔߹͸HVMQSFOBNFΛQJQFͰ௨͢
    σΟϨΫτϦ͕ଘࡏ͠ͳ͍৔߹͸ࣗಈతʹ࡞ΒΕΔ
    PQUJPOTͰϑΝΠϧͷύʔϛογϣϯࢦఆͨ͠ΓͰ͖Δ
    HVMQEFTUࣗମ͕QJQFͰ௨ͤΔ gulp.dest(path [, options])
43. 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']) }); ϑΝΠϧͷ؂ࢹ
44. ϑΝΠϧͷ؂ࢹʢʣ HMPCʹ4USJOHͰࢦఆ͞ΕͨϑΝΠϧΛ؂ࢹ͢Δ
    UBTLTʹ͸HVMQUBTLͰఆ͍ٛͯ͠ΔλεΫ໊Λ"SSBZͰࢦఆ͢Δ
    (SVOUͱಉ͡Α͏ʹ಺෦ͰHB[Fͱ͍͏ύοέʔδΛ࢖͍ͬͯͯɺ
    
    
    PQUJPOTͷͦͷ΁Μͷ"1*͸ಉ͡
    ୈࡾҾ਺ʢUBTLTʣʹ"SSBZ͡Όͳͯ͘'VODUJPOΛ౉͢ͱɺ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    DCతͳײ͡ʹΰχϣΰχϣ͢Δ͜ͱ΋Ͱ͖Δ gulp.watch(glob [, options], tasks)
45. ͜Μ͚ͩͰ͢ EPDTʹ΋͜Ε͔͠ࡌͬͯͳ͍
46. "1*
    ·ͱΊ HVMQUBTLͰλεΫΛఆٛ͢Δ
    ͜Εͷલʹ͜ͷλεΫ΍ͬͯͶɺΈ͍ͨͳͷΧϯλϯ
    HVMQTSDͰϑΝΠϧΛಡΈࠐΉ
    HVMQTSDͨ͠΋ͷʹQJQFͯ͠ɺॲཧΛ௨͍ͯ͘͠
    ग़ྗ͢Δͱ͖͸HVMQEFTU
    HVMQEFTUࣗମ΋QJQFʹ௨͢ͷͰɺNJOJGZ͢Δ࣌ͱָ͔
47. 2" Կ͔͋Γ·͔͢ʁ
48. ଞʹ΋ֶͼํͱ͔
    QMVHJOͷ୳͠ํͱ͔ ެࣜυΩϡϝϯτ
    https://github.com/gulpjs/gulp/blob/master/docs/README.md ! HVMQKT
    ͦͷ
    ϓϥάΠϯҰཡ
    http://qiita.com/oreo3@github/items/0f037e7409be02336cb9 ! OQNͱ͔(JU)VCΛఆظతʹXBUDI͢ΔͱΑ͍
    υΩϡϝϯτʹSFDJQFT͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
49. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠