SlideShare uma empresa Scribd logo
1 de 43
Baixar para ler offline
tools
                for web developers           Caesar Chi
                        http://about.me/clonn clonn
13年4月14⽇日星期⽇日
tools
                for web developers           Caesar Chi
                        http://about.me/clonn clonn
13年4月14⽇日星期⽇日
Caesar Chi




                http://about.me/clonn            clonncd
13年4月14⽇日星期⽇日
Somethings
                  you
                 Should
                 Know
13年4月14⽇日星期⽇日
Command line
13年4月14⽇日星期⽇日
GIT(Github)
13年4月14⽇日星期⽇日
Server
13年4月14⽇日星期⽇日
JavaScript
13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
JSON
13年4月14⽇日星期⽇日
CommonJS
                http://www.commonjs.org/




13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
“Of Course”
                   with




13年4月14⽇日星期⽇日
web server
                restful server


13年4月14⽇日星期⽇日
as a web developers,
  knowing some grid systems is good for you
13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
old school
                   Usage


13年4月14⽇日星期⽇日
find a example page




13年4月14⽇日星期⽇日
check html source code, then...




13年4月14⽇日星期⽇日
check html source code, then...




                COPY & PASTE
                COPY & PASTE
                COPY & PASTE

13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
Everything
                Should
                 Be
                 Simple
                 But
                 no simpler
13年4月14⽇日星期⽇日
We can DO It!




13年4月14⽇日星期⽇日
http://yeoman.io/




13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
web basic scafolding


13年4月14⽇日星期⽇日
npm install -g

                     yo


13年4月14⽇日星期⽇日
yo webapp
                http://yeoman.io/gettingstarted.html




13年4月14⽇日星期⽇日
http://twitter.github.io/bower/


13年4月14⽇日星期⽇日
npm install -g
                   bower


13年4月14⽇日星期⽇日
install
    bower search <packages>
          update
           list

13年4月14⽇日星期⽇日
v 0.4.0

                Grunt.js for Web developer

13年4月14⽇日星期⽇日
npm install -g
                grunt-cli


13年4月14⽇日星期⽇日
Gruntfile
                •   Gruntfile.js file existed




13年4月14⽇日星期⽇日
Gruntfile




13年4月14⽇日星期⽇日
Gruntfile
                • Use grunt plugin

                  http://gruntjs.com/plugins

                • register grunt task


13年4月14⽇日星期⽇日
npm install -g
                grunt-init


13年4月14⽇日星期⽇日
grunt-init TEMPLATE
  http://gruntjs.com/project-scaffolding#installing-templates




13年4月14⽇日星期⽇日
13年4月14⽇日星期⽇日
cli example
   https://gist.github.com/clonn/5175333




13年4月14⽇日星期⽇日
tools
                for web developers            Caesar Chi
                         http://about.me/clonn clonn
13年4月14⽇日星期⽇日

Mais conteúdo relacionado

Destaque

Node basic training
Node basic trainingNode basic training
Node basic trainingCaesar Chi
 
Node workShop Basic
Node workShop BasicNode workShop Basic
Node workShop BasicCaesar Chi
 
html5 & phonegap
html5 & phonegaphtml5 & phonegap
html5 & phonegapCaesar Chi
 
不只自動化而且更敏捷的Android開發工具 gradle mopcon
不只自動化而且更敏捷的Android開發工具 gradle mopcon不只自動化而且更敏捷的Android開發工具 gradle mopcon
不只自動化而且更敏捷的Android開發工具 gradle mopconsam chiu
 
Introduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flowIntroduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flowCaesar Chi
 
從失敗中學習打造技術團隊
從失敗中學習打造技術團隊從失敗中學習打造技術團隊
從失敗中學習打造技術團隊Caesar Chi
 

Destaque (6)

Node basic training
Node basic trainingNode basic training
Node basic training
 
Node workShop Basic
Node workShop BasicNode workShop Basic
Node workShop Basic
 
html5 & phonegap
html5 & phonegaphtml5 & phonegap
html5 & phonegap
 
不只自動化而且更敏捷的Android開發工具 gradle mopcon
不只自動化而且更敏捷的Android開發工具 gradle mopcon不只自動化而且更敏捷的Android開發工具 gradle mopcon
不只自動化而且更敏捷的Android開發工具 gradle mopcon
 
Introduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flowIntroduce Angular2 & render & firebase flow
Introduce Angular2 & render & firebase flow
 
從失敗中學習打造技術團隊
從失敗中學習打造技術團隊從失敗中學習打造技術團隊
從失敗中學習打造技術團隊
 

Mais de Caesar Chi

為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?Caesar Chi
 
面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!Caesar Chi
 
初探工程師升級手冊 2022
初探工程師升級手冊 2022初探工程師升級手冊 2022
初探工程師升級手冊 2022Caesar Chi
 
預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰Caesar Chi
 
Remote monitoring widget setup and customization
Remote monitoring  widget setup and customizationRemote monitoring  widget setup and customization
Remote monitoring widget setup and customizationCaesar Chi
 
JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇Caesar Chi
 
LINE@ 2.0 offline to online
LINE@ 2.0  offline to onlineLINE@ 2.0  offline to online
LINE@ 2.0 offline to onlineCaesar Chi
 
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow Caesar Chi
 
PWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharingPWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharingCaesar Chi
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsCaesar Chi
 
codecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introducecodecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introduceCaesar Chi
 
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016Caesar Chi
 
如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享Caesar Chi
 
From devOps to front end Ops, test first
From devOps to front end Ops, test firstFrom devOps to front end Ops, test first
From devOps to front end Ops, test firstCaesar Chi
 
Docker with Cloud Service GCPUG
Docker with Cloud Service  GCPUGDocker with Cloud Service  GCPUG
Docker with Cloud Service GCPUGCaesar Chi
 
Docker with Cloud Service
Docker with Cloud ServiceDocker with Cloud Service
Docker with Cloud ServiceCaesar Chi
 
技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異Caesar Chi
 
Developer team review of 2014
Developer team review of 2014Developer team review of 2014
Developer team review of 2014Caesar Chi
 
Web development, from git flow to github flow
Web development, from git flow to github flowWeb development, from git flow to github flow
Web development, from git flow to github flowCaesar Chi
 
2014 jsconf China, Sharing
2014 jsconf China, Sharing2014 jsconf China, Sharing
2014 jsconf China, SharingCaesar Chi
 

Mais de Caesar Chi (20)

為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?為何技術老人這樣想那樣做?
為何技術老人這樣想那樣做?
 
面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!面試AI技術大進化,加速招聘軟體工程師的全套攻略!
面試AI技術大進化,加速招聘軟體工程師的全套攻略!
 
初探工程師升級手冊 2022
初探工程師升級手冊 2022初探工程師升級手冊 2022
初探工程師升級手冊 2022
 
預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰預約及客服 LINE 服務串接大挑戰
預約及客服 LINE 服務串接大挑戰
 
Remote monitoring widget setup and customization
Remote monitoring  widget setup and customizationRemote monitoring  widget setup and customization
Remote monitoring widget setup and customization
 
JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇JS 從 Non-type 到 Type 的愛恨情仇
JS 從 Non-type 到 Type 的愛恨情仇
 
LINE@ 2.0 offline to online
LINE@ 2.0  offline to onlineLINE@ 2.0  offline to online
LINE@ 2.0 offline to online
 
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
Chatbot 智能溝通策 流程規劃與實做 e-Commerce Chatbot - AI strategy and Chat bot user flow
 
PWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharingPWA and Chatbot - with e-Commerce experience sharing
PWA and Chatbot - with e-Commerce experience sharing
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
codecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introducecodecept.js introduce - front end test E2E tool introduce
codecept.js introduce - front end test E2E tool introduce
 
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
 
如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享如何提昇技術力 - 參與技術社群之經驗分享
如何提昇技術力 - 參與技術社群之經驗分享
 
From devOps to front end Ops, test first
From devOps to front end Ops, test firstFrom devOps to front end Ops, test first
From devOps to front end Ops, test first
 
Docker with Cloud Service GCPUG
Docker with Cloud Service  GCPUGDocker with Cloud Service  GCPUG
Docker with Cloud Service GCPUG
 
Docker with Cloud Service
Docker with Cloud ServiceDocker with Cloud Service
Docker with Cloud Service
 
技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異技術單兵作戰及團隊開發流程差異
技術單兵作戰及團隊開發流程差異
 
Developer team review of 2014
Developer team review of 2014Developer team review of 2014
Developer team review of 2014
 
Web development, from git flow to github flow
Web development, from git flow to github flowWeb development, from git flow to github flow
Web development, from git flow to github flow
 
2014 jsconf China, Sharing
2014 jsconf China, Sharing2014 jsconf China, Sharing
2014 jsconf China, Sharing
 

Último

20200727_Insight workstation
20200727_Insight workstation20200727_Insight workstation
20200727_Insight workstationJamie (Taka) Wang
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20200808自營電商平台策略討論
20200808自營電商平台策略討論20200808自營電商平台策略討論
20200808自營電商平台策略討論Jamie (Taka) Wang
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 

Último (17)

20200606_insight_Ignition
20200606_insight_Ignition20200606_insight_Ignition
20200606_insight_Ignition
 
20200727_Insight workstation
20200727_Insight workstation20200727_Insight workstation
20200727_Insight workstation
 
20200429_software
20200429_software20200429_software
20200429_software
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20200602_insight_business
20200602_insight_business20200602_insight_business
20200602_insight_business
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20200808自營電商平台策略討論
20200808自營電商平台策略討論20200808自營電商平台策略討論
20200808自營電商平台策略討論
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20200427_hardware
20200427_hardware20200427_hardware
20200427_hardware
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20200429_ec
20200429_ec20200429_ec
20200429_ec
 
20210105_量產技轉
20210105_量產技轉20210105_量產技轉
20210105_量產技轉
 
20200607_insight_sync
20200607_insight_sync20200607_insight_sync
20200607_insight_sync
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20220113_product_day
20220113_product_day20220113_product_day
20220113_product_day
 

Yeoman - A Node.js cli tool for web developers