GSS Frontend Project Management

GSS 前端專案開發管理

Transcript

1. VITAL UI KIT 樄咳妿涢獤Ձ LAURA GSS-FED
2. 獮ᒒૡ֢ 殻ፓ ଘᶎ戔懯 翕殷戔懯 羬翄樄咳 獉਻ 覌眲向ᶎ戔懯 疥ଘᶎ戔懯ॺ粚/ڰ礂 ک翕殷, ے獈㵕眲 ୌ缏樄咳絑ह, 碉ݳ 獮ᒒૡٍ 肬圸 獮ᒒ戔懯/戔懯 獮ᒒૡ纷/獮ᒒ戔懯 獮ᒒૡ纷 ૡٍ Ai, Sketch, Ps JS, CSS Gulp, NPM, Bower, Angular, Cordova, Ionic 蒂ቘጱ㺔氂 UI UX RWD
 Cross-Browser CRUD
 Cross-Platform
3. 獮ᒒVS盅ᒒ 盅ᒒ 獮ᒒ 秚ੂ 樄რ ᯿憙绐ਧ ᯿憙盠蝧樄咳 ਞ獊௔ — — ฃአ ݢ᯿አ
 Ӟॺ秇ୗग़圵䛑አ
5. — Rasmus LerdorfҁPHPԏᆿ҂ ౯犋ฎӞ㮆፥ጱૡ纷䒍牐
 ౯಩䩚ᥜ୓Ӟ୓牧୓ک胼᪒ԏ盅疰犋ᓕԧ ” “
6. 獮ᒒૡ纷 • 柹矑ҁ獮ᒒUI戔懯҂->ҁ盅ᒒ虻碘䓚҂ጱ䱋禿 • 虏獮ᒒ戔懯䒍磪অጱ樄咳絑ह • ૡٍ۱奲ݳ (犋ॡ䨝ℂ襉樄ত䌃蚏 磪ፘ狅௔㺔氂) • ᓕቘ • 姘虁
7. 獮ᒒૡ纷 礍絑ह+ᓕቘ 50% Html 5% CSS 20% JS 25%
8. 䌕礯ᓕቘ • 礍絑ह Install (by NPM, Bower) • 樄咳螂纷 Developing (by Gulp) • sass->css, jade->html, live reload • ॺկᓕቘ • 粚๜矒ګ • ಑۱ Production / Build
 js dirtify, code/瑽粙瓟婘蜍ڊ, ے獈粚稗ਯޞ... • // 蜍ڊਞ蕕䲆 (Deploy) ಑۱APP碻಍襑ᥝ
9. 礍絑ह INSTALL • 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 (ॺկᓕቘૡٍ ݢᛔ㵕蒂ቘፘ狅௔ 㯏介ॺկฎ玽粚๜悳统)
10. 樄咳螂纷 DEVELOPING • ܻত䲆翥捌蜍ڊ, live reload • ᪠䕩ਧ֖覍ଉ覍ଉ᯿ᥝ • ॺկᓕቘ - 碝ጱॺկฎ玽䨝疩膌䌕礯᪒犋㵕牫 • 粚๜矒ګ - 虏ӥ㮆矑ಋጱՈ磪Ԧ亣ጱ䌕礯ݢ犥᪒
11. GULP TASK RUNNER 䔶य़ጱ䲆礯蒂ቘ秚
12. ಑۱ PRODUCTION • js, image瓟婘, 蝢ଉ犋䨝ڊ匍㺔氂 • html瓟婘, 绚໒(spacing)ݢ胼犋憎, 纸盏୽段粚ᶎ • css瓟婘, ݢ胼磪Ꮘ粚眈玀叨ኞ, style᪒ധ 
 (ܻࢩ螭๚ತک, വ介ฎॺկ㺔氂)
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. GITHUB • य़ᐟ㮉肞褸瑿 • README, Document, Issues
 褛֎֦ጱঅ๏݋(?)
15. — ӥӞ㮆䌕礯姘虁ૡ纷䒍 䌕礯礍䯤অ蕦褾牧፡犋睞... ” “
16. README • https://github.com/GSS-FED/gulp-starter-kit • Dependencies ޞᎣ種䌕礯஠殾狅蚅ෝߺ犚ॺկ • Development ݝ磪樄咳碻襑ᥝጱॺկ • Install ਞ蕕䌕礯瞲犤 • Usage 樄咳䌕礯瞲犤 • File Structure, Project Management, Project Development… ٌ犢䌕礯虻懱
17. ੜ愆獅
18. ፘ狅௔㺔氂
19. ፘ狅௔㺔氂
20. ፘ狅௔㺔氂
21. ፘ狅௔㺔氂
22. 獍橕碻樌 • Monday Workshop • ྯ蝰Ӟภ樌6pm-7pm 伛碻ෝ801硽ਰ砮ڊ(ݢ胼硬瑿讨) • 磧碝窞௳藶森ਧSlack “monday-workshop” 獍樄chanel (稭蜰ے 獈) • و執෈կ • ྯ蝰捍纷膏虻რ獤Ձ • https://hackpad.com/Monday-Workshop-XRVCqoisJVI
23. REFERENCE • 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/
24. THANKS FOR LISTENING