Gulp 芸

Gotanda.js #1
https://gotandajs.connpass.com/event/20838/

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