1. http://0rz.tw/UYJeS
An Intro Of Web Scaffolding Tool Using
Yeoman Generator
1
13年8月1⽇日星期四

2. An Intro Of Web
Scaffolding Tool
Using
Yeoman Generator
COSCUP 2013
2
13年8月1⽇日星期四

3. @kmsheng
http://www.facebook.com/kuanmin.sheng.1
3
13年8月1⽇日星期四

4. I Am
A Web Developer Who
Loves
4
13年8月1⽇日星期四

5. 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⽇日星期四

6. Back Then
We Started
A New Web Project
6
13年8月1⽇日星期四

7. 7
13年8月1⽇日星期四

8. Manually Find
Libraries And Add
8
13年8月1⽇日星期四

9. Manually Copy And
Paste The Same
Config Files
9
13年8月1⽇日星期四

10. 10
13年8月1⽇日星期四

11. Here Is A Way
Better Choice
11
13年8月1⽇日星期四

12. Yeoman Generator
12
13年8月1⽇日星期四

13. Demo #1
Scaffold Out A Project
http://youtu.be/0duXfsr6uOc
13
13年8月1⽇日星期四

14. 14
13年8月1⽇日星期四

15. What Is A Generator?
15
13年8月1⽇日星期四

16. 16
13年8月1⽇日星期四

17. 16
13年8月1⽇日星期四

18. 16
13年8月1⽇日星期四

19. 16
13年8月1⽇日星期四

20. Generate Templeates & Configs
Bower Install & NPM Install
17
13年8月1⽇日星期四

21. Demo #2
Creating Routes Using
Sub-generator
http://youtu.be/jvIOuALlnjM
18
13年8月1⽇日星期四

22. 19
13年8月1⽇日星期四

23. What Is A
Sub-generator?
20
13年8月1⽇日星期四

24. Generate Templeates
Write Files
Do Something Based On Option
21
13年8月1⽇日星期四

25. Why Use A Generator?
22
13年8月1⽇日星期四

26. It Saves Time
23
13年8月1⽇日星期四

27. Help Team Members
Follow Code Convention
24
13年8月1⽇日星期四

28. Lots Of Generators
Out There
generator-angular, generator-
bbb, generator-node ..etc.
25
13年8月1⽇日星期四

29. With Strong Team
Support
26
13年8月1⽇日星期四

30. Paul Irish Addy Osmani Mickael Daniel
Sindre Sorhus Eric Bidelman Frederick Ros
Brian Ford Pascal Hartig Stephon Sawchuk27
13年8月1⽇日星期四

31. Paul Irish Addy Osmani Mickael Daniel
Sindre Sorhus Eric Bidelman Frederick Ros
Brian Ford Pascal Hartig Stephon Sawchuk27
13年8月1⽇日星期四

32. Maybe You Wanted
To Say
28
13年8月1⽇日星期四

33. My Workflow Is Not
The Same As Yeoman’s
29
13年8月1⽇日星期四

34. Why Not To Make Your
Own Generator?
30
13年8月1⽇日星期四

35. The Real Meaning Of
This..
31
13年8月1⽇日星期四

36. The Real Meaning Of
This..
Is To Share Your
Ideas And Best
Bractices With Others
31
13年8月1⽇日星期四

37. How To Write A
Customized Yeoman
Generator?
32
13年8月1⽇日星期四

38. Generator-Generator
33
13年8月1⽇日星期四

39. Why
Generator-Generator?
34
13年8月1⽇日星期四

40. 35
13年8月1⽇日星期四

41. Epic Fail
35
13年8月1⽇日星期四

42. 36
13年8月1⽇日星期四

43. 37
13年8月1⽇日星期四

44. Setup
38
13年8月1⽇日星期四

45. npm install -g yo
generator-generator
39
13年8月1⽇日星期四

46. # in your generator repo
yo generator
40
13年8月1⽇日星期四

47. provide your github name
provide your generator name
41
13年8月1⽇日星期四

48. ├──
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⽇日星期四

49. Done?
43
13年8月1⽇日星期四

50. Of Course Not
44
13年8月1⽇日星期四

51. npm link
45
13年8月1⽇日星期四

52. Generator API
https://github.com/
yeoman/generator/wiki
46
13年8月1⽇日星期四

53. How To Create A
Sub-Generator?
47
13年8月1⽇日星期四

54. # in your generator repo
yo generator:subgenerator name
48
13年8月1⽇日星期四

55.
name
├──
index.js
├──
templates/somefile.js
49
13年8月1⽇日星期四

56.
name
├──
index.js
├──
templates/somefile.js
└──
USAGE
49
13年8月1⽇日星期四

57. Yo Pix:Controller
arg1 arg2 --json
50
13年8月1⽇日星期四

58. Yo Pix:Controller
arg1 arg2 --json
50
13年8月1⽇日星期四

59. Yo Pix:Controller
arg1 arg2 --json
Generator Name
50
13年8月1⽇日星期四

60. Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
50
13年8月1⽇日星期四

61. Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument name
50
13年8月1⽇日星期四

62. Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument
Base#argument name
50
13年8月1⽇日星期四

63. Yo Pix:Controller
arg1 arg2 --json
Generator Name Sub-gernerator Name
Base#argument
Base#argument name
Base#option
50
13年8月1⽇日星期四

64. Prompt#prompt
51
13年8月1⽇日星期四

65. 52
13年8月1⽇日星期四

66. Log
53
13年8月1⽇日星期四

67. this.log
.skip(‘msg’)
.create(‘msg’)
.invoke(‘msg’)
.conflict(‘msg’)
.identical(‘msg’)
.info(‘msg’)
.ok(‘ok’)
.error(‘error’);
node.js
54
13年8月1⽇日星期四

68. skip msg
force msg
create msg
invoke msg
conflict msg
identical msg
info msg
✔ ok
✗ error
55
13年8月1⽇日星期四

69. actions#checkForCollision
56
13年8月1⽇日星期四

70. actions#copy
generator
my repo
57
13年8月1⽇日星期四

71. actions#copy
generator
my repo
57
13年8月1⽇日星期四

72. actions#copy
generator
my repo
57
13年8月1⽇日星期四

73. actions#copy
generator
my repo
57
13年8月1⽇日星期四

74. this.copy(
‘main.src.scss’,
‘main.src.scss’
);
node.js
58
13年8月1⽇日星期四

75. actions#template
59
13年8月1⽇日星期四

76. this.template(
‘_bower.json’,
‘bower.json’,
{
appName: this.appName
}
);
node.js
60
13年8月1⽇日星期四

77. angularUtils#rewriteFile
61
13年8月1⽇日星期四

78. class HelloController extends Pix_Controller
{
public function indexAction()
{
}
public function worldAction()
{
}
// endbuild
}
PHP
62
13年8月1⽇日星期四

79. Demo #3
Writing A Generator
http://youtu.be/8ysBiN0Zw-463
13年8月1⽇日星期四

80. 64
13年8月1⽇日星期四

81. Summary
What Is A Generator?
Why Use A Generator?
How To Make A Generator?
65
13年8月1⽇日星期四

82. http://0rz.tw/vzQN0
Source Code
66
13年8月1⽇日星期四

83. http://0rz.tw/DQ2Di
Yeoman.io
67
13年8月1⽇日星期四

84. Q & A
68
13年8月1⽇日星期四

85. Thanks
69
13年8月1⽇日星期四