SlideShare ist ein Scribd-Unternehmen logo
1 von 85
Downloaden Sie, um offline zu lesen
http://0rz.tw/UYJeS
An Intro Of Web Scaffolding Tool Using
Yeoman Generator
1
13年8月1⽇日星期四
An Intro Of Web
Scaffolding Tool
Using
Yeoman Generator
COSCUP 2013
2
13年8月1⽇日星期四
@kmsheng
http://www.facebook.com/kuanmin.sheng.1
3
13年8月1⽇日星期四
I Am
A Web Developer Who
Loves
4
13年8月1⽇日星期四
Outline
1. Problem
2. Demo: Generator
3. What is a yeoman generator?
4. Demo: Sub-generator
5. Why Yeoman Generator?
6. Generator API
7. Demo of Making a Generator
5
13年8月1⽇日星期四
Back Then
We Started
A New Web Project
6
13年8月1⽇日星期四
7
13年8月1⽇日星期四
Manually Find
Libraries And Add
8
13年8月1⽇日星期四
Manually Copy And
Paste The Same
Config Files
9
13年8月1⽇日星期四
10
13年8月1⽇日星期四
Here Is A Way
Better Choice
11
13年8月1⽇日星期四
Yeoman Generator
12
13年8月1⽇日星期四
Demo #1
Scaffold Out A Project
http://youtu.be/0duXfsr6uOc
13
13年8月1⽇日星期四
14
13年8月1⽇日星期四
What Is A Generator?
15
13年8月1⽇日星期四
16
13年8月1⽇日星期四
16
13年8月1⽇日星期四
16
13年8月1⽇日星期四
16
13年8月1⽇日星期四
Generate Templeates & Configs
Bower Install & NPM Install
17
13年8月1⽇日星期四
Demo #2
Creating Routes Using
Sub-generator
http://youtu.be/jvIOuALlnjM
18
13年8月1⽇日星期四
19
13年8月1⽇日星期四
What Is A
Sub-generator?
20
13年8月1⽇日星期四
Generate Templeates
Write Files
Do Something Based On Option
21
13年8月1⽇日星期四
Why Use A Generator?
22
13年8月1⽇日星期四
It Saves Time
23
13年8月1⽇日星期四
Help Team Members
Follow Code Convention
24
13年8月1⽇日星期四
Lots Of Generators
Out There
generator-angular, generator-
bbb, generator-node ..etc.
25
13年8月1⽇日星期四
With Strong Team
Support
26
13年8月1⽇日星期四
Paul Irish Addy Osmani Mickael Daniel
Sindre Sorhus Eric Bidelman Frederick Ros
Brian Ford Pascal Hartig Stephon Sawchuk27
13年8月1⽇日星期四
Paul Irish Addy Osmani Mickael Daniel
Sindre Sorhus Eric Bidelman Frederick Ros
Brian Ford Pascal Hartig Stephon Sawchuk27
13年8月1⽇日星期四
Maybe You Wanted
To Say
28
13年8月1⽇日星期四
My Workflow Is Not
The Same As Yeoman’s
29
13年8月1⽇日星期四
Why Not To Make Your
Own Generator?
30
13年8月1⽇日星期四
The Real Meaning Of
This..
31
13年8月1⽇日星期四
The Real Meaning Of
This..
Is To Share Your
Ideas And Best
Bractices With Others
31
13年8月1⽇日星期四
How To Write A
Customized Yeoman
Generator?
32
13年8月1⽇日星期四
Generator-Generator
33
13年8月1⽇日星期四
Why
Generator-Generator?
34
13年8月1⽇日星期四
35
13年8月1⽇日星期四
Epic Fail
35
13年8月1⽇日星期四
36
13年8月1⽇日星期四
37
13年8月1⽇日星期四
Setup
38
13年8月1⽇日星期四
npm install -g yo
generator-generator
39
13年8月1⽇日星期四
# in your generator repo
yo generator
40
13年8月1⽇日星期四
provide your github name
provide your generator name
41
13年8月1⽇日星期四
├──	
  app
│	
  	
  	
  ├──	
  index.js
│	
  	
  	
  └──	
  templates
│	
  	
  	
  	
  	
  	
  	
  ├──	
  _bower.json
│	
  	
  	
  	
  	
  	
  	
  ├──	
  _package.json
│	
  	
  	
  	
  	
  	
  	
  ├──	
  editorconfig
│	
  	
  	
  	
  	
  	
  	
  ├──	
  jshintrc
│	
  	
  	
  	
  	
  	
  	
  └──	
  travis.yml
├──	
  test
│	
  	
  	
  ├──	
  test-­‐creation.js
│	
  	
  	
  └──	
  test-­‐load.js
├──	
  .editorconfig
├──	
  .gitattributes
├──	
  .gitignore
├──	
  .jshintrc
├──	
  .travis.yml
├──	
  LICENSE
├──	
  package.json
└──	
  README.md
42
13年8月1⽇日星期四
Done?
43
13年8月1⽇日星期四
Of Course Not
44
13年8月1⽇日星期四
npm link
45
13年8月1⽇日星期四
Generator API
https://github.com/
yeoman/generator/wiki
46
13年8月1⽇日星期四
How To Create A
Sub-Generator?
47
13年8月1⽇日星期四
# in your generator repo
yo generator:subgenerator name
48
13年8月1⽇日星期四
 	
  name
	
  	
  	
  ├──	
  index.js
	
  	
  	
  ├──	
  templates/somefile.js
	
  	
  
49
13年8月1⽇日星期四
 	
  name
	
  	
  	
  ├──	
  index.js
	
  	
  	
  ├──	
  templates/somefile.js
	
  	
   └──	
  USAGE
49
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
Generator Name
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument name
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument
Base#argument name
50
13年8月1⽇日星期四
Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument
Base#argument name
Base#option
50
13年8月1⽇日星期四
Prompt#prompt
51
13年8月1⽇日星期四
52
13年8月1⽇日星期四
Log
53
13年8月1⽇日星期四
this.log
.skip(‘msg’)
.create(‘msg’)
.invoke(‘msg’)
.conflict(‘msg’)
.identical(‘msg’)
.info(‘msg’)
.ok(‘ok’)
.error(‘error’);
node.js
54
13年8月1⽇日星期四
skip msg
force msg
create msg
invoke msg
conflict msg
identical msg
info msg
✔ ok
✗ error
55
13年8月1⽇日星期四
actions#checkForCollision
56
13年8月1⽇日星期四
actions#copy
generator
my repo
57
13年8月1⽇日星期四
actions#copy
generator
my repo
57
13年8月1⽇日星期四
actions#copy
generator
my repo
57
13年8月1⽇日星期四
actions#copy
generator
my repo
57
13年8月1⽇日星期四
this.copy(
‘main.src.scss’,
‘main.src.scss’
);
node.js
58
13年8月1⽇日星期四
actions#template
59
13年8月1⽇日星期四
this.template(
‘_bower.json’,
‘bower.json’,
{
appName: this.appName
}
);
node.js
60
13年8月1⽇日星期四
angularUtils#rewriteFile
61
13年8月1⽇日星期四
class HelloController extends Pix_Controller
{
public function indexAction()
{
}
public function worldAction()
{
}
// endbuild
}
PHP
62
13年8月1⽇日星期四
Demo #3
Writing A Generator
http://youtu.be/8ysBiN0Zw-463
13年8月1⽇日星期四
64
13年8月1⽇日星期四
Summary
What Is A Generator?
Why Use A Generator?
How To Make A Generator?
65
13年8月1⽇日星期四
http://0rz.tw/vzQN0
Source Code
66
13年8月1⽇日星期四
http://0rz.tw/DQ2Di
Yeoman.io
67
13年8月1⽇日星期四
Q & A
68
13年8月1⽇日星期四
Thanks
69
13年8月1⽇日星期四

Weitere ähnliche Inhalte

Ähnlich wie An intro of web scaffolding tool using yeoman generator

Node.js X Windows Azure
Node.js X Windows AzureNode.js X Windows Azure
Node.js X Windows AzureCaesar Chi
 
Django deploy
Django deployDjango deploy
Django deployAndy Dai
 
2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App
2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App
2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 AppHuang-I Yang
 
Objc under the_hood_2013
Objc under the_hood_2013Objc under the_hood_2013
Objc under the_hood_2013Michael Pan
 
Introduction to ZeroMQ
Introduction to ZeroMQIntroduction to ZeroMQ
Introduction to ZeroMQYiHung Lee
 
Node getting start
Node getting startNode getting start
Node getting starttbmallf2e
 
快快樂樂學 Scrapy
快快樂樂學 Scrapy快快樂樂學 Scrapy
快快樂樂學 Scrapyrecast203
 
App企劃設計 1
App企劃設計 1App企劃設計 1
App企劃設計 1Leader Chen
 
基于YUI3的组件开发
基于YUI3的组件开发基于YUI3的组件开发
基于YUI3的组件开发jay li
 
初探 Elastic Observability 的實踐方法
初探 Elastic Observability 的實踐方法初探 Elastic Observability 的實踐方法
初探 Elastic Observability 的實踐方法Joe Wu
 
用Octopus deploy做自動部署 - 快速上手
用Octopus deploy做自動部署 - 快速上手用Octopus deploy做自動部署 - 快速上手
用Octopus deploy做自動部署 - 快速上手Alan Tsai
 
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...SolarisJP
 

Ähnlich wie An intro of web scaffolding tool using yeoman generator (16)

Node.js X Windows Azure
Node.js X Windows AzureNode.js X Windows Azure
Node.js X Windows Azure
 
Cocoapods
CocoapodsCocoapods
Cocoapods
 
Django deploy
Django deployDjango deploy
Django deploy
 
2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App
2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App2013 輔大資工 暑期宅學營  PhoneGap  跨平台任我玩,HTML5 無痛開發 App
2013 輔大資工 暑期宅學營 PhoneGap 跨平台任我玩,HTML5 無痛開發 App
 
Nimbus
NimbusNimbus
Nimbus
 
Objc under the_hood_2013
Objc under the_hood_2013Objc under the_hood_2013
Objc under the_hood_2013
 
Introduction to ZeroMQ
Introduction to ZeroMQIntroduction to ZeroMQ
Introduction to ZeroMQ
 
Node getting start
Node getting startNode getting start
Node getting start
 
Pymacs 初體驗
Pymacs 初體驗Pymacs 初體驗
Pymacs 初體驗
 
快快樂樂學 Scrapy
快快樂樂學 Scrapy快快樂樂學 Scrapy
快快樂樂學 Scrapy
 
App企劃設計 1
App企劃設計 1App企劃設計 1
App企劃設計 1
 
基于YUI3的组件开发
基于YUI3的组件开发基于YUI3的组件开发
基于YUI3的组件开发
 
初探 Elastic Observability 的實踐方法
初探 Elastic Observability 的實踐方法初探 Elastic Observability 的實踐方法
初探 Elastic Observability 的實踐方法
 
用Octopus deploy做自動部署 - 快速上手
用Octopus deploy做自動部署 - 快速上手用Octopus deploy做自動部署 - 快速上手
用Octopus deploy做自動部署 - 快速上手
 
Banquet 39
Banquet 39Banquet 39
Banquet 39
 
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...
【第一回 ゼロからはじめる Oracle Solaris 11】03_知るべきは pkg(1) コマンドのみ! ~Image Packaging Syst...
 

An intro of web scaffolding tool using yeoman generator