Pro Yearly is on sale from $80 to $50! »

Gulp 芸

Gulp 芸

A61adad507d7bc0ee5b52ebe333abed7?s=128

Yuki Ishikawa

October 28, 2015
Tweet

Transcript

  1. HVMQܳ (PUBOEBKT !IPUP

  2. None
  3. +PJO4MBDL 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)VC1BHFT gulp.src('./public/**') .pipe(ghPages()); • gulp-gh-pages

  22. ެ։͢Δ "NB[PO4 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