Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kohei Asai
September 30, 2014

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

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

Kohei Asai

September 30, 2014
Tweet

More Decks by Kohei Asai

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. ࣗݾ঺հ
    ͍͋͜͞͏΁͍
    6*69σβΠϯ෦ϑϩϯτΤϯυΤϯδχΞతͳ΍ͭ

    ೥݄຤ೖࣾ
    OPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ
    !
    Github : @axross
    Twitter : @axross_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. ४උʢʣ
    ࡶʹIUNMΛॻ͘
    JOEFYIUNM







    ͸͍
    ͍͍͑
    ͋ͱͰ

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  34. "1*ͷઆ໌
    ͬ͘͞Γͱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. 2"
    Կ͔͋Γ·͔͢ʁ

    View Slide

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

    View Slide

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

    View Slide