Gulp 芸

Transcript

1. HVMQ
   ܳ 
   (PUBOEBKT
   
   !IPUP

2. None

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