Yeoman で Gulp環境をさらっと作る / gulp+yeoman

Slide 1

Slide 1 text

YeomanͰ  gulp؀ڥΛ͞Βͬͱ࡞Δ 2015.09.26 দඌ (TAM inc.)

Slide 2

Slide 2 text

ࣗݾ঺հ • ·͓ͭ ͻΖ͠ (TAM inc.) • PHP / JavaScript / Tech Direction • PHPΧϯϑΝϨϯεؔ੢ ελοϑ • CoffeeScript ޷͖ͩͬͨͷͰ  ͍·࿏಄ʹ໎͍ͬͯΔ

Slide 3

Slide 3 text

ͯ͞ gulp ͷ؀ڥߏங

Slide 4

Slide 4 text

ΦϨΦϨ gulpﬁle ͷۤ೰

Slide 5

Slide 5 text

ΦϨΦϨ͋Δ͋Δ • gulp ໘ന͍͚Ͳ৮͍ͬͯΔͱΩϦ͕ͳ͍…… • Ҋ݅͝ͱʹϓϥάΠϯΛ͍Ζ͍Ζࢼ͠ɺ  ౎౓άάΓɺϋϚΓɺ  λεΫ΍ϑΥϧμߏ੒΋ม͑ͯΈͨΓ • ࠞཚ͕ͪ͠ ർΕ͕ͪ

Slide 6

Slide 6 text

ͳΜͤ  gulpﬁle ͕མͪண͔ͳ͍

Slide 7

Slide 7 text

ͦ΋ͦ΋ϥΫ͕͔ͨͬͨ͠͸ͣ ! ઃఆʹϋϚͬͯਐḿθϩͱ͔…

Slide 8

Slide 8 text

΋͏୭͔ʹؙ౤͍͛ͨ͠

Slide 9

Slide 9 text

Ͳ͔ͬͷΦδαϯʹ  ؙ౤͍͛ͨ͠

Slide 10

Slide 10 text

http://yeoman.io/

Slide 11

Slide 11 text

Yeoman • ϑϩϯτΤϯυͷ։ൃ؀ڥͷ  φΠεͳ਽ܗΛ४උͯ͘͠ΕΔπʔϧ • ίϚϯυ1ൃͰɺ͙͢։ൃʹ͔͔ΕΔ؀ڥ͕Ͱ͖Δ  (Grunt / Gulp / Bower / npm ͋ͨΓΛۦ࢖) • for AngularJS, React, Polymer, WordPress ͳͲͳͲ • ຊ೔͸ Yeoman ͷ gulp-webapp Λ঺հ

Slide 12

Slide 12 text

Yeoman gulp-webapp  http://yeoman.github.io/generator-gulp-webapp/

Slide 13

Slide 13 text

Yeoman gulp-webapp Λ࢖͏ͱ • ʮgulp Ͱ΢ΣϒαΠτ੍࡞ʯͷ؀ڥߏஙΛ  ͯ͘͠ΕΔ • Yo ίϚϯυ 1ͭͰɺ͋ͬͱ͍͏·ʹ  gulp ؀ڥͰ͖͕͋Γ • gulpﬁle ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ࢖͑Δ

Slide 14

Slide 14 text

Πϯετʔϧ • Yeoman ຊମͱɺ  gulp-webapp δΣωϨʔλΛΠϯετʔϧ (ཁnode.js) npm install -g yo  npm install -g generator-gulp-webapp

Slide 15

Slide 15 text

`yo gulp-webapp` Ͱ਽ܗΛ࡞Δ

Slide 16

Slide 16 text

Φδαϯ͕࣭໰ͯ͘͠Δ

Slide 17

Slide 17 text

ࣗಈͰ npm / bower install ·Ͱ

Slide 18

Slide 18 text

਽ܗϑΝΠϧҰ͕ࣜͰ͖ͨ

Slide 19

Slide 19 text

gulpﬁle.babel.js …??

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

͓ͬͪΌΜ ES6 Ͱ gulp ॻ͖ΑΔ

Slide 22

Slide 22 text

தͷਓ͸ google ͷΤϯδχΞͳͲ  ͦ͏ͦ͏ͨΔϝϯόʔ

Slide 23

Slide 23 text

Ͱ͖͕͋ͬͨ؀ڥΛ֬ೝ

Slide 24

Slide 24 text

HTML ͷ਽ܗ͸͜Μͳײ͡

Slide 25

Slide 25 text

gulpﬁle.babel.js ͷத਎ • watch • browser_sync • SCSS • autopreﬁxer • babel • ESLint • sourcemap • mocha • Ϗϧυ ( /dist ʹग़ྗ) • HTML/CSS minify • uglify • imagemin

Slide 26

Slide 26 text

͍͍ͨͯ  ͜ΕͰΑ͘Ͷʁײ

Slide 27

Slide 27 text

࢖͍ํ΋γϯϓϧ • gulp serve watch & live reload • gulp serve:test ςετ • gulp build Ϗϧυ • gulp serve:dist Ϗϧυ݁ՌΛ֬ೝ

Slide 28

Slide 28 text

ΧελϚΠζํ๏΋͝༻ҙ • CoffeeScript ͱ͔ Jade ͱ͔࢖͍͍ͨ →  GitHub ͷυΩϡϝϯτ(Recipes) ݟͨΒOK

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

·ͱΊ • ؀ڥߏங͕໘౗ɾͭΒ͍ͳΒɺYeoman Ͱ  ΠέͯΔΦδαϯʹؙ౤͛ͯ͠͠·͑Δ • ϋϚΓϙΠϯτ͕ͳ͍ͷͰɺ  λεΫϥϯφʔॳ৺ऀͷೖ໳ʹ΋Αͦ͞͏ • ୡਓͨͪͷφΠεͳίʔυͳͷͰɺ  ࣗ෼Ͱ gulpﬁle ॻ͖͍ͨਓ΋ࢀߟʹͳΔͷͰ͸

Slide 31

Slide 31 text

͓ΘΓ  ͋Γ͕ͱ͏͍͟͝·ͨ͠