Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ΦϨΦϨ gulpfile ͷۤ
Slide 5
Slide 5 text
ΦϨΦϨ͋Δ͋Δ • gulp ໘ന͍͚Ͳ৮͍ͬͯΔͱΩϦ͕ͳ͍…… • Ҋ݅͝ͱʹϓϥάΠϯΛ͍Ζ͍Ζࢼ͠ɺ άάΓɺϋϚΓɺ λεΫϑΥϧμߏม͑ͯΈͨΓ • ࠞཚ͕ͪ͠ ർΕ͕ͪ
Slide 6
Slide 6 text
ͳΜͤ gulpfile ͕མͪண͔ͳ͍
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 ڥͰ͖͕͋Γ • gulpfile ʹ࢛ۤീۤͤͣɺ͍͖ͳΓ͑Δ
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
gulpfile.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
gulpfile.babel.js ͷத • watch • browser_sync • SCSS • autoprefixer • 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 Ͱ ΠέͯΔΦδαϯʹؙ͛ͯ͠͠·͑Δ • ϋϚΓϙΠϯτ͕ͳ͍ͷͰɺ λεΫϥϯφʔॳ৺ऀͷೖʹΑͦ͞͏ • ୡਓͨͪͷφΠεͳίʔυͳͷͰɺ ࣗͰ gulpfile ॻ͖͍ͨਓࢀߟʹͳΔͷͰ
Slide 31
Slide 31 text
͓ΘΓ ͋Γ͕ͱ͏͍͟͝·ͨ͠