Gulp 芸 - Speaker Deck

Slide 1

Slide 1 text

HVMQܳ (PUBOEBKT !IPUP

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

+PJO4MBDL http://gotanda.js.org/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

;ͭ͏ͷ࢖͍ํ • ES2015 / AltJS Λ ES5 ʹτϥϯεύΠϧ • JS ͷ minify / bundle • Sass ΛίϯύΠϧ / minify / autopreﬁx • gzip ੜ੒ • lint

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

͍·ͷϒϩά • http://hotolab.net/ • ࠷ۙʮ jQuery ໓ͼΑʯͱ͔ݴͬͯΔͷʹ  ϒϩάͷσβΠϯʹ jQuery Λ࢖͍ͬͯΔ • Jekyll + GitHub Pages • ϓϥάΠϯ࢖͑ͳ͍ͷͰΧελϜͮ͠Β͍

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

࡞Γ͍ͨϒϩά ཁ݅ • Jekyll ෩ʹهࣄʹϝλ৘ใΛઃఆͰ͖Δ • tag, description, og-image ͳͲ • ύʔϚϦϯΫ͕࢖͑Δ • http://hotolab.net/blog/{entry_title}

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ύʔϚϦϯΫͬΆ͘͢Δ .pipe(rename((path) => { path.dirname += '/' + path.basename; path.basename = 'index'; path.extname = 'html'; return path; })) • gulp-rename

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

4/4Ͱ֦ࢄ͢Δ var oauth = { consumerKey: '...', ... }; gulp.src('package.json') .pipe(twitter(oauth, 'ϒϩάߋ৽!!!')); • gulp-twitter

Slide 25

Slide 25 text

ͦͷଞ • gulp-favicons: favicon ͳͲΛ·ͱΊͯੜ੒ • gulp-fontmin: ϑΥϯτͷαϒηοτΛ࡞੒ • gulp-robots: robots.txt Λੜ੒ • gulp-email: ϝʔϧΛૹΔ