Gulp 芸

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

Transcript

1. HVMQ
   ܳ 
   (PUBOEBKT
   
   !IPUP
3. +PJO
   4MBDL
    http://gotanda.js.org/
4. HVMQKT • λεΫϥϯφʔ • Node.js ͷ Stream API
5. HVMQKT TDTT DTT
   NJO
   H[ H[JQ TBTT NJOJGZ TSD EFTU QJQF QJQF
6. ;ͭ͏ͷ࢖͍ํ • ES2015 / AltJS Λ ES5 ʹτϥϯεύΠϧ • JS ͷ minify / bundle • Sass ΛίϯύΠϧ / minify / autoprefix • gzip ੜ੒ • lint
7. ;ͭ͏͡Όͳ͍࢖͍ํ • ϒϩάͱͯ͠࢖͏
8. !IPUP • ϒϩά৬ਓ • ͍··Ͱʹ 9 ճϒϩάΛ࡞Γͳ͓͍ͯ͠Δ • ͳ͓ɺϒϩάΛ࡞ͬͯຬ଍ͯ͠͠·ͬͯ
 ͋·ΓهࣄΛॻ͚͍ͯͳ͍໛༷
9. ͍·ͷϒϩά • http://hotolab.net/ • ࠷ۙʮ jQuery ໓ͼΑʯͱ͔ݴͬͯΔͷʹ
 ϒϩάͷσβΠϯʹ jQuery Λ࢖͍ͬͯΔ • Jekyll + GitHub Pages • ϓϥάΠϯ࢖͑ͳ͍ͷͰΧελϜͮ͠Β͍
10. ࡞Γ͍ͨϒϩά
    ཁ݅ • ੩తͳϖʔδ܈ͱͯ͠ϏϧυͰ͖Δ • ಈతͳΞϓϦͷӡ༻͸͕͔͔ۚΔ • ੩తͳϖʔδͳΒແྉͰ΋ӡ༻Ͱ͖Δ • खܰʹॻ͚ͯखܰʹެ։Ͱ͖Δ • Markdown Ͱॻ͚Δ • ॻ͖ͳ͕Β֬ೝͰ͖Δ
11. ࡞Γ͍ͨϒϩά
    ཁ݅ • Jekyll ෩ʹهࣄʹϝλ৘ใΛઃఆͰ͖Δ • tag, description, og-image ͳͲ • ύʔϚϦϯΫ͕࢖͑Δ • http://hotolab.net/blog/{entry_title}
12. ʮ͸ͯͳϒϩάΛ࢖͑ʯ • ՝ۚ͠ͳ͍ͱಠࣗυϝΠϯ࢖͑ͳ͍ • ϒϩάʹ݄1000ԁ͸ͪΐͬͱΩπ͍ • ϙʔλϏϦςΟ͕ඍົ • Markdown ͷ··ΤΫεϙʔτͰ͖ͳ͍
13. HVMQ
    Ͱ
    CMPH
    ͕࡞ΕΔͷ͔ • ڹ͖͕ࣅ͍ͯΔ͔Βଟ෼͍͚Δ
14. 
    σΟϨΫτϦߏ੒ src/ _posts/ ***.md _layouts/ assets/ index.html.jade public/ gulpfile.js
15. 
    ͳʹ͸ͱ΋͋Ε
    .BSLEPXO • gulp-markdown gulp.src('./src/_posts/*.md') .pipe(markdown())
16. 
    ύʔϚϦϯΫͬΆ͘͢Δ .pipe(rename((path) => { path.dirname += '/' + path.basename; path.basename = 'index'; path.extname = 'html'; return path; })) • gulp-rename
17. 
    ϨΠΞ΢τʹຒΊࠐΉ .pipe(layout({ title: 'My New Blog!!!', layout: './src/_layout/default.jade' })) • gulp-layout
18. 
    ϝλ৘ใΛϨΠΞ΢τʹ౉͢ gulp.src('./src/**/*.md') .pipe(frontMatter()) .pipe(markdown()) .pipe(layout(function(file) { return file.frontMatter; })) • gulp-frontmatter
19. ࢀߟɿ
    +FLZMM
    ͷϝλ৘ใຒΊࠐΈ ϝλ৘ใ ϚʔΫμ΢ϯ
20. 
    ֬ೝͰ͖ΔΑ͏ʹ͢Δ gulp.src('./public') .pipe(webserver({ livereload: true, ... })); • gulp-webserver
21. 
    ެ։͢Δ
    
    (JU)VC
    1BHFT
    gulp.src('./public/**') .pipe(ghPages()); • gulp-gh-pages
22. 
    ެ։͢Δ
    
    "NB[PO
    4
    gulp.src('./public/**') .pipe(s3({ Bucket: "bucket-name", ... })); • gulp-s3-upload
23. 
    ެ։͢Δ
    
    '51
    gulp.src('./public/**') .pipe(ftp({ host: 'example.com', user: 'hoto', pass: '1234' })); • gulp-ftp
24. 
    4/4
    Ͱ֦ࢄ͢Δ var oauth = { consumerKey: '...', ... }; gulp.src('package.json') .pipe(twitter(oauth, 'ϒϩάߋ৽!!!')); • gulp-twitter
25. ͦͷଞ • gulp-favicons: favicon ͳͲΛ·ͱΊͯੜ੒ • gulp-fontmin: ϑΥϯτͷαϒηοτΛ࡞੒ • gulp-robots: robots.txt Λੜ੒ • gulp-email: ϝʔϧΛૹΔ
26. %&.0
27. ͔ͨͬͨ͠
    ʅŋ@ŋA
28. ·ͱΊ • ϒϩά͸ gulp Ͱ࡞ΕΔʂʂʂ
29. &OKPZ