Embed Size (px)
Citation preview
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⽇日星期四
@kmshenghttp://www.facebook.com/kuanmin.sheng.1
3
13年8月1⽇日星期四
I AmA Web Developer Who
Loves
4
13年8月1⽇日星期四
Outline1. Problem2. Demo: Generator3. What is a yeoman generator?4. Demo: Sub-generator5. Why Yeoman Generator?6. Generator API7. Demo of Making a Generator
5
13年8月1⽇日星期四
Back ThenWe StartedA 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 #1Scaffold Out A Project
http://youtu.be/0duXfsr6uOc13
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 & ConfigsBower Install & NPM Install
17
13年8月1⽇日星期四
Demo #2Creating Routes Using
Sub-generator
http://youtu.be/jvIOuALlnjM18
13年8月1⽇日星期四
19
13年8月1⽇日星期四
What Is A Sub-generator?
20
13年8月1⽇日星期四
Generate TempleatesWrite FilesDo Something Based On Option
21
13年8月1⽇日星期四
Why Use A Generator?
22
13年8月1⽇日星期四
It Saves Time23
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 Others31
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 Fai
l
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 Not44
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 repoyo 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#argumentBase#argument name
50
13年8月1⽇日星期四
Yo Pix:Controller arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argumentBase#argument nameBase#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 msgidentical msg info msg
✔ ok✗ error
55
13年8月1⽇日星期四
actions#checkForCollision
56
13年8月1⽇日星期四
actions#copy
generator
my repo57
13年8月1⽇日星期四
actions#copy
generator
my repo57
13年8月1⽇日星期四
actions#copy
generator
my repo57
13年8月1⽇日星期四
actions#copy
generator
my repo57
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 #3Writing 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⽇日星期四
