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

Gulp 芸

Gulp 芸

Yuki Ishikawa

October 28, 2015
Tweet

More Decks by Yuki Ishikawa

Other Decks in Technology

Transcript

  1. HVMQܳ
    (PUBOEBKT
    !IPUP

    View Slide

  2. View Slide

  3. +PJO4MBDL
    http://gotanda.js.org/

    View Slide

  4. HVMQKT
    • λεΫϥϯφʔ
    • Node.js ͷ Stream API

    View Slide

  5. HVMQKT
    TDTT
    DTT
    NJO
    H[
    H[JQ
    TBTT NJOJGZ
    TSD EFTU
    QJQF QJQF

    View Slide

  6. ;ͭ͏ͷ࢖͍ํ
    • ES2015 / AltJS Λ ES5 ʹτϥϯεύΠϧ
    • JS ͷ minify / bundle
    • Sass ΛίϯύΠϧ / minify / autoprefix
    • gzip ੜ੒
    • lint

    View Slide

  7. ;ͭ͏͡Όͳ͍࢖͍ํ
    • ϒϩάͱͯ͠࢖͏

    View Slide

  8. !IPUP
    • ϒϩά৬ਓ
    • ͍··Ͱʹ 9 ճϒϩάΛ࡞Γͳ͓͍ͯ͠Δ
    • ͳ͓ɺϒϩάΛ࡞ͬͯຬ଍ͯ͠͠·ͬͯ

    ͋·ΓهࣄΛॻ͚͍ͯͳ͍໛༷

    View Slide

  9. ͍·ͷϒϩά
    • http://hotolab.net/
    • ࠷ۙʮ jQuery ໓ͼΑʯͱ͔ݴͬͯΔͷʹ

    ϒϩάͷσβΠϯʹ jQuery Λ࢖͍ͬͯΔ
    • Jekyll + GitHub Pages
    • ϓϥάΠϯ࢖͑ͳ͍ͷͰΧελϜͮ͠Β͍

    View Slide

  10. ࡞Γ͍ͨϒϩά ཁ݅

    • ੩తͳϖʔδ܈ͱͯ͠ϏϧυͰ͖Δ
    • ಈతͳΞϓϦͷӡ༻͸͕͔͔ۚΔ
    • ੩తͳϖʔδͳΒແྉͰ΋ӡ༻Ͱ͖Δ
    • खܰʹॻ͚ͯखܰʹެ։Ͱ͖Δ
    • Markdown Ͱॻ͚Δ
    • ॻ͖ͳ͕Β֬ೝͰ͖Δ

    View Slide

  11. ࡞Γ͍ͨϒϩά ཁ݅

    • Jekyll ෩ʹهࣄʹϝλ৘ใΛઃఆͰ͖Δ
    • tag, description, og-image ͳͲ
    • ύʔϚϦϯΫ͕࢖͑Δ
    • http://hotolab.net/blog/{entry_title}

    View Slide

  12. ʮ͸ͯͳϒϩάΛ࢖͑ʯ
    • ՝ۚ͠ͳ͍ͱಠࣗυϝΠϯ࢖͑ͳ͍
    • ϒϩάʹ݄1000ԁ͸ͪΐͬͱΩπ͍
    • ϙʔλϏϦςΟ͕ඍົ
    • Markdown ͷ··ΤΫεϙʔτͰ͖ͳ͍

    View Slide

  13. HVMQͰCMPH͕࡞ΕΔͷ͔
    • ڹ͖͕ࣅ͍ͯΔ͔Βଟ෼͍͚Δ

    View Slide

  14. σΟϨΫτϦߏ੒
    src/
    _posts/
    ***.md
    _layouts/
    assets/
    index.html.jade
    public/
    gulpfile.js

    View Slide

  15. ͳʹ͸ͱ΋͋Ε.BSLEPXO
    • gulp-markdown
    gulp.src('./src/_posts/*.md')
    .pipe(markdown())

    View Slide

  16. ύʔϚϦϯΫͬΆ͘͢Δ
    .pipe(rename((path) => {
    path.dirname += '/' + path.basename;
    path.basename = 'index';
    path.extname = 'html';
    return path;
    }))
    • gulp-rename

    View Slide

  17. ϨΠΞ΢τʹຒΊࠐΉ
    .pipe(layout({
    title: 'My New Blog!!!',
    layout: './src/_layout/default.jade'
    }))
    • gulp-layout

    View Slide

  18. ϝλ৘ใΛϨΠΞ΢τʹ౉͢
    gulp.src('./src/**/*.md')
    .pipe(frontMatter())
    .pipe(markdown())
    .pipe(layout(function(file) {
    return file.frontMatter;
    }))
    • gulp-frontmatter

    View Slide

  19. ࢀߟɿ+FLZMMͷϝλ৘ใຒΊࠐΈ
    ϝλ৘ใ
    ϚʔΫμ΢ϯ

    View Slide

  20. ֬ೝͰ͖ΔΑ͏ʹ͢Δ
    gulp.src('./public')
    .pipe(webserver({
    livereload: true,
    ...
    }));
    • gulp-webserver

    View Slide

  21. ެ։͢Δ (JU)VC1BHFT

    gulp.src('./public/**')
    .pipe(ghPages());
    • gulp-gh-pages

    View Slide

  22. ެ։͢Δ "NB[PO4

    gulp.src('./public/**')
    .pipe(s3({
    Bucket: "bucket-name",
    ...
    }));
    • gulp-s3-upload

    View Slide

  23. ެ։͢Δ '51

    gulp.src('./public/**')
    .pipe(ftp({
    host: 'example.com',
    user: 'hoto',
    pass: '1234'
    }));
    • gulp-ftp

    View Slide

  24. 4/4Ͱ֦ࢄ͢Δ
    var oauth = {
    consumerKey: '...',
    ...
    };
    gulp.src('package.json')
    .pipe(twitter(oauth, 'ϒϩάߋ৽!!!'));
    • gulp-twitter

    View Slide

  25. ͦͷଞ
    • gulp-favicons: favicon ͳͲΛ·ͱΊͯੜ੒
    • gulp-fontmin: ϑΥϯτͷαϒηοτΛ࡞੒
    • gulp-robots: robots.txt Λੜ੒
    • gulp-email: ϝʔϧΛૹΔ

    View Slide

  26. %&.0

    View Slide

  27. ͔ͨͬͨ͠ ʅŋ@ŋA

    View Slide

  28. ·ͱΊ
    • ϒϩά͸ gulp Ͱ࡞ΕΔʂʂʂ

    View Slide

  29. &OKPZ

    View Slide