Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end Project Development -- from install, ...
Search
Laura Lee
March 09, 2017
Programming
0
43
Front-end Project Development -- from install, development to production
Front-end Project Development -- from install, development to production. Tools: NodeJS, gulp
Laura Lee
March 09, 2017
Tweet
Share
More Decks by Laura Lee
See All by Laura Lee
Frontend Resource Intergration and Sharing
l443018
1
49
GSS Frontend Project Management
l443018
2
130
Flux+ReactJS Development
l443018
1
98
JSDC 2015 Generation of Frontend
l443018
1
120
Other Decks in Programming
See All in Programming
decksh - a little language for decks
ajstarks
4
21k
Infer入門
riru
4
1.6k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
Introduction to Git & GitHub
latte72
0
120
kiroでゲームを作ってみた
iriikeita
0
180
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
100
Vibe coding コードレビュー
kinopeee
0
460
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Embracing the Ebb and Flow
colly
87
4.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
32
14k
Navigating Team Friction
lara
189
15k
Into the Great Unknown - MozCon
thekraken
40
2k
Fireside Chat
paigeccino
39
3.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Scaling GitHub
holman
462
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Transcript
獮ᒒ樄咳妿涢獤Ձ Front End Engineer GSS Laura
Outline • 獮ᒒૡ֢殻ፓ • 獮ᒒૡ纷 • 獮盅ᒒݳ֢ොୗ • 䌕礯ᓕቘ
獮ᒒૡ֢殻ፓ ૡ֢殻ፓ ଘᶎ戔懯 翕殷戔懯 羬翄樄咳 ૡ֢藯ก 向ᶎ戔懯 向ᶎ螵蜉戔懯 疥ଘᶎ戔懯ڰ礂/ॺ粚ک 翕殷
ے獈殷ᶎ螀֢螵蜉 ୌ缏樄咳絑ह, 碉ݳ獮ᒒ ૡٍ, 樄咳APP 揗揣肬֖ 戔懯䒍/獮ᒒ戔懯䒍 獮ᒒ戔懯䒍/獮ᒒૡ纷䒍 獮ᒒૡ纷䒍 揗揣㺔氂 UI UX RWD Cross-Browser CRUD Cross-Platform ֵአૡٍ Ai, Sketch, Ps JS, CSS Gulp, NPM, Bower, Angular, Cordova, Ionic
獮ᒒૡ纷 • 柹矑ҁ獮ᒒUI戔懯҂->ҁ盅ᒒ虻碘䓚҂ጱ䱋禿 • 虏獮ᒒ戔懯䒍磪অጱ樄咳絑ह • ૡٍ۱奲ݳ • ᓕቘ •
姘虁
獮ᒒૡ纷 JS 30% Html 10% CSS 10% 礍絑ह+ᓕቘ 50%
獮ᒒ 獮盅ᒒݳ֢ොୗ 盅ᒒ 獮ᒒ 秚ੂ 樄რ ᯿憙绐ਧ ᯿憙盠蝧樄咳 ਞ獊 —
— ฃአ ݢ᯿አ Ӟॺ秇ୗग़圵䛑አ CSS䰬ୗ HTML秇粚 JS螵蜉 虻碘Օ矑 盅ᒒ
獮盅ᒒݳ֢ොୗ 礯ֺ 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牧ኧ獮ᒒਠ౮ ಅ磪虻碘螵蜉膏翕殷౮ ߝ
䌕礯ᓕቘ • Install (by NPM, Bower) - 礍絑ह • Develop
(by Gulp) - 樄咳䌕礯 • sass->css, jade->html, live reload • ॺկᓕቘ • 粚矒ګ • Deploy / Production / Build (by NPM) - 蜍ڊ౮ߝ code minify, dirtify, 瑽粙瓟婘, ے獈粚稗ਯޞ...
• 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
• ܻত䲆翥捌蜍ڊ, live reload • ᪠䕩ਧ֖覍ଉ覍ଉ᯿ᥝ • ॺկᓕቘ - 碝ጱॺկฎ玽䨝疩膌䌕礯᪒犋㵕牫
• 粚矒ګ - 虏ӥ㮆矑ಋጱՈ磪Ԧ亣ጱ䌕礯ݢ犥᪒ 䌕礯ᓕቘ - Develop
Gulp Task runner 䔶य़ጱ䲆礯蒂ቘ秚
• js, image瓟婘, 蝢ଉ犋䨝ڊ匍㺔氂 • html瓟婘, 绚໒(spacing)ݢ胼犋憎, 纸盏段粚ᶎ • css瓟婘,
ݢ胼磪Ꮘ粚眈玀叨ኞ, style᪒ധ (ܻࢩ螭๚ತک, വ介ฎॺկ㺔氂) 䌕礯ᓕቘ - Deploy
च䌕礯奾䯤 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ጱ狕硬矑䨝薟荠種蒂ጱ䲆礯
Live DEMO • https://git.gss.com.tw/FED/project-sample
github • य़ᐟ㮉肞褸瑿 • README, Document, Issues 褛֎֦ጱঅ๏(?)
— ӥӞ㮆䌕礯姘虁ૡ纷䒍 䌕礯礍䯤অ蕦褾牧፡犋睞...
README Dependencies ޞᎣ種䌕礯殾狅蚅ෝߺ犚ॺկ Install ਞ蕕䌕礯瞲犤 Development 樄咳䌕礯瞲犤 Deploy 蜍ڊ౮ߝ瞲犤 File
Structure, Project Management, Project Development… ٌ犢䌕礯虻懱
README • 樄咳碻舙磪碝ጱ KnowHow牧ᥝ犋玬ٌ簡ے獈readme牧 虏ӥ㮆ૡ纷䒍磪㮆聅অጱ樄咳絑ह • च稠 https://git.gss.com.tw/FED/project-sample • ᤅ膏窲ጱԻ而稠
https://git.gss.com.tw/FED/TCG_client_app
ੜ愆獅
ፘ狅㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
ፘ狅㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
ፘ狅㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
ፘ狅㺔氂 • Gulp᯿讨執懿 https://kejyuntw.gitbooks.io/gulp- learning-notes/content/
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/
Q&A
Thanks for listening