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. Ge...
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...
Paul Irish Addy Osmani Mickael Daniel
Sindre Sorhus Eric Bidelman Frederick Ros
Brian Ford Pascal Hartig Stephon Sawchuk27...
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
│	
 ...
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...
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(‘erro...
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()
{
}
// endb...
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⽇日星期四
Upcoming SlideShare
Loading in...5
×

An intro of web scaffolding tool using yeoman generator

1,696

Published on

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,696
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

An intro of web scaffolding tool using yeoman generator

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

    Clipping is a handy way to collect important slides you want to go back to later.

×