Gulp 芸

Transcript

1. 1.

   HVMQ
   ܳ 
   (PUBOEBKT
   
   !IPUP

2. 2.

   None
3. 3.

   +PJO
   4MBDL
    http://gotanda.js.org/

4. 4.

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

5. 5.

   HVMQKT TDTT DTT
   NJO
   H[ H[JQ TBTT NJOJGZ TSD EFTU

   QJQF QJQF
6. 6.

   ;ͭ͏ͷ࢖͍ํ • ES2015 / AltJS Λ ES5 ʹτϥϯεύΠϧ • JS

   ͷ minify / bundle • Sass ΛίϯύΠϧ / minify / autoprefix • gzip ੜ੒ • lint
7. 7.

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

8. 8.

   !IPUP • ϒϩά৬ਓ • ͍··Ͱʹ 9 ճϒϩάΛ࡞Γͳ͓͍ͯ͠Δ • ͳ͓ɺϒϩάΛ࡞ͬͯຬ଍ͯ͠͠·ͬͯ
 ͋·ΓهࣄΛॻ͚͍ͯͳ͍໛༷

9. 9.

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

   • Jekyll + GitHub Pages • ϓϥάΠϯ࢖͑ͳ͍ͷͰΧελϜͮ͠Β͍
10. 10.

    ࡞Γ͍ͨϒϩά
    ཁ݅ • ੩తͳϖʔδ܈ͱͯ͠ϏϧυͰ͖Δ • ಈతͳΞϓϦͷӡ༻͸͕͔͔ۚΔ • ੩తͳϖʔδͳΒແྉͰ΋ӡ༻Ͱ͖Δ • खܰʹॻ͚ͯखܰʹެ։Ͱ͖Δ

    • Markdown Ͱॻ͚Δ • ॻ͖ͳ͕Β֬ೝͰ͖Δ
11. 11.

    ࡞Γ͍ͨϒϩά
    ཁ݅ • Jekyll ෩ʹهࣄʹϝλ৘ใΛઃఆͰ͖Δ • tag, description, og-image ͳͲ

    • ύʔϚϦϯΫ͕࢖͑Δ • http://hotolab.net/blog/{entry_title}
12. 12.

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

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

    
    ύʔϚϦϯΫͬΆ͘͢Δ .pipe(rename((path) => { path.dirname += '/' + path.basename; path.basename

    = 'index'; path.extname = 'html'; return path; })) • gulp-rename
17. 17.

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

    gulp-layout
18. 18.

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

    gulp-frontmatter
19. 19.

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

20. 20.

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

21. 21.

    
    ެ։͢Δ
    
    (JU)VC
    1BHFT
    gulp.src('./public/**') .pipe(ghPages()); • gulp-gh-pages

22. 22.

    
    ެ։͢Δ
    
    "NB[PO
    4
    gulp.src('./public/**') .pipe(s3({ Bucket: "bucket-name", ... })); • gulp-s3-upload

23. 23.

    
    ެ։͢Δ
    
    '51
    gulp.src('./public/**') .pipe(ftp({ host: 'example.com', user: 'hoto', pass: '1234'

    })); • gulp-ftp
24. 24.

    
    4/4
    Ͱ֦ࢄ͢Δ var oauth = { consumerKey: '...', ... }; gulp.src('package.json')

    .pipe(twitter(oauth, 'ϒϩάߋ৽!!!')); • gulp-twitter
25. 25.

    ͦͷଞ • gulp-favicons: favicon ͳͲΛ·ͱΊͯੜ੒ • gulp-fontmin: ϑΥϯτͷαϒηοτΛ࡞੒ • gulp-robots:

    robots.txt Λੜ੒ • gulp-email: ϝʔϧΛૹΔ
26. 26.

    %&.0

27. 27.

    ͔ͨͬͨ͠
    ʅŋ@ŋA

28. 28.

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

29. 29.

    &OKPZ