Front-end Project Development -- from install, development to production

Front-end Project Development -- from install, development to production. Tools: NodeJS, gulp

Transcript

1. 獮ᒒ樄咳妿涢獤Ձ Front End Engineer GSS Laura
2. Outline • 獮ᒒૡ֢殻ፓ • 獮ᒒૡ纷 • 獮盅ᒒݳ֢ොୗ • 䌕礯ᓕቘ
3. 獮ᒒૡ֢殻ፓ ૡ֢殻ፓ ଘᶎ戔懯 翕殷戔懯 羬翄樄咳 ૡ֢藯ก 向ᶎ戔懯 向ᶎ螵蜉戔懯 疥ଘᶎ戔懯ڰ礂/ॺ粚ک 翕殷 ے獈殷ᶎ螀֢螵蜉 ୌ缏樄咳絑ह, 碉ݳ獮ᒒ ૡٍ, 樄咳APP 揗揣肬֖ 戔懯䒍/獮ᒒ戔懯䒍 獮ᒒ戔懯䒍/獮ᒒૡ纷䒍 獮ᒒૡ纷䒍 揗揣㺔氂 UI UX RWD
 Cross-Browser CRUD
 Cross-Platform ֵአૡٍ Ai, Sketch, Ps JS, CSS Gulp, NPM, Bower, Angular, Cordova, Ionic
4. 獮ᒒૡ纷 • 柹矑ҁ獮ᒒUI戔懯҂->ҁ盅ᒒ虻碘䓚҂ጱ䱋禿 • 虏獮ᒒ戔懯䒍磪অጱ樄咳絑ह • ૡٍ۱奲ݳ • ᓕቘ • 姘虁
5. 獮ᒒૡ纷 JS 30% Html 10% CSS 10% 礍絑ह+ᓕቘ 50%
6. 獮ᒒ 獮盅ᒒݳ֢ොୗ 盅ᒒ 獮ᒒ 秚ੂ 樄რ ᯿憙绐ਧ ᯿憙盠蝧樄咳 ਞ獊௔ — — ฃአ ݢ᯿አ
 Ӟॺ秇ୗग़圵䛑አ CSS䰬ୗ HTML秇粚 JS螵蜉 虻碘Օ矑 盅ᒒ
7. 獮盅ᒒݳ֢ොୗ 礯ֺ Radar SPEED TCG APP 獮ᒒ໛礍 Angular 篷 Angular Cordova 獮ᒒ揗揣 HTML 䰬礂 CSS ䷱磪 JS HTML 䰬礂 CSS ੝蟂獤 JS HTML ॺ粚 CSS 獊蟂JS 盅ᒒ揗揣 HTML ڰ粚 獊蟂 JS HTML ॺ粚 य़蟂獤 JS 虻碘䓚API 托奞藯ก 盅ᒒ㷢ᘍ獮ᒒ HTML 奾 䯤牧ֵአAngular ᛔᤈ ڰ粚 盅ᒒॺ粚㷢ᘍ獮ᒒ HTML 奾䯤牧㪔䌃य़蟂 獤ጱJSᤈ傶膏虻碘蒂ቘ 螵蜉 盅ᒒ㰍揗揣獮ᒒ襑ᥝጱ 虻碘API牧ኧ獮ᒒਠ౮ ಅ磪虻碘螵蜉膏翕殷౮ ߝ
8. 䌕礯ᓕቘ • Install (by NPM, Bower) - 礍絑ह • Develop (by Gulp) - 樄咳䌕礯 • sass->css, jade->html, live reload • ॺկᓕቘ • 粚๜矒ګ • Deploy / Production / Build (by NPM) - 蜍ڊ౮ߝ code minify, dirtify, 瑽粙瓟婘, ے獈粚稗ਯޞ...
9. • NodeJS - JavaScript runtime built on Chrome's V8 JavaScript engine • 獮ᒒ樄咳ፘ橕ጱૡٍ۱य़ग़ฎचෝNodeJS • ݱ㮆ૡٍጱ䍅羷 NodeJS NPM (Node Package Management NodeJSॺկᓕቘૡٍ) gulp (Task runner) JS Framework (Cordova, Angular…) Bower (ॺկᓕቘૡٍ ݢᛔ㵕蒂ቘፘ狅௔ 㯏介ॺկฎ玽粚๜悳统) 䌕礯ᓕቘ - Install
10. • ܻত䲆翥捌蜍ڊ, live reload • ᪠䕩ਧ֖覍ଉ覍ଉ᯿ᥝ • ॺկᓕቘ - 碝ጱॺկฎ玽䨝疩膌䌕礯᪒犋㵕牫 • 粚๜矒ګ - 虏ӥ㮆矑ಋጱՈ磪Ԧ亣ጱ䌕礯ݢ犥᪒ 䌕礯ᓕቘ - Develop
11. Gulp Task runner 䔶य़ጱ䲆礯蒂ቘ秚
12. • js, image瓟婘, 蝢ଉ犋䨝ڊ匍㺔氂 • html瓟婘, 绚໒(spacing)ݢ胼犋憎, 纸盏୽段粚ᶎ • css瓟婘, ݢ胼磪Ꮘ粚眈玀叨ኞ, style᪒ധ 
 (ܻࢩ螭๚ತک, വ介ฎॺկ㺔氂) 䌕礯ᓕቘ - Deploy
13. च๜䌕礯奾䯤 node_module (config file: package.json) ਞ蕕ॺկፓ秂虻碘䄸, 硯樄咳褩ྦྷ襑ᥝጱ絑ह(devDependencies), ই eslint, sass缛缛 bower_components (config file: bower.json) ਞ蕕ॺկፓ秂虻碘䄸, ޾ package.json獤樄
 硯src, library缛஠ᥝॺկ(dependencies), ই ionic, JQuery缛缛 gulp (config file: config.js) tasks/ ಅ磪task獤䲆ᓕቘ牧硯ᗝෝ種虻碘䄸
 util/ 䌕槹妔taskᘒ覍䌕礯ֵአጱૡٍ
 index.js gulp蝱獈讨
 config.js ਧ嬝taskಅ襑㷢碍牧ො׎ᓕቘ src ᯿ᥝጱܻত嘨硯ᗝ蒂牧ૡ纷䒍ࣁ蝡愊砰䌃纷ୗ㪔ᓕቘ䲆礯 www srcܻত嘨翥捌盅蜍ڊᛗ種牧ಅ磪srcጱ狕硬矑䨝薟荠種蒂ጱ䲆礯
14. Live DEMO • https://git.gss.com.tw/FED/project-sample
15. github • य़ᐟ㮉肞褸瑿 • README, Document, Issues
 褛֎֦ጱঅ๏݋(?)
16. — ӥӞ㮆䌕礯姘虁ૡ纷䒍 䌕礯礍䯤অ蕦褾牧፡犋睞...
17. README Dependencies ޞᎣ種䌕礯஠殾狅蚅ෝߺ犚ॺկ Install ਞ蕕䌕礯瞲犤 Development 樄咳䌕礯瞲犤 Deploy 蜍ڊ౮ߝ瞲犤 File Structure, Project Management, Project Development… ٌ犢䌕礯虻懱
18. README • 樄咳碻舙磪碝ጱ KnowHow牧ᥝ犋玬ٌ簡ے獈readme牧 虏ӥ㮆ૡ纷䒍磪㮆聅অጱ樄咳絑ह • च๜稠
 https://git.gss.com.tw/FED/project-sample • ᤅ膏窲ጱԻ而稠
 https://git.gss.com.tw/FED/TCG_client_app
19. ੜ愆獅
20. ፘ狅௔㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
21. ፘ狅௔㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
22. ፘ狅௔㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
23. ፘ狅௔㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
24. reference • Project Sample https://git.gss.com.tw/FED/project-sample • Gulp, Grunt, Bower犥现npm http://blog.darkthread.net/post-2014-09-25-gulp-grunt-bower- npm.aspx • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp-learning-notes/content/ • 犢Ӟ盨ԏӥ㳫ᴻ11ᤈ纷ୗ嘨 ԰肥翕螗稵 http://hk.thenewslens.com/post/305094/
25. Q&A
26. Thanks for listening