Successfully reported this slideshow.
Your SlideShare is downloading. ×

An intro of web scaffolding tool using yeoman generator

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×