Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Project Development -- from install, ...

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

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

Avatar for Laura Lee

Laura Lee

March 09, 2017
Tweet

More Decks by Laura Lee

Other Decks in Programming

Transcript

  1. 獮ᒒૡ֢殻ፓ ૡ֢殻ፓ ଘᶎ戔懯 翕殷戔懯 羬翄樄咳 ૡ֢藯ก 向ᶎ戔懯 向ᶎ螵蜉戔懯 疥ଘᶎ戔懯ڰ礂/ॺ粚ک 翕殷

    ے獈殷ᶎ螀֢螵蜉 ୌ缏樄咳絑ह, 碉ݳ獮ᒒ ૡٍ, 樄咳APP 揗揣肬֖ 戔懯䒍/獮ᒒ戔懯䒍 獮ᒒ戔懯䒍/獮ᒒૡ纷䒍 獮ᒒૡ纷䒍 揗揣㺔氂 UI UX RWD
 Cross-Browser CRUD
 Cross-Platform ֵአૡٍ Ai, Sketch, Ps JS, CSS Gulp, NPM, Bower, Angular, Cordova, Ionic
  2. 獮ᒒ 獮盅ᒒݳ֢ොୗ 盅ᒒ 獮ᒒ 秚ੂ 樄რ ᯿憙绐ਧ ᯿憙盠蝧樄咳 ਞ獊௔ —

    — ฃአ ݢ᯿አ
 Ӟॺ秇ୗग़圵䛑አ CSS䰬ୗ HTML秇粚 JS螵蜉 虻碘Օ矑 盅ᒒ
  3. 獮盅ᒒݳ֢ොୗ 礯ֺ 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牧ኧ獮ᒒਠ౮ ಅ磪虻碘螵蜉膏翕殷౮ ߝ
  4. 䌕礯ᓕቘ • Install (by NPM, Bower) - 礍絑ह • Develop

    (by Gulp) - 樄咳䌕礯 • sass->css, jade->html, live reload • ॺկᓕቘ • 粚๜矒ګ • Deploy / Production / Build (by NPM) - 蜍ڊ౮ߝ code minify, dirtify, 瑽粙瓟婘, ے獈粚稗ਯޞ...
  5. • 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
  6. • js, image瓟婘, 蝢ଉ犋䨝ڊ匍㺔氂 • html瓟婘, 绚໒(spacing)ݢ胼犋憎, 纸盏୽段粚ᶎ • css瓟婘,

    ݢ胼磪Ꮘ粚眈玀叨ኞ, style᪒ധ 
 (ܻࢩ螭๚ತک, വ介ฎॺկ㺔氂) 䌕礯ᓕቘ - Deploy
  7. च๜䌕礯奾䯤 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ጱ狕硬矑䨝薟荠種蒂ጱ䲆礯
  8. 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/
  9. Q&A