Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Built Yeoman.io from commit 0d557ab on branch (unavailable)

  • Loading branch information...
commit 366c38ea1e129277caa272a1560a7c82d8844bf1 1 parent 3bc23e9
Travis-CI authored
Showing with 77 additions and 77 deletions.
  1. +1 −1  404.html
  2. +1 −1  authoring/composability.html
  3. +1 −1  authoring/debugging.html
  4. +1 −1  authoring/dependencies.html
  5. +1 −1  authoring/file-system.html
  6. +1 −1  authoring/gruntfile.html
  7. +1 −1  authoring/index.html
  8. +1 −1  authoring/integrating-yeoman.html
  9. +1 −1  authoring/running-context.html
  10. +1 −1  authoring/storage.html
  11. +1 −1  authoring/testing.html
  12. +1 −1  authoring/user-interactions.html
  13. +1 −1  blog/archive.html
  14. +3 −3 blog/atom.xml
  15. +1 −1  blog/bower_components-in-project-root.html
  16. +1 −1  blog/cleanup.html
  17. +1 −1  blog/generator-0.17.html
  18. +1 −1  blog/generator-karma-rewrite.html
  19. +1 −1  blog/generator-update-feb-0207.html
  20. +1 −1  blog/gulp-explore.html
  21. +1 −1  blog/hello-1.0.html
  22. +1 −1  blog/index.html
  23. +1 −1  blog/page2/index.html
  24. +1 −1  blog/performance-optimization.html
  25. +1 −1  blog/release-0.18.html
  26. +1 −1  blog/releases-march-7th.html
  27. +1 −1  blog/state-of-the-moustache-2015.html
  28. +2 −2 blog/whats-new-in-backbone-generator.html
  29. +1 −1  codelab.html
  30. +2 −2 codelab/install-generators.html
  31. +4 −4 codelab/install-packages.html
  32. +1 −1  codelab/keep-going.html
  33. +3 −3 codelab/local-storage.html
  34. +1 −1  codelab/meet-yeoman.html
  35. +3 −3 codelab/prepare-production.html
  36. +2 −2 codelab/preview-inbrowser.html
  37. +1 −1  codelab/review-generated-files.html
  38. +3 −3 codelab/scaffold-app.html
  39. +1 −1  codelab/setup.html
  40. +6 −6 codelab/write-app.html
  41. +3 −3 codelab/write-unit-tests.html
  42. +1 −1  contributing/index.html
  43. +1 −1  contributing/opening-issues.html
  44. +1 −1  contributing/pull-request.html
  45. +1 −1  contributing/style-guide.html
  46. +1 −1  contributing/testing-guidelines.html
  47. +1 −1  contributing/ticketing.html
  48. +1 −1  generators/index.html
  49. +1 −1  index.html
  50. +1 −1  learning/deployment.html
  51. +1 −1  learning/faq.html
  52. +1 −1  learning/index.html
  53. +1 −1  learning/resources.html
  54. +1 −1  learning/support.html
  55. +1 −1  migrate.html
  56. BIN  static/april-electron.13b33c7a1e.png
  57. BIN  static/april-electron.cb7fdc7e74.png
  58. BIN  static/april-es6.039a46de2c.png
  59. BIN  static/april-es6.d234a06289.png
  60. BIN  static/april-es62.57350bf664.png
  61. BIN  static/april-es62.d2fe90e04c.png
  62. BIN  static/april-react.9450e5850e.png
  63. BIN  static/april-react.dc00da3b7a.png
  64. BIN  static/backbone-app-path.9ac67dad82.png
  65. BIN  static/backbone-app-path.f010295c9e.png
  66. +1 −1  static/{bundle-4963.8591591dd0.css → bundle-4963.138cb6b273.css}
  67. BIN  static/conflict.5455a170f5.png
  68. BIN  static/conflict.fce8b6b674.png
  69. BIN  static/error.69508e0277.png
  70. BIN  static/error.9fe1f6d41c.png
  71. BIN  static/illustration-home-inverted.c8dec2dfb4.png
  72. BIN  static/illustration-home-inverted.f5b3ce295a.png
  73. BIN  static/{image_1.59a383e66f.png → image_1.cb4f4429e2.png}
  74. BIN  static/image_10.4237fc60a5.png
  75. BIN  static/image_10.50255883a8.png
  76. BIN  static/image_11.20436f57e5.png
  77. BIN  static/image_11.4c8f42b5a6.png
  78. BIN  static/image_12.9f0df5ac10.png
  79. BIN  static/image_12.dc9a9869a1.png
  80. BIN  static/image_13.3f2c9c257b.png
  81. BIN  static/image_13.e16acb0dcd.png
  82. BIN  static/image_14.54070ddc80.png
  83. BIN  static/image_14.c2b8b531f6.png
  84. BIN  static/image_15.bb89458fb8.png
  85. BIN  static/image_15.beeb1a1aee.png
  86. BIN  static/image_16.00deab837b.png
  87. BIN  static/image_16.85dc818adb.png
  88. BIN  static/image_17.00deab837b.png
  89. BIN  static/image_17.85dc818adb.png
  90. BIN  static/image_18.970522a5f4.png
  91. BIN  static/image_18.f52c26ff32.png
  92. BIN  static/image_19.d1fbae8a3b.png
  93. BIN  static/image_19.e8a86a06f0.png
  94. BIN  static/image_2.8911ff242b.png
  95. BIN  static/image_2.958d17371c.png
  96. BIN  static/image_20.2147ad569d.png
  97. BIN  static/image_20.f10cce6c1b.png
  98. BIN  static/image_21.0d23095f13.png
  99. BIN  static/image_21.9e860f6cbb.png
  100. BIN  static/image_22.b317ac566b.png
  101. BIN  static/image_22.c68a0ccfe4.png
  102. BIN  static/image_24.030cb43fbe.png
  103. BIN  static/image_24.9d6c5f6c49.png
  104. BIN  static/image_25.10df994af9.png
  105. BIN  static/image_25.3bca5ab50c.png
  106. BIN  static/image_26.303722d0c8.png
  107. BIN  static/image_26.616cf3ea29.png
  108. BIN  static/image_27.0d23095f13.png
  109. BIN  static/image_27.9e860f6cbb.png
  110. BIN  static/image_29.4eb3b98c5d.png
  111. BIN  static/image_29.5c5212e4a2.png
  112. BIN  static/image_30.300f81b3f8.png
  113. BIN  static/image_30.b5a20eda87.png
  114. BIN  static/image_31.3584ba5d10.png
  115. BIN  static/image_31.f3ab163fb2.png
  116. BIN  static/image_33.a33a479ec0.png
  117. BIN  static/image_33.caa474be21.png
  118. BIN  static/image_34.07198050ae.png
  119. BIN  static/image_34.77252b014e.png
  120. BIN  static/image_35.70879310ab.png
  121. BIN  static/image_35.8e3b60298d.png
  122. BIN  static/image_36.22012f967a.png
  123. BIN  static/image_36.b62436360a.png
  124. BIN  static/image_4.4628144919.png
  125. BIN  static/image_4.afb0c562ea.png
  126. BIN  static/image_7.3bd025f518.png
  127. BIN  static/image_7.40514c0707.png
  128. BIN  static/image_8.3a56566a6e.png
  129. BIN  static/image_8.dd5e3994c8.png
  130. BIN  static/image_9.6eaec827d3.png
  131. BIN  static/image_9.da5e1b8bb9.png
  132. BIN  static/logo.3678876372.png
  133. BIN  static/logo.f0661e3819.png
  134. BIN  static/rocket.7cafe608af.png
  135. BIN  static/rocket.ec59695b79.png
  136. BIN  static/tool-bower.87af2f37e2.png
  137. BIN  static/tool-bower.fd06b77fa3.png
  138. BIN  static/tool-grunt.88772330ac.png
  139. BIN  static/tool-grunt.cc29980f7f.png
  140. BIN  static/tool-yo.7a46202c4b.png
  141. BIN  static/tool-yo.b47e9287a2.png
  142. BIN  static/workflow.5cde84e3c0.jpg
  143. BIN  static/workflow.d2f8b8e0fe.jpg
  144. BIN  static/yeoman-02.61952591a7.png
  145. BIN  static/yeoman-02.af16ed28cf.png
  146. BIN  static/yo-backbone-mocha.079a5e6f79.png
  147. BIN  static/yo-backbone-mocha.5ddce6a569.png
View
2  404.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en data-version=83840b2><head><meta charset=utf-8><title>Page Not Found :( | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><style>::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}html{background:#000;font-family:'Roboto',sans-serif;font-size:1em;line-height:1.4;color:#fff}body{background:#000;color:#fff}a{color:#0096c7}a:hover{text-decoration:none}.container{overflow:hidden;max-width:1200px;margin:0 auto;padding:0 1em}h1{margin:0 0 1em;font-family:'Roboto Slab',serif;font-size:2em;line-height:1.2em}p{margin:1em 0}ul{padding:0 0 0 2em;margin:1em 0}.yeoman{display:block;max-width:80%;margin:0 auto 1em}@media only screen and (min-width:50em){.yeoman{float:left;width:45%;max-width:429px}.info{float:left;width:55%;padding-top:10em}h1{font-size:2.5em}}@media only screen and (min-width:60em){h1{font-size:3em}}</style><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=static/favicon.b25e58c4b8.ico></head><body><div class=container><img src=/static/error.9fe1f6d41c.png alt=Yeoman class=yeoman><div class=info><h1>YO! Someone turned the lights off!</h1><p>Sorry, but the page you were trying to view does not exist.</p><p>It looks like this was the result of either:</p><ul><li>a mistyped address</li> <li>an out-of-date link</li></ul><p><a href="/">Try going back to the site</a></p></div></div></body></html>
+<!DOCTYPE html><html lang=en data-version=0d557ab><head><meta charset=utf-8><title>Page Not Found :( | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><style>::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}html{background:#000;font-family:'Roboto',sans-serif;font-size:1em;line-height:1.4;color:#fff}body{background:#000;color:#fff}a{color:#0096c7}a:hover{text-decoration:none}.container{overflow:hidden;max-width:1200px;margin:0 auto;padding:0 1em}h1{margin:0 0 1em;font-family:'Roboto Slab',serif;font-size:2em;line-height:1.2em}p{margin:1em 0}ul{padding:0 0 0 2em;margin:1em 0}.yeoman{display:block;max-width:80%;margin:0 auto 1em}@media only screen and (min-width:50em){.yeoman{float:left;width:45%;max-width:429px}.info{float:left;width:55%;padding-top:10em}h1{font-size:2.5em}}@media only screen and (min-width:60em){h1{font-size:3em}}</style><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=static/favicon.b25e58c4b8.ico></head><body><div class=container><img src=/static/error.69508e0277.png alt=Yeoman class=yeoman><div class=info><h1>YO! Someone turned the lights off!</h1><p>Sorry, but the page you were trying to view does not exist.</p><p>It looks like this was the result of either:</p><ul><li>a mistyped address</li> <li>an out-of-date link</li></ul><p><a href="/">Try going back to the site</a></p></div></div></body></html>
View
2  authoring/composability.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Composability | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html class=active>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Composability</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html class=active>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><blockquote><p>Composability is a way to combine smaller parts to make one large thing. Sort of <a href=http://25.media.tumblr.com/tumblr_m1zllfCJV21r8gq9go11_250.gif>like Voltron®</a></p></blockquote><p>Yeoman offers multiple ways for generators to build upon common ground. There's no sense in rewriting the same functionality, so an API is provided to use generators inside other generators.</p><p>In Yeoman, composability can be initiated in two ways:</p><ul><li>A generator can decide to compose itself with other generator (e.g., <code>generator-backbone</code> uses <code>generator-mocha</code>).</li> <li>An end user may also initiate the composition (e.g., Simon wants to generate a Backbone project with SASS and Rails).</li></ul><p><strong>Note:</strong> The User composability feature landed in core in version <strong>0.17.0</strong>. It is a work in progress but is stable enough to start using. Further documentation will come after a few refinements to the process and can be expected sooner rather than later!</p><h2><code>generator.composeWith()</code></h2><p>The <code>composeWith</code> method allows the generator to run side-by-side with another generator. That way it can use features from the other generator instead of having to do it all by itself.</p><h3>API</h3><p><code>composeWith</code> takes three parameters.</p><ol><li><code>namespace</code> - A String declaring the namespace of the generator to compose with. The default matches generators installed on the end user's system. Use <a href="http://blog.nodejs.org/2013/02/07/peer-dependencies/"><code>peerDependencies</code></a> to install needed generators with this one.</li> <li><code>options</code> - An Object containing an <code>options</code> object and/or an <code>args</code> array. The called generator will receive these when it runs.</li> <li><p><code>settings</code> - An Object used to declare composition settings. The generator uses these when determining how to run other generators.</p><ul><li><code>settings.local</code> - A String that defines a path to the requested generator. This allows the use of sub-generators. It also allows the use of a specific version of a generator. To do so, declare it in the <a href=https://docs.npmjs.com/files/package.json#dependencies><code>dependencies</code> section inside <code>package.json</code></a>. Then reference the path to that generator, usually <code>node_modules/generator-name</code>.</li> <li><code>settings.link</code> - A String that is either <code>weak</code> (default), or <code>strong</code>.</li></ul><p>A <code>weak</code> link will not run when the composability is user initiated. A <code>strong</code> link will always run.</p><p>A <code>weak</code> link is for features unrelated to the core of the generator like backend frameworks or CSS preprocessors. A<code>strong</code> link is for features requiring an action to occur. An example is scaffolding a <em>module</em> by composing a <em>route</em> generator and a <em>model</em> generator.</p></li></ol><p>When composing with a <code>peerDependencies</code> generator:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=k>this</span><span class=p>.</span><span class=nx>composeWith</span><span class=p>(</span><span class=s1>'backbone:route'</span><span class=p>,</span> <span class=p>{</span> <span class=nx>options</span><span class=o>:</span> <span class=p>{</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Composability | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html class=active>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Composability</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html class=active>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><blockquote><p>Composability is a way to combine smaller parts to make one large thing. Sort of <a href=http://25.media.tumblr.com/tumblr_m1zllfCJV21r8gq9go11_250.gif>like Voltron®</a></p></blockquote><p>Yeoman offers multiple ways for generators to build upon common ground. There's no sense in rewriting the same functionality, so an API is provided to use generators inside other generators.</p><p>In Yeoman, composability can be initiated in two ways:</p><ul><li>A generator can decide to compose itself with other generator (e.g., <code>generator-backbone</code> uses <code>generator-mocha</code>).</li> <li>An end user may also initiate the composition (e.g., Simon wants to generate a Backbone project with SASS and Rails).</li></ul><p><strong>Note:</strong> The User composability feature landed in core in version <strong>0.17.0</strong>. It is a work in progress but is stable enough to start using. Further documentation will come after a few refinements to the process and can be expected sooner rather than later!</p><h2><code>generator.composeWith()</code></h2><p>The <code>composeWith</code> method allows the generator to run side-by-side with another generator. That way it can use features from the other generator instead of having to do it all by itself.</p><h3>API</h3><p><code>composeWith</code> takes three parameters.</p><ol><li><code>namespace</code> - A String declaring the namespace of the generator to compose with. The default matches generators installed on the end user's system. Use <a href="http://blog.nodejs.org/2013/02/07/peer-dependencies/"><code>peerDependencies</code></a> to install needed generators with this one.</li> <li><code>options</code> - An Object containing an <code>options</code> object and/or an <code>args</code> array. The called generator will receive these when it runs.</li> <li><p><code>settings</code> - An Object used to declare composition settings. The generator uses these when determining how to run other generators.</p><ul><li><code>settings.local</code> - A String that defines a path to the requested generator. This allows the use of sub-generators. It also allows the use of a specific version of a generator. To do so, declare it in the <a href=https://docs.npmjs.com/files/package.json#dependencies><code>dependencies</code> section inside <code>package.json</code></a>. Then reference the path to that generator, usually <code>node_modules/generator-name</code>.</li> <li><code>settings.link</code> - A String that is either <code>weak</code> (default), or <code>strong</code>.</li></ul><p>A <code>weak</code> link will not run when the composability is user initiated. A <code>strong</code> link will always run.</p><p>A <code>weak</code> link is for features unrelated to the core of the generator like backend frameworks or CSS preprocessors. A<code>strong</code> link is for features requiring an action to occur. An example is scaffolding a <em>module</em> by composing a <em>route</em> generator and a <em>model</em> generator.</p></li></ol><p>When composing with a <code>peerDependencies</code> generator:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=k>this</span><span class=p>.</span><span class=nx>composeWith</span><span class=p>(</span><span class=s1>'backbone:route'</span><span class=p>,</span> <span class=p>{</span> <span class=nx>options</span><span class=o>:</span> <span class=p>{</span>
<span class=nx>rjs</span><span class=o>:</span> <span class=kc>true</span>
<span class=p>}});</span>
</code></pre></div><p>When composing with a <code>dependencies</code> generator:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=k>this</span><span class=p>.</span><span class=nx>composeWith</span><span class=p>(</span><span class=s1>'backbone:route'</span><span class=p>,</span> <span class=p>{},</span> <span class=p>{</span>
View
2  authoring/debugging.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Debugging Generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html class=active>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Debugging Generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html class=active>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>To debug a generator, you can pass Node.js debug flags by running it like this:</p><div class=highlight><pre><code class=language-sh data-lang=sh><span class=c># OS X / Linux</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Debugging Generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html class=active>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Debugging Generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html class=active>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>To debug a generator, you can pass Node.js debug flags by running it like this:</p><div class=highlight><pre><code class=language-sh data-lang=sh><span class=c># OS X / Linux</span>
node --debug <span class=sb>`</span>which yo<span class=sb>`</span> &lt;generator&gt; <span class=o>[</span>arguments<span class=o>]</span>
<span class=c># Windows</span>
View
2  authoring/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing Dependencies | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html class=active>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing Dependencies</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html class=active>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Once you've run your generators, you'll often want to run <a href="https://www.npmjs.com/">npm</a> and <a href="http://bower.io/">Bower</a> to install any additional dependencies your generators require.</p><p>As these tasks are very frequent, Yeoman already abstracts them away. We'll also cover how you can launch installation through other tools.</p><p>Note that Yeoman provided installation helpers will automatically schedule the installation to run once as part of the <code>install</code> queue. If you need to run anything after they've run, use the <code>end</code> queue.</p><h2>npm</h2><p>You just need to call <code>generator.npmInstall()</code> to run an <code>npm</code> installation. Yeoman will ensure the <code>npm install</code> command is only run once even if it is called multiple times by multiple generators.</p><p>For example you want to install lodash as a dev dependency:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing Dependencies | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html class=active>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing Dependencies</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html class=active>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Once you've run your generators, you'll often want to run <a href="https://www.npmjs.com/">npm</a> and <a href="http://bower.io/">Bower</a> to install any additional dependencies your generators require.</p><p>As these tasks are very frequent, Yeoman already abstracts them away. We'll also cover how you can launch installation through other tools.</p><p>Note that Yeoman provided installation helpers will automatically schedule the installation to run once as part of the <code>install</code> queue. If you need to run anything after they've run, use the <code>end</code> queue.</p><h2>npm</h2><p>You just need to call <code>generator.npmInstall()</code> to run an <code>npm</code> installation. Yeoman will ensure the <code>npm install</code> command is only run once even if it is called multiple times by multiple generators.</p><p>For example you want to install lodash as a dev dependency:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
<span class=nx>installingLodash</span><span class=o>:</span> <span class=kd>function</span><span class=p>()</span> <span class=p>{</span>
<span class=k>this</span><span class=p>.</span><span class=nx>npmInstall</span><span class=p>([</span><span class=s1>'lodash'</span><span class=p>],</span> <span class=p>{</span> <span class=s1>'saveDev'</span><span class=o>:</span> <span class=kc>true</span> <span class=p>});</span>
<span class=p>}</span>
View
2  authoring/file-system.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Working With The File System | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html class=active>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Working With The File System</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html class=active>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><h2>Location contexts and paths</h2><p>Yeoman file utilities are based on the idea you always have two location contexts on disk. These contexts are folders your generator will most likely read from and write to.</p><h3>Destination context</h3><p>The first context is the <em>destination context</em>. The destination is the folder in which Yeoman will be scaffolding a new application. It is your user project folder, it is where you'll write most of the scaffolding.</p><p>The destination context is defined as either the current working directory or the closest parent folder containing a <code>.yo-rc.json</code> file. The <code>.yo-rc.json</code> file defines the root of a Yeoman project. This file allows your user to run commands in subdirectories and have them work on the project. This ensure a consistent behaviour for the end user.</p><p>You can <strong>get</strong> the <em>destination path</em> using <code>generator.destinationRoot()</code> or by joining a path using <code>generator.destinationPath('sub/path')</code>.</p><div class=highlight><pre><code class=language-js data-lang=js><span class=c1>// Given destination root is ~/projects</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Working With The File System | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html class=active>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Working With The File System</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html class=active>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><h2>Location contexts and paths</h2><p>Yeoman file utilities are based on the idea you always have two location contexts on disk. These contexts are folders your generator will most likely read from and write to.</p><h3>Destination context</h3><p>The first context is the <em>destination context</em>. The destination is the folder in which Yeoman will be scaffolding a new application. It is your user project folder, it is where you'll write most of the scaffolding.</p><p>The destination context is defined as either the current working directory or the closest parent folder containing a <code>.yo-rc.json</code> file. The <code>.yo-rc.json</code> file defines the root of a Yeoman project. This file allows your user to run commands in subdirectories and have them work on the project. This ensure a consistent behaviour for the end user.</p><p>You can <strong>get</strong> the <em>destination path</em> using <code>generator.destinationRoot()</code> or by joining a path using <code>generator.destinationPath('sub/path')</code>.</p><div class=highlight><pre><code class=language-js data-lang=js><span class=c1>// Given destination root is ~/projects</span>
<span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
<span class=nx>paths</span><span class=o>:</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=k>this</span><span class=p>.</span><span class=nx>destinationRoot</span><span class=p>();</span>
View
2  authoring/gruntfile.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing a Yeoman Gruntfile | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html class=active>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing a Yeoman Gruntfile</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html class=active>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Writing to a file is usually a simple task: prepare a string and write it to an output file using the <a href=/authoring/file-system.html>file system api</a>. However, issues arise when different, (hopefully <a href=/authoring/composability.html>composable</a>) generators must write to the same file. A conflict prompt often appears on each write action. This does not make for a good end user experience.</p><p>This is why Yeoman is wrapping the most commonly edited file, the <code>Gruntfile.js</code>, behind a façade. Introducing, the Yeoman Gruntfile editor API.</p><h2>The Gruntfile editor API</h2><p>Inside of a generator context, a new object, the <code>this.gruntfile</code> object, is now accessible. This object is a <code>GruntfileEditor</code> instance provided by the <a href=https://github.com/SBoudrias/gruntfile-editor>gruntfile-editor</a> module.</p><p>As a quick example, you'd use it this way:</p><div class=highlight><pre><code class=language-javascript data-lang=javascript><span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing a Yeoman Gruntfile | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html class=active>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing a Yeoman Gruntfile</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html class=active>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Writing to a file is usually a simple task: prepare a string and write it to an output file using the <a href=/authoring/file-system.html>file system api</a>. However, issues arise when different, (hopefully <a href=/authoring/composability.html>composable</a>) generators must write to the same file. A conflict prompt often appears on each write action. This does not make for a good end user experience.</p><p>This is why Yeoman is wrapping the most commonly edited file, the <code>Gruntfile.js</code>, behind a façade. Introducing, the Yeoman Gruntfile editor API.</p><h2>The Gruntfile editor API</h2><p>Inside of a generator context, a new object, the <code>this.gruntfile</code> object, is now accessible. This object is a <code>GruntfileEditor</code> instance provided by the <a href=https://github.com/SBoudrias/gruntfile-editor>gruntfile-editor</a> module.</p><p>As a quick example, you'd use it this way:</p><div class=highlight><pre><code class=language-javascript data-lang=javascript><span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
<span class=nx>writing</span><span class=o>:</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=k>this</span><span class=p>.</span><span class=nx>gruntfile</span><span class=p>.</span><span class=nx>insertConfig</span><span class=p>(</span><span class=s2>"compass"</span><span class=p>,</span> <span class=s2>"{ watch: { watch: true } }"</span><span class=p>);</span>
<span class=p>}</span>
View
2  authoring/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Writing Your Own Yeoman Generator | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html class=active>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Writing Your Own Yeoman Generator</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html class=active>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Generators are the building blocks of the Yeoman ecosystem. They're the plugins run by <code>yo</code> to generate files for end users.</p><p>In reading this section, you'll learn how to create and distribute your own.</p><aside class=excerpt>Note: We built a [generator-generator](https://github.com/yeoman/generator-generator) to help users get started with their own generator. Feel free to use it to bootstrap your own generator once you understand the below concepts.</aside><h2>Organizing your generators</h2><h3>Setting up as a node module</h3><p>A generator is, at its core, a Node.js module.</p><p>First, create a folder within which you'll write your generator. This folder must be named <code>generator-name</code> (where <code>name</code> is the name of your generator). This is important, as Yeoman relies on the file system to find available generators.</p><p>Once inside your generator folder, create a <code>package.json</code> file. This file is a Node.js module manifest. You can generate this file by running <code>npm init</code> from your command line or by entering the following manually:</p><div class=highlight><pre><code class=language-json data-lang=json><span class=p>{</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Writing Your Own Yeoman Generator | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html class=active>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Writing Your Own Yeoman Generator</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html class=active>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Generators are the building blocks of the Yeoman ecosystem. They're the plugins run by <code>yo</code> to generate files for end users.</p><p>In reading this section, you'll learn how to create and distribute your own.</p><aside class=excerpt>Note: We built a [generator-generator](https://github.com/yeoman/generator-generator) to help users get started with their own generator. Feel free to use it to bootstrap your own generator once you understand the below concepts.</aside><h2>Organizing your generators</h2><h3>Setting up as a node module</h3><p>A generator is, at its core, a Node.js module.</p><p>First, create a folder within which you'll write your generator. This folder must be named <code>generator-name</code> (where <code>name</code> is the name of your generator). This is important, as Yeoman relies on the file system to find available generators.</p><p>Once inside your generator folder, create a <code>package.json</code> file. This file is a Node.js module manifest. You can generate this file by running <code>npm init</code> from your command line or by entering the following manually:</p><div class=highlight><pre><code class=language-json data-lang=json><span class=p>{</span>
<span class=nt>"name"</span><span class=p>:</span> <span class=s2>"generator-name"</span><span class=p>,</span>
<span class=nt>"version"</span><span class=p>:</span> <span class=s2>"0.1.0"</span><span class=p>,</span>
<span class=nt>"description"</span><span class=p>:</span> <span class=s2>""</span><span class=p>,</span>
View
2  authoring/integrating-yeoman.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Integrating Yeoman | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html class=active>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Integrating Yeoman</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html class=active>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Every time you run a generator, you're actually using the <code>yeoman-environment</code>. The environment is a base system that is decoupled from any UI component and can be abstracted away by any tool. When you run <code>yo</code>, you're basically just running a terminal UI façade on top of the core Yeoman environment.</p><h2>The basics</h2><p>The first thing you need to know is the environment system is contained in the <code>yeoman-environment</code> package. You can install it by running:</p><div class=highlight><pre><code class=language-sh data-lang=sh>npm install --save yeoman-environment
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Integrating Yeoman | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html class=active>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Integrating Yeoman</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html class=active>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Every time you run a generator, you're actually using the <code>yeoman-environment</code>. The environment is a base system that is decoupled from any UI component and can be abstracted away by any tool. When you run <code>yo</code>, you're basically just running a terminal UI façade on top of the core Yeoman environment.</p><h2>The basics</h2><p>The first thing you need to know is the environment system is contained in the <code>yeoman-environment</code> package. You can install it by running:</p><div class=highlight><pre><code class=language-sh data-lang=sh>npm install --save yeoman-environment
</code></pre></div><p>This module provides methods to retrieve installed generators, register and run generators. It also provides the user interfaces adapter that generators are using. We provide a <a href="http://yeoman.github.io/environment/">full API documentation</a> (which is the terse list of methods available.)</p><h2>Using <code>yeoman-environment</code></h2><h3>A simple usage example</h3><p>Let's start with a simple usage example of <code>yeoman-environment</code> before we move to deeper topics.</p><p>In this example, let's assume <code>npm</code> wants to provide a <code>npm init</code> command to scaffold a <code>package.json</code>. Reading the other pages of the documentation, you already know how to create a generator - so let's assume we already have a <code>generator-npm</code>. We'll see how to invoke it.</p><p>First step is to instantiate a new environment instance.</p><div class=highlight><pre><code class=language-js data-lang=js><span class=kd>var</span> <span class=nx>yeoman</span> <span class=o>=</span> <span class=nx>require</span><span class=p>(</span><span class=s1>'yeoman-environment'</span><span class=p>);</span>
<span class=kd>var</span> <span class=nx>env</span> <span class=o>=</span> <span class=nx>yeoman</span><span class=p>.</span><span class=nx>createEnv</span><span class=p>();</span>
</code></pre></div><p>Then, we'll want to register our <code>generator-npm</code> so it can be used later. You have two options here:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=c1>// Here we register a generator based on its path. Providing the namespace</span>
View
2  authoring/running-context.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Generator Runtime Context | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html class=active>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Generator Runtime Context</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html class=active>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>One of the most important concepts to grasp when writing a Generator is how methods are run and in which context.</p><h2>Prototype methods as actions</h2><p>Each method directly attached to a Generator prototype is considered to be an action. Each action is run in sequence by the Yeoman environment run loop.</p><p>In other words, each method returned by <code>Object.getPrototypeOf(Generator)</code> will be automatically run.</p><h3>Helper and private methods</h3><p>Now that you know the prototype methods are considered as action, you may wonder how to define helper or private methods that won't be called automatically. There's three different methods to achieve this.</p><ol><li>Prefix method name by an underscore (e.g. <code>_method</code>).</li> <li><p>Use instance methods:</p><div class=highlight><pre><code class=language-js data-lang=js> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Generator Runtime Context | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html class=active>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Generator Runtime Context</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html class=active>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>One of the most important concepts to grasp when writing a Generator is how methods are run and in which context.</p><h2>Prototype methods as actions</h2><p>Each method directly attached to a Generator prototype is considered to be an action. Each action is run in sequence by the Yeoman environment run loop.</p><p>In other words, each method returned by <code>Object.getPrototypeOf(Generator)</code> will be automatically run.</p><h3>Helper and private methods</h3><p>Now that you know the prototype methods are considered as action, you may wonder how to define helper or private methods that won't be called automatically. There's three different methods to achieve this.</p><ol><li>Prefix method name by an underscore (e.g. <code>_method</code>).</li> <li><p>Use instance methods:</p><div class=highlight><pre><code class=language-js data-lang=js> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
<span class=nx>init</span><span class=o>:</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=k>this</span><span class=p>.</span><span class=nx>helperMethod</span> <span class=o>=</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=nx>console</span><span class=p>.</span><span class=nx>log</span><span class=p>(</span><span class=s1>'won\'t be called automatically'</span><span class=p>);</span>
View
2  authoring/storage.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing Configuration | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html class=active>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing Configuration</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html class=active>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Storing user configuration options and sharing them between sub-generators is a common task. For example, it is common to share preferences like the language (does the user use CoffeeScript?), style options (indenting with spaces or tabs), etc.</p><p>These configurations can be stored in the <code>.yo-rc.json</code> file through the <a href=http://yeoman.github.io/generator/Storage.html>Yeoman Storage API</a>. This API is accessible through the <code>generator.config</code> object.</p><p>Here are some common methods you'll use.</p><h2>Methods</h2><h3><code>generator.config.save()</code></h3><p>This method will write the configuration to the <code>.yo-rc.json</code> file. If the file doesn't exist yet, the <code>save</code> method will create it.</p><p>The <code>.yo-rc.json</code> file also determines the root of a project. Because of that, even if you're not using storage for anything, it is considered to be a best practice to always call <code>save</code> inside your <code>:app</code> generator.</p><p>Also note that the <code>save</code> method is called automatically each time you <code>set</code> a configuration option. So you usually won't need to call it explicitly.</p><h3><code>generator.config.set()</code></h3><p><code>set</code> either takes a key and an associated value, or an object hash of multiple keys/values.</p><p>Note that values must be JSON serializable (String, Number or non-recursive objects).</p><h3><code>generator.config.get()</code></h3><p><code>get</code> takes a <code>String</code> key as parameter and returns the associated value.</p><h3><code>generator.config.getAll()</code></h3><p>Returns an object of the full available configuration.</p><p>The returned object is passed by value, not reference. This means you still need to use the <code>set</code> method to update the configuration store.</p><h3><code>generator.config.delete()</code></h3><p>Deletes a key.</p><h3><code>generator.config.defaults()</code></h3><p>Accepts a hash of options to use as defaults values. If a key/value pair already exist, the value will remain untouched. If a key is missing, it will be added.</p><h2><code>.yo-rc.json</code> structure</h2><p>The <code>.yo-rc.json</code> file is a JSON file where configuration objects from multiple generators are stored. Each generator configuration is namespaced to ensure no naming conflicts occur between generators.</p><p>This also means each generator configuration is sandboxed and can only be shared between sub-generators. You cannot share configurations between different generators using the storage API. Use options and arguments during invocation to share data between different generators.</p><p>Here's what a <code>.yo-rc.json</code> file looks like internally:</p><div class=highlight><pre><code class=language-json data-lang=json><span class=p>{</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Managing Configuration | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html class=active>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Managing Configuration</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html class=active>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Storing user configuration options and sharing them between sub-generators is a common task. For example, it is common to share preferences like the language (does the user use CoffeeScript?), style options (indenting with spaces or tabs), etc.</p><p>These configurations can be stored in the <code>.yo-rc.json</code> file through the <a href=http://yeoman.github.io/generator/Storage.html>Yeoman Storage API</a>. This API is accessible through the <code>generator.config</code> object.</p><p>Here are some common methods you'll use.</p><h2>Methods</h2><h3><code>generator.config.save()</code></h3><p>This method will write the configuration to the <code>.yo-rc.json</code> file. If the file doesn't exist yet, the <code>save</code> method will create it.</p><p>The <code>.yo-rc.json</code> file also determines the root of a project. Because of that, even if you're not using storage for anything, it is considered to be a best practice to always call <code>save</code> inside your <code>:app</code> generator.</p><p>Also note that the <code>save</code> method is called automatically each time you <code>set</code> a configuration option. So you usually won't need to call it explicitly.</p><h3><code>generator.config.set()</code></h3><p><code>set</code> either takes a key and an associated value, or an object hash of multiple keys/values.</p><p>Note that values must be JSON serializable (String, Number or non-recursive objects).</p><h3><code>generator.config.get()</code></h3><p><code>get</code> takes a <code>String</code> key as parameter and returns the associated value.</p><h3><code>generator.config.getAll()</code></h3><p>Returns an object of the full available configuration.</p><p>The returned object is passed by value, not reference. This means you still need to use the <code>set</code> method to update the configuration store.</p><h3><code>generator.config.delete()</code></h3><p>Deletes a key.</p><h3><code>generator.config.defaults()</code></h3><p>Accepts a hash of options to use as defaults values. If a key/value pair already exist, the value will remain untouched. If a key is missing, it will be added.</p><h2><code>.yo-rc.json</code> structure</h2><p>The <code>.yo-rc.json</code> file is a JSON file where configuration objects from multiple generators are stored. Each generator configuration is namespaced to ensure no naming conflicts occur between generators.</p><p>This also means each generator configuration is sandboxed and can only be shared between sub-generators. You cannot share configurations between different generators using the storage API. Use options and arguments during invocation to share data between different generators.</p><p>Here's what a <code>.yo-rc.json</code> file looks like internally:</p><div class=highlight><pre><code class=language-json data-lang=json><span class=p>{</span>
<span class=nt>"generator-backbone"</span><span class=p>:</span> <span class=p>{</span>
<span class=nt>"requirejs"</span><span class=p>:</span> <span class=kc>true</span><span class=p>,</span>
<span class=nt>"coffee"</span><span class=p>:</span> <span class=kc>true</span>
View
2  authoring/testing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Testing Generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html class=active>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Testing Generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html class=active>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Read on to learn more about the testing helpers Yeoman add to ease the pain of unit testing a generator.</p><p>The examples below assume you use <a href="http://mochajs.org/">Mocha</a> in BDD mode. The global concept should apply easily to your unit testing framework of choice.</p><h2>Organizing your tests</h2><p>It is important to keep your tests simple and easily editable.</p><p>Usually the best way to organize your tests is to separate each generator and sub-generator into its own <code>describe</code> block. Then, add a <code>describe</code> block for each option your generator accept. And then, use an <code>it</code> block for each assertion (or related assertion).</p><p>The code running the generator should be located in a <code>before</code> or <code>beforeEach</code> block - it usually doesn't belong with your assertions.</p><p>In code, you should end up with a structure similar to this:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>describe</span><span class=p>(</span><span class=s1>'backbone:app'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Testing Generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html class=active>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Testing Generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html class=active>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Read on to learn more about the testing helpers Yeoman add to ease the pain of unit testing a generator.</p><p>The examples below assume you use <a href="http://mochajs.org/">Mocha</a> in BDD mode. The global concept should apply easily to your unit testing framework of choice.</p><h2>Organizing your tests</h2><p>It is important to keep your tests simple and easily editable.</p><p>Usually the best way to organize your tests is to separate each generator and sub-generator into its own <code>describe</code> block. Then, add a <code>describe</code> block for each option your generator accept. And then, use an <code>it</code> block for each assertion (or related assertion).</p><p>The code running the generator should be located in a <code>before</code> or <code>beforeEach</code> block - it usually doesn't belong with your assertions.</p><p>In code, you should end up with a structure similar to this:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>describe</span><span class=p>(</span><span class=s1>'backbone:app'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=nx>describe</span><span class=p>(</span><span class=s1>'when using require.js'</span><span class=p>,</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=nx>before</span><span class=p>(</span><span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=c1>// Mock the options, set up an output folder and run the generator</span>
View
2  authoring/user-interactions.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Interacting With The User | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html class=active>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Interacting With The User</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html class=active>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Your generator will interact a lot with the end user. By default Yeoman runs on a terminal, but it also supports custom user interfaces that different tools can provide. For example, nothing prevents a Yeoman generator from being run inside of a graphical tool like an editor or a standalone app.</p><p>To allow for this flexibility, Yeoman provides a set of user interface element abstractions. It is your responsibility as an author to only use those abstractions when interacting with your end user. Using other ways will probably prevent your generator from running correctly in different Yeoman tools.</p><p>For example, it is important to never use <code>console.log()</code> or <code>process.stdout.write()</code> to output content. Using them would hide the output from users not using a terminal. Instead, always rely on the UI generic <code>generator.log()</code> method, where <code>generator</code> is the context of your current generator.</p><h2>User interactions</h2><h3>Prompts</h3><p>Prompts are the main way a generator interacts with a user. The prompt module is provided by <a href=https://github.com/SBoudrias/Inquirer.js>Inquirer.js</a> and you should refer <a href=https://github.com/SBoudrias/Inquirer.js>to its API</a> for a list of available prompt options.</p><p>You call the prompt method this way:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Interacting With The User | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=documentation><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/" class=active>Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html class=active>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Interacting With The User</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html class=active>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></nav><article class=main><section class=content-chunk><p>Your generator will interact a lot with the end user. By default Yeoman runs on a terminal, but it also supports custom user interfaces that different tools can provide. For example, nothing prevents a Yeoman generator from being run inside of a graphical tool like an editor or a standalone app.</p><p>To allow for this flexibility, Yeoman provides a set of user interface element abstractions. It is your responsibility as an author to only use those abstractions when interacting with your end user. Using other ways will probably prevent your generator from running correctly in different Yeoman tools.</p><p>For example, it is important to never use <code>console.log()</code> or <code>process.stdout.write()</code> to output content. Using them would hide the output from users not using a terminal. Instead, always rely on the UI generic <code>generator.log()</code> method, where <code>generator</code> is the context of your current generator.</p><h2>User interactions</h2><h3>Prompts</h3><p>Prompts are the main way a generator interacts with a user. The prompt module is provided by <a href=https://github.com/SBoudrias/Inquirer.js>Inquirer.js</a> and you should refer <a href=https://github.com/SBoudrias/Inquirer.js>to its API</a> for a list of available prompt options.</p><p>You call the prompt method this way:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>extend</span><span class=p>({</span>
<span class=nx>prompting</span><span class=o>:</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=kd>var</span> <span class=nx>done</span> <span class=o>=</span> <span class=k>this</span><span class=p>.</span><span class=nx>async</span><span class=p>();</span>
<span class=k>this</span><span class=p>.</span><span class=nx>prompt</span><span class=p>({</span>
View
2  blog/archive.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog Archives | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog Archives</div></h2><div class="container clearfix"><article class=main><section class=content-chunk><p><a href=/blog/state-of-the-moustache-2015.html class=post-date>» State of the Moustache</a> - April 27, 2015</p><p><a href=/blog/bower_components-in-project-root.html class=post-date>» Why Bower_Components was moved to a Project's Root Directory</a> - December 1, 2014</p><p><a href=/blog/release-0.18.html class=post-date>» Yeoman generator version 0.18.0 - Release announcement</a> - October 14, 2014</p><p><a href=/blog/generator-karma-rewrite.html class=post-date>» Karma Generator Rewrite 0.8.0</a> - May 12, 2014</p><p><a href=/blog/generator-0.17.html class=post-date>» Yeoman Generator 0.17.0 prerelease 1</a> - March 11, 2014</p><p><a href=/blog/releases-march-7th.html class=post-date>» Yeoman updates for Friday, March 7th.</a> - March 7, 2014</p><p><a href=/blog/performance-optimization.html class=post-date>» Grunt And Gulp Tasks For Performance Optimization</a> - March 4, 2014</p><p><a href=/blog/whats-new-in-backbone-generator.html class=post-date>» What's new in the Backbone generator</a> - February 11, 2014</p><p><a href=/blog/generator-update-feb-0207.html class=post-date>» Updates to some of our generators</a> - February 7, 2014</p><p><a href=/blog/gulp-explore.html class=post-date>» Exploring A Generator For Gulp.js</a> - February 3, 2014</p><p><a href=/blog/cleanup.html class=post-date>» Generators New Year Cleanup!</a> - January 21, 2014</p><p><a href=/blog/hello-1.0.html class=post-date>» Release the Kraken! - Announcing Yeoman 1.0</a> - August 23, 2013</p></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/archive.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog Archives | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog Archives</div></h2><div class="container clearfix"><article class=main><section class=content-chunk><p><a href=/blog/state-of-the-moustache-2015.html class=post-date>» State of the Moustache</a> - April 27, 2015</p><p><a href=/blog/bower_components-in-project-root.html class=post-date>» Why Bower_Components was moved to a Project's Root Directory</a> - December 1, 2014</p><p><a href=/blog/release-0.18.html class=post-date>» Yeoman generator version 0.18.0 - Release announcement</a> - October 14, 2014</p><p><a href=/blog/generator-karma-rewrite.html class=post-date>» Karma Generator Rewrite 0.8.0</a> - May 12, 2014</p><p><a href=/blog/generator-0.17.html class=post-date>» Yeoman Generator 0.17.0 prerelease 1</a> - March 11, 2014</p><p><a href=/blog/releases-march-7th.html class=post-date>» Yeoman updates for Friday, March 7th.</a> - March 7, 2014</p><p><a href=/blog/performance-optimization.html class=post-date>» Grunt And Gulp Tasks For Performance Optimization</a> - March 4, 2014</p><p><a href=/blog/whats-new-in-backbone-generator.html class=post-date>» What's new in the Backbone generator</a> - February 11, 2014</p><p><a href=/blog/generator-update-feb-0207.html class=post-date>» Updates to some of our generators</a> - February 7, 2014</p><p><a href=/blog/gulp-explore.html class=post-date>» Exploring A Generator For Gulp.js</a> - February 3, 2014</p><p><a href=/blog/cleanup.html class=post-date>» Generators New Year Cleanup!</a> - January 21, 2014</p><p><a href=/blog/hello-1.0.html class=post-date>» Release the Kraken! - Announcing Yeoman 1.0</a> - August 23, 2013</p></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/archive.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
6 blog/atom.xml
@@ -3,7 +3,7 @@
<title>Yeoman Blog</title>
<link href="http://yeoman.io/blog/atom.xml" rel="self"/>
<link href="http://yeoman.io"/>
- <updated>2015-07-28T22:23:45+00:00</updated>
+ <updated>2015-07-29T00:05:35+00:00</updated>
<id>http://yeoman.io/</id>
<author>
<name>Yeoman.io</name>
@@ -15,7 +15,7 @@
<link href="http://yeoman.io/blog/state-of-the-moustache-2015.html"/>
<updated>2015-04-27T00:00:00+00:00</updated>
<id>http://yeoman.io/blog/state-of-the-moustache-2015</id>
- <content type="html">&lt;blockquote>&lt;p>This is a post by team member &lt;a href=https://github.com/addyosmani>Addy Osmani&lt;/a>. &lt;br>In this issue we cover generators for React, ES6, desktop apps and more.&lt;/p>&lt;/blockquote>&lt;h2>Intro&lt;/h2>&lt;p>Allo! Allo! April is a special month for us as it represents 3 years since the project first started and almost 2 years since we decided to rename the binary from &lt;a href=http://github.com/yeoman/yeoman>yeoman&lt;/a> to &lt;a href=http://github.com/yeoman/yo>yo&lt;/a>. This month also saw Yeoman grow to &lt;a href=http://www.npm-stats.com/%7Epackages/yo>1.3 million&lt;/a> total installs and 1635 community &lt;a href="http://yeoman.io/generators/">generators&lt;/a>.&lt;/p>&lt;p>A huge thank you to all our contributors and a special call-out to all the global event organisers that featured Yeoman at their events. &lt;a href=https://twitter.com/YeomanTO>YeomanTO&lt;/a>, the &lt;a href=https://twitter.com/Smartass_io/status/580501962527010816>Codepen Meetups&lt;/a>, &lt;a href=https://twitter.com/kevinSuttle/status/568811512938127361>IBM Design Camp&lt;/a>, &lt;a href=https://twitter.com/solanojuan/status/575807587095990272>OttawaJS&lt;/a>, &lt;a href=https://twitter.com/jsmontreal>JSMontreal&lt;/a> and others all have our ❤. We couldn't be doing this without you.&lt;/p>&lt;h2>Highlights&lt;/h2>&lt;p>Some of our recent highlights have been increased use of Yeoman for scaffolding in the React community, folks trying out ES6 to write their own &lt;a href=http://mammal.io/articles/yeoman-generators-es6>generators&lt;/a> and Internet Explorer PM Ade Bateman using yo to scaffold out &lt;a href=http://adrianba.net/archive/2015/03/14/using-yeoman-to-start-writing-technical-specifications-with-respec.aspx>technical specifications&lt;/a>. Crazy cool.&lt;/p>&lt;p>&lt;img src=/static/april-es6.d234a06289.png alt="">&lt;/p>&lt;p>We're excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.&lt;/p>&lt;h3>Spotlight: React&lt;/h3>&lt;p>&lt;a href=http://reactjs.com>React&lt;/a> is a library for creating user-interfaces by Facebook. It creates its own Virtual DOM, where components live. This approach provides the potential for performance gains as React calculates what work needs to be done in the DOM beforehand, updating the DOM tree in a batch accordingly. React avoids costly DOM operations and aims to update in an efficient way.&lt;/p>&lt;p>Three new generators for quickly getting started with React are out: &lt;a href=https://github.com/newtriks/generator-react-webpack>React and WebPack&lt;/a> (recommended, with support for Flux and react-router), &lt;a href=https://github.com/banderson/generator-flux-react>React and Flux&lt;/a> (with Browserify), and &lt;a href=https://github.com/payner35/generator-meteor-react>React and Meteor&lt;/a>.&lt;/p>&lt;p>&lt;img src=/static/april-react.9450e5850e.png alt="">&lt;/p>&lt;h3>Spotlight: ES6&lt;/h3>&lt;p>A number of new generators are also now available for quickly turning your ES6+ code into ES5 code. There are generators available for &lt;a href=https://github.com/thejameskyle/generator-es6-library-boilerplate>Babel&lt;/a>, &lt;a href=https://github.com/swirlycheetah/generator-angular2>Angular2&lt;/a> and &lt;a href=https://github.com/zewa666/generator-aurelia>Aurelia&lt;/a> - a new framework using ES6 and Web Components. A few more ES6 generators can be found over on my &lt;a href=https://github.com/addyosmani/es6-tools#code-generation>es6-tools&lt;/a> project.&lt;/p>&lt;p>&lt;img src=/static/april-es62.d2fe90e04c.png alt="">&lt;/p>&lt;h3>Spotlight: Electron&lt;/h3>&lt;p>&lt;a href="http://electron.atom.io/">Electron&lt;/a>, formerly atom-shell, allows you to build cross-platform desktop apps using JS/CSS/HTML. Some of the apps built using it that you may already be using include &lt;a href="https://slack.com/">Slack&lt;/a>, &lt;a href=https://atom.io>Atom Editor&lt;/a> (of course) and Photoshop/Sketch export tool &lt;a href="http://avocode.com/">Avocode&lt;/a>.&lt;/p>&lt;p>Electron is based on &lt;a href="http://iojs.org/">io.js&lt;/a> and Chromium and to help you get started with projects using it, Sindre Sorhus has written a quick Electron &lt;a href=https://github.com/sindresorhus/generator-electron>generator&lt;/a> you can try out. He also maintains a list of &lt;a href=https://github.com/sindresorhus/awesome-electron>awesome-electron&lt;/a> projects in case you're looking for inspiration.&lt;/p>&lt;p>&lt;img src=/static/april-electron.13b33c7a1e.png alt="">&lt;/p>&lt;h3>Spotlight: Node&lt;/h3>&lt;p>While many of us are used to just using &lt;code>npm init&lt;/code> for fleshing out our new Node modules, some might prefer a more opinionated alternative. Cue &lt;a href=https://github.com/sindresorhus/node-module-boilerplate>node-module-boilerplate&lt;/a> and &lt;a href=https://github.com/sindresorhus/generator-nm>generator-nm&lt;/a> by Sindre Sorhus. His starting point includes EditorConfig, Travis and a unit testing starting point out of the box.&lt;/p>&lt;p>On a related note, if you find yourself needing to automate debugging a Yeoman generator with node-inspector, Hemanth on the team has written up a useful &lt;a href=https://github.com/hemanth/debug-yeoman-generator>script&lt;/a> you can also check out.&lt;/p>&lt;h2>Community&lt;/h2>&lt;p>Below is a round-up of community authored articles about or mentioning Yeoman which we enjoyed reading this month. Learn how to build a complete WebRTC client, a Slack bot or automate your Wordpress theme tooling workflow. This and more below.&lt;/p>&lt;h3>Articles&lt;/h3>&lt;p>&lt;a href=http://blog.mgechev.com/2014/12/26/multi-user-video-conference-webrtc-angularjs-yeoman>Multi-User Video Conference with WebRTC and Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=http://mammal.io/articles/yeoman-generators-es6>Writing Yeoman generators in ES6&lt;/a>&lt;/p>&lt;p>&lt;a href="http://blog.pandorabots.com/putting-your-bot-on-slack/">Putting your bot on #Slack using Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=https://stormpath.com/blog/angular-node-15-minutes>How to Build an App With AngularJS, Node.js and Stormpath in 15 Minutes&lt;/a>&lt;/p>&lt;p>&lt;a href=https://speakerdeck.com/artificermil/front-end-workflow-automation-for-wordpress-theme-and-plugin-development>Worflow automation for Wordpress Theme Developers with Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015>A Baseline for Front-End [JS] Developers: 2015&lt;/a>&lt;/p>&lt;p>&lt;a href=http://robdodson.me/yeoman-polymer-and-gulp>Yeoman, Polymer and Gulp&lt;/a>&lt;/p>&lt;p>&lt;a href=http://yeoman.io/authoring/integrating-yeoman.html>Integrating Yeoman with third-party tools&lt;/a>&lt;/p>&lt;p>&lt;a href=https://asciinema.org/a/13240>Using &lt;code>yo webapp&lt;/code> via Docker&lt;/a>&lt;/p>&lt;p>&lt;a href="http://itmustbe.com/code/2015/04/04/node-yeoman-bower-gulp-postcss-os-x-yosemite/">Node, Yeoman, Bower, and Gulp with PostCSS on OS X Yosemite&lt;/a>&lt;/p>&lt;p>&lt;a href="https://youtube.com/watch?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl&amp;amp;v=bqTLJi086Po">Yeoman Tutorial video series&lt;/a>&lt;/p>&lt;p>&lt;a href=https://scotch.io/tutorials/internationalization-of-angularjs-applications>Internationalization of AngularJS Applications&lt;/a>&lt;/p>&lt;p>&lt;a href="http://www.drissamri.be/blog/technology/starting-modern-java-project-with-jhipster/">Starting modern Java projects with JHipster and Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href="http://khmylov.com/blog/2015/02/build-web-app-and-survive/">How to set up a modern web app and stay sane&lt;/a>&lt;/p>&lt;p>&lt;a href="http://angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/?utm_medium=email&amp;amp;utm_source=rubyweekly">How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application (Gulp Version)&lt;/a>&lt;/p>&lt;p>&lt;a href="https://airpair.com/typescript/posts/typescript-development-with-gulp-and-sublime-text?utm_medium=email&amp;amp;utm_source=javascriptweekly">Practical TypeScript Development with Gulp and Sublime Text 3&lt;/a>&lt;/p>&lt;h3>Some generators we liked&lt;/h3>&lt;p>&lt;a href="http://axiacore.github.io/generator-django-axiacore/">A new generator for Django projects&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/ragingwind/mobile-chrome-apps-starter-kit>Mobile Chrome Apps Starter Kit with Polymer&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/Swiip/generator-gulp-angular/releases>Angular + Gulp generator has a new release&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/bezoerb/generator-grunt-symfony>Symphony2 with JSPM and critical-CSS optimisation&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/sixertoy/generator-brackextension>Generator for Adobe Brackets extensions&lt;/a>&lt;/p>&lt;h2>Announcements from core&lt;/h2>&lt;h3>Exploring npm3&lt;/h3>&lt;p>&lt;a href=https://github.com/npm/npm/wiki/Roadmap>npm@3&lt;/a> plans to introduce a number of improvements, including a caching rewrite and no longer installing &lt;code>peerDependencies&lt;/code> by default. This particular change will have an impact on &lt;code>yo&lt;/code> as it means you end up needing to resolve peerDep conflicts yourself manually. We may end up having our sub-generators in &lt;code>dependencies&lt;/code> instead, but look forward to taking full advantage of npm@3 where it'll benefit our users.&lt;/p>&lt;h3>Deprecations&lt;/h3>&lt;p>As Simon mentioned in our &lt;a href=https://github.com/yeoman/generator/releases/tag/v0.19.0>0.19 release notes&lt;/a> for the generator system, we're currently looking to deprecate a set of methods as we work on cleaning up our API towards an eventual 1.0 release. As always, please test your generators against the latest version of &lt;code>yeoman-generator&lt;/code> to ensure everything continues to run smoothly.&lt;/p>&lt;h3>Composition FTW&lt;/h3>&lt;p>It's been pleasant to see an &lt;a href=https://twitter.com/tomwayson/status/588564830665084930>increasing&lt;/a> number of developers using our &lt;a href=http://yeoman.io/authoring/composability.html>composability&lt;/a> feature for their generators. This enables building upon common ground so that a generator can be run inside another generator, rather than having to replicate functionality. E.g call out to a generator for scaffolding Karma tests rather than doing this inside your AngularApp one.&lt;/p>&lt;h2>Tipping our hat&lt;/h2>&lt;p>That's about it for this round-up. We would like to remind folks that we're always checking out &lt;a href=http://twitter.com/yeoman>@yeoman&lt;/a> and enjoy hearing suggestions for anything we can be doing better, news, new generators you've written or even just &lt;a href=https://twitter.com/kittytail38/status/573522972528373761>doodles&lt;/a> of your favorite man in a hat. If you have ideas for the next post, you can also drop 'em in this &lt;a href=https://github.com/yeoman/yeoman/issues/1411>thread&lt;/a>.&lt;/p>&lt;p>Until next time, &lt;code>yo awesomeness&lt;/code>.&lt;/p></content>
+ <content type="html">&lt;blockquote>&lt;p>This is a post by team member &lt;a href=https://github.com/addyosmani>Addy Osmani&lt;/a>. &lt;br>In this issue we cover generators for React, ES6, desktop apps and more.&lt;/p>&lt;/blockquote>&lt;h2>Intro&lt;/h2>&lt;p>Allo! Allo! April is a special month for us as it represents 3 years since the project first started and almost 2 years since we decided to rename the binary from &lt;a href=http://github.com/yeoman/yeoman>yeoman&lt;/a> to &lt;a href=http://github.com/yeoman/yo>yo&lt;/a>. This month also saw Yeoman grow to &lt;a href=http://www.npm-stats.com/%7Epackages/yo>1.3 million&lt;/a> total installs and 1635 community &lt;a href="http://yeoman.io/generators/">generators&lt;/a>.&lt;/p>&lt;p>A huge thank you to all our contributors and a special call-out to all the global event organisers that featured Yeoman at their events. &lt;a href=https://twitter.com/YeomanTO>YeomanTO&lt;/a>, the &lt;a href=https://twitter.com/Smartass_io/status/580501962527010816>Codepen Meetups&lt;/a>, &lt;a href=https://twitter.com/kevinSuttle/status/568811512938127361>IBM Design Camp&lt;/a>, &lt;a href=https://twitter.com/solanojuan/status/575807587095990272>OttawaJS&lt;/a>, &lt;a href=https://twitter.com/jsmontreal>JSMontreal&lt;/a> and others all have our ❤. We couldn't be doing this without you.&lt;/p>&lt;h2>Highlights&lt;/h2>&lt;p>Some of our recent highlights have been increased use of Yeoman for scaffolding in the React community, folks trying out ES6 to write their own &lt;a href=http://mammal.io/articles/yeoman-generators-es6>generators&lt;/a> and Internet Explorer PM Ade Bateman using yo to scaffold out &lt;a href=http://adrianba.net/archive/2015/03/14/using-yeoman-to-start-writing-technical-specifications-with-respec.aspx>technical specifications&lt;/a>. Crazy cool.&lt;/p>&lt;p>&lt;img src=/static/april-es6.039a46de2c.png alt="">&lt;/p>&lt;p>We're excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.&lt;/p>&lt;h3>Spotlight: React&lt;/h3>&lt;p>&lt;a href=http://reactjs.com>React&lt;/a> is a library for creating user-interfaces by Facebook. It creates its own Virtual DOM, where components live. This approach provides the potential for performance gains as React calculates what work needs to be done in the DOM beforehand, updating the DOM tree in a batch accordingly. React avoids costly DOM operations and aims to update in an efficient way.&lt;/p>&lt;p>Three new generators for quickly getting started with React are out: &lt;a href=https://github.com/newtriks/generator-react-webpack>React and WebPack&lt;/a> (recommended, with support for Flux and react-router), &lt;a href=https://github.com/banderson/generator-flux-react>React and Flux&lt;/a> (with Browserify), and &lt;a href=https://github.com/payner35/generator-meteor-react>React and Meteor&lt;/a>.&lt;/p>&lt;p>&lt;img src=/static/april-react.dc00da3b7a.png alt="">&lt;/p>&lt;h3>Spotlight: ES6&lt;/h3>&lt;p>A number of new generators are also now available for quickly turning your ES6+ code into ES5 code. There are generators available for &lt;a href=https://github.com/thejameskyle/generator-es6-library-boilerplate>Babel&lt;/a>, &lt;a href=https://github.com/swirlycheetah/generator-angular2>Angular2&lt;/a> and &lt;a href=https://github.com/zewa666/generator-aurelia>Aurelia&lt;/a> - a new framework using ES6 and Web Components. A few more ES6 generators can be found over on my &lt;a href=https://github.com/addyosmani/es6-tools#code-generation>es6-tools&lt;/a> project.&lt;/p>&lt;p>&lt;img src=/static/april-es62.57350bf664.png alt="">&lt;/p>&lt;h3>Spotlight: Electron&lt;/h3>&lt;p>&lt;a href="http://electron.atom.io/">Electron&lt;/a>, formerly atom-shell, allows you to build cross-platform desktop apps using JS/CSS/HTML. Some of the apps built using it that you may already be using include &lt;a href="https://slack.com/">Slack&lt;/a>, &lt;a href=https://atom.io>Atom Editor&lt;/a> (of course) and Photoshop/Sketch export tool &lt;a href="http://avocode.com/">Avocode&lt;/a>.&lt;/p>&lt;p>Electron is based on &lt;a href="http://iojs.org/">io.js&lt;/a> and Chromium and to help you get started with projects using it, Sindre Sorhus has written a quick Electron &lt;a href=https://github.com/sindresorhus/generator-electron>generator&lt;/a> you can try out. He also maintains a list of &lt;a href=https://github.com/sindresorhus/awesome-electron>awesome-electron&lt;/a> projects in case you're looking for inspiration.&lt;/p>&lt;p>&lt;img src=/static/april-electron.cb7fdc7e74.png alt="">&lt;/p>&lt;h3>Spotlight: Node&lt;/h3>&lt;p>While many of us are used to just using &lt;code>npm init&lt;/code> for fleshing out our new Node modules, some might prefer a more opinionated alternative. Cue &lt;a href=https://github.com/sindresorhus/node-module-boilerplate>node-module-boilerplate&lt;/a> and &lt;a href=https://github.com/sindresorhus/generator-nm>generator-nm&lt;/a> by Sindre Sorhus. His starting point includes EditorConfig, Travis and a unit testing starting point out of the box.&lt;/p>&lt;p>On a related note, if you find yourself needing to automate debugging a Yeoman generator with node-inspector, Hemanth on the team has written up a useful &lt;a href=https://github.com/hemanth/debug-yeoman-generator>script&lt;/a> you can also check out.&lt;/p>&lt;h2>Community&lt;/h2>&lt;p>Below is a round-up of community authored articles about or mentioning Yeoman which we enjoyed reading this month. Learn how to build a complete WebRTC client, a Slack bot or automate your Wordpress theme tooling workflow. This and more below.&lt;/p>&lt;h3>Articles&lt;/h3>&lt;p>&lt;a href=http://blog.mgechev.com/2014/12/26/multi-user-video-conference-webrtc-angularjs-yeoman>Multi-User Video Conference with WebRTC and Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=http://mammal.io/articles/yeoman-generators-es6>Writing Yeoman generators in ES6&lt;/a>&lt;/p>&lt;p>&lt;a href="http://blog.pandorabots.com/putting-your-bot-on-slack/">Putting your bot on #Slack using Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=https://stormpath.com/blog/angular-node-15-minutes>How to Build an App With AngularJS, Node.js and Stormpath in 15 Minutes&lt;/a>&lt;/p>&lt;p>&lt;a href=https://speakerdeck.com/artificermil/front-end-workflow-automation-for-wordpress-theme-and-plugin-development>Worflow automation for Wordpress Theme Developers with Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href=http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015>A Baseline for Front-End [JS] Developers: 2015&lt;/a>&lt;/p>&lt;p>&lt;a href=http://robdodson.me/yeoman-polymer-and-gulp>Yeoman, Polymer and Gulp&lt;/a>&lt;/p>&lt;p>&lt;a href=http://yeoman.io/authoring/integrating-yeoman.html>Integrating Yeoman with third-party tools&lt;/a>&lt;/p>&lt;p>&lt;a href=https://asciinema.org/a/13240>Using &lt;code>yo webapp&lt;/code> via Docker&lt;/a>&lt;/p>&lt;p>&lt;a href="http://itmustbe.com/code/2015/04/04/node-yeoman-bower-gulp-postcss-os-x-yosemite/">Node, Yeoman, Bower, and Gulp with PostCSS on OS X Yosemite&lt;/a>&lt;/p>&lt;p>&lt;a href="https://youtube.com/watch?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl&amp;amp;v=bqTLJi086Po">Yeoman Tutorial video series&lt;/a>&lt;/p>&lt;p>&lt;a href=https://scotch.io/tutorials/internationalization-of-angularjs-applications>Internationalization of AngularJS Applications&lt;/a>&lt;/p>&lt;p>&lt;a href="http://www.drissamri.be/blog/technology/starting-modern-java-project-with-jhipster/">Starting modern Java projects with JHipster and Yeoman&lt;/a>&lt;/p>&lt;p>&lt;a href="http://khmylov.com/blog/2015/02/build-web-app-and-survive/">How to set up a modern web app and stay sane&lt;/a>&lt;/p>&lt;p>&lt;a href="http://angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/?utm_medium=email&amp;amp;utm_source=rubyweekly">How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application (Gulp Version)&lt;/a>&lt;/p>&lt;p>&lt;a href="https://airpair.com/typescript/posts/typescript-development-with-gulp-and-sublime-text?utm_medium=email&amp;amp;utm_source=javascriptweekly">Practical TypeScript Development with Gulp and Sublime Text 3&lt;/a>&lt;/p>&lt;h3>Some generators we liked&lt;/h3>&lt;p>&lt;a href="http://axiacore.github.io/generator-django-axiacore/">A new generator for Django projects&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/ragingwind/mobile-chrome-apps-starter-kit>Mobile Chrome Apps Starter Kit with Polymer&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/Swiip/generator-gulp-angular/releases>Angular + Gulp generator has a new release&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/bezoerb/generator-grunt-symfony>Symphony2 with JSPM and critical-CSS optimisation&lt;/a>&lt;/p>&lt;p>&lt;a href=https://github.com/sixertoy/generator-brackextension>Generator for Adobe Brackets extensions&lt;/a>&lt;/p>&lt;h2>Announcements from core&lt;/h2>&lt;h3>Exploring npm3&lt;/h3>&lt;p>&lt;a href=https://github.com/npm/npm/wiki/Roadmap>npm@3&lt;/a> plans to introduce a number of improvements, including a caching rewrite and no longer installing &lt;code>peerDependencies&lt;/code> by default. This particular change will have an impact on &lt;code>yo&lt;/code> as it means you end up needing to resolve peerDep conflicts yourself manually. We may end up having our sub-generators in &lt;code>dependencies&lt;/code> instead, but look forward to taking full advantage of npm@3 where it'll benefit our users.&lt;/p>&lt;h3>Deprecations&lt;/h3>&lt;p>As Simon mentioned in our &lt;a href=https://github.com/yeoman/generator/releases/tag/v0.19.0>0.19 release notes&lt;/a> for the generator system, we're currently looking to deprecate a set of methods as we work on cleaning up our API towards an eventual 1.0 release. As always, please test your generators against the latest version of &lt;code>yeoman-generator&lt;/code> to ensure everything continues to run smoothly.&lt;/p>&lt;h3>Composition FTW&lt;/h3>&lt;p>It's been pleasant to see an &lt;a href=https://twitter.com/tomwayson/status/588564830665084930>increasing&lt;/a> number of developers using our &lt;a href=http://yeoman.io/authoring/composability.html>composability&lt;/a> feature for their generators. This enables building upon common ground so that a generator can be run inside another generator, rather than having to replicate functionality. E.g call out to a generator for scaffolding Karma tests rather than doing this inside your AngularApp one.&lt;/p>&lt;h2>Tipping our hat&lt;/h2>&lt;p>That's about it for this round-up. We would like to remind folks that we're always checking out &lt;a href=http://twitter.com/yeoman>@yeoman&lt;/a> and enjoy hearing suggestions for anything we can be doing better, news, new generators you've written or even just &lt;a href=https://twitter.com/kittytail38/status/573522972528373761>doodles&lt;/a> of your favorite man in a hat. If you have ideas for the next post, you can also drop 'em in this &lt;a href=https://github.com/yeoman/yeoman/issues/1411>thread&lt;/a>.&lt;/p>&lt;p>Until next time, &lt;code>yo awesomeness&lt;/code>.&lt;/p></content>
</entry>
<entry>
@@ -82,7 +82,7 @@
<updated>2014-02-11T00:00:00+00:00</updated>
<id>http://yeoman.io/blog/whats-new-in-backbone-generator</id>
<content type="html">&lt;p>The Backbone generator has had a few major updates recently and we wanted to share these changes with the community. The theme of the changes is to make the generator more flexible. There is also some updates related to testing and styling we wanted to share.&lt;/p>&lt;h2>Custom app path&lt;/h2>&lt;p>Before, the scaffold generated the project's application files into the app folder. Now you can customize it using the &lt;code>--appPath&lt;/code> option.&lt;/p>&lt;div class=highlight>&lt;pre>&lt;code class=language-sh data-lang=sh>yo backbone --appPath&lt;span class=o>=&lt;/span>public
-&lt;/code>&lt;/pre>&lt;/div>&lt;p>This will create a folder named &lt;code>public&lt;/code> instead of &lt;code>app&lt;/code>. It will then put the scaffolded code into that folder. When you use a sub-generator, like &lt;code>backbone:model&lt;/code>, the scaffold will use the &lt;code>public&lt;/code> directory.&lt;/p>&lt;p>&lt;img src=/static/backbone-app-path.f010295c9e.png alt="app-path option">&lt;/p>&lt;h2>Generating &lt;a href="http://mochajs.org/">Mocha&lt;/a> tests&lt;/h2>&lt;p>We have written a new generator named &lt;a href=https://github.com/revathskumar/generator-backbone-mocha>generator-backbone-mocha&lt;/a>. This will generate Mocha tests for your Backbone app. When you create new model with &lt;code>yo backbone:model todo&lt;/code>, this will create &lt;code>todo.spec.js&lt;/code> in your &lt;code>test&lt;/code> folder.&lt;/p>&lt;p>&lt;img src=/static/yo-backbone-mocha.5ddce6a569.png alt="Backbone mocha">&lt;/p>&lt;p>You can choose BDD/TDD when generating the new Backbone app with the &lt;code>--ui&lt;/code> option.&lt;/p>&lt;div class=highlight>&lt;pre>&lt;code class=language-sh data-lang=sh>yo backbone --ui&lt;span class=o>=&lt;/span>tdd
+&lt;/code>&lt;/pre>&lt;/div>&lt;p>This will create a folder named &lt;code>public&lt;/code> instead of &lt;code>app&lt;/code>. It will then put the scaffolded code into that folder. When you use a sub-generator, like &lt;code>backbone:model&lt;/code>, the scaffold will use the &lt;code>public&lt;/code> directory.&lt;/p>&lt;p>&lt;img src=/static/backbone-app-path.9ac67dad82.png alt="app-path option">&lt;/p>&lt;h2>Generating &lt;a href="http://mochajs.org/">Mocha&lt;/a> tests&lt;/h2>&lt;p>We have written a new generator named &lt;a href=https://github.com/revathskumar/generator-backbone-mocha>generator-backbone-mocha&lt;/a>. This will generate Mocha tests for your Backbone app. When you create new model with &lt;code>yo backbone:model todo&lt;/code>, this will create &lt;code>todo.spec.js&lt;/code> in your &lt;code>test&lt;/code> folder.&lt;/p>&lt;p>&lt;img src=/static/yo-backbone-mocha.079a5e6f79.png alt="Backbone mocha">&lt;/p>&lt;p>You can choose BDD/TDD when generating the new Backbone app with the &lt;code>--ui&lt;/code> option.&lt;/p>&lt;div class=highlight>&lt;pre>&lt;code class=language-sh data-lang=sh>yo backbone --ui&lt;span class=o>=&lt;/span>tdd
&lt;/code>&lt;/pre>&lt;/div>&lt;p>By default the generator is setup to use BDD with Mocha.&lt;/p>&lt;h2>Added CoffeeScript support for RequireJS&lt;/h2>&lt;p>Another great addition to the Backbone generator (version 2.0), is CoffeeScript support for RequireJS. A lot of people have requested this and we are happy to announce support for it. Thanks to &lt;a href=https://github.com/stephanebachelier>@stephanebachelier&lt;/a> for the effort in getting this in.&lt;/p>&lt;h2>Bootstrap 3.0&lt;/h2>&lt;p>The last change we want to announce relates to Bootstrap. We have upgraded to Bootstrap 3.0! Now by default, Yeoman will install Bootstrap 3.0 when you generate a new application. Don't fear though, projects can include Bootstrap 2.0 still. After project generation, edit the bower.json file and change the version of (sass-)bootstrap required.&lt;/p>&lt;h2>Other minor updates&lt;/h2>&lt;ul>&lt;li>Dropped support for node 0.8&lt;/li> &lt;li>&lt;code>grunt server&lt;/code> task is now deprecated. &lt;code>grunt serve&lt;/code> has replaced it. For more information, see &lt;a href=https://github.com/yeoman/yeoman/issues/1183>this issue explaining it&lt;/a>&lt;/li> &lt;li>Improved scaffolds&lt;/li>&lt;/ul>&lt;p>We hope you like the new additions and enhancements we have made on the Backbone generator. We are looking for your feedback on keeping this project awesome.&lt;/p></content>
</entry>
View
2  blog/bower_components-in-project-root.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Why Bower_Components was moved to a Project's Root Directory | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Why Bower_Components was moved to a Project's Root Directory</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>01 Dec 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Why Bower_Components was moved to a Project's Root Directory">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><blockquote><p>this is a post by team member <a href=https://github.com/eddiemonge>Eddie Monge Jr</a></p></blockquote><p><strong>tl;dr</strong> Because I said so. lol j/k. <code>/app</code> should be for your files, not third party libraries.</p><p>There has been a few questions and discussions regarding the decision to move the <strong>bower_components</strong> folder outside of the <code>/app</code> folder.</p><p>Matija (<a href=https://github.com/silvenon>silvenon</a>) summarized some of the thoughts nicely:</p><ol><li>I want the <code>/app</code> folder to be for user-generated stuff</li> <li>As external dependencies, I feel they are better located externally. Next to node_modules</li> <li>It's hard to run any command in the terminal which goes through all files, (like tree), because you always have to ignore bower_components</li></ol><p>Here are those reasons point by point with some explanations.</p><h2>User Generated Files</h2><blockquote><p>I want the <code>/app</code> folder to be for user-generated stuff</p></blockquote><p>There are people who edit files in the <code>/app</code> folder then wonder why their changes disappear when they do a <code>bower update/install</code>. Not just beginners but also people who should know better. They think "oh its in the <code>/app</code> folder so I can freely edit it without worrying about it". That was the main expectation this change wanted to make true.</p><h2>External Dependencies</h2><blockquote><p>As external dependencies, I feel they are better located externally. Next to node_modules</p></blockquote><p>This was the single biggest reason for this change. <code>/app</code> should be for the <em>user</em> web app/site files, emphasis on <strong>user</strong>. It shouldn't be for external or third-party files. It is the responsibility of the tool authors to make having the files located elsewhere completely painless (and even transparent) to end users. Make the tools deal with the complexity, and give the users an easy workflow.</p><p>There is already a paradigm of this existing in Ruby on Rails. Not saying RoR is a good example to follow, but it is popular enough to say its what the community expects to see. It has also been in the <a href=https://github.com/yeoman/generator-angular>Angular generator</a> for awhile now and there haven't been problems or complaints about it for a long time. Some people try to PR (pull request) moving it into the <code>/app</code> folder because they think it is supposed to be there but when pointed out how it works, they generally seem to be happy with the change.</p><h2>Tooling</h2><blockquote><p>It's hard to run any command in the terminal which goes through all files, (like tree), because you always have to ignore bower_components</p></blockquote><p>It is easier to do a global search in the <code>/app</code> folder when it isn't cluttered with external libraries. Although a counter to that is:</p><blockquote><p>If your command line tools give you data you don't need I'd say you should use them properly - <a href=https://github.com/Munter>Peter Müller</a></p></blockquote><p>Which is a valid point. It is easy enough to set up a filter to exclude those files. But this kind of goes with the point that tools should get out of the way of the user. Bower is another tool and having it put its files in the users files is not getting out of the way, it's adding complexity.</p><h2>Downsides</h2><p>Nothing is perfect (well almost nothing) so some downsides should be mentioned.</p><ol><li>Requires a build/serve system to work (like the one generated by the official Yeoman generators).</li></ol><p>Counter argument: if Sass/Coffee/Autoprefixer/whatever else is needed then a build system is probably required anyway. If not, or if a pure flat site is wanted, then <code>grunt/gulp/whatever build</code> the site and use the outputted files. Yeoman is supposed to be a starting point, not the be-all-end-all build system/workflow.</p><ol><li>Requires more configuration complexity.</li></ol><p>Counter argument: Doesn't Sass require some setup? Doesn't asset-graph require some complexity? Complexity in the initial setup isn't bad because once configured, it usually doesn't change much or often later. The tools could also be made to be smarted about figuring things out so configuration might not even be required (convention over configuration).</p><h2>Conclusion</h2><p>Hopefully some compelling reasons have been provided for the change and persuaded some, if not all, nay-sayers as to the wisdom of the change. If not, well this change isn't the only way to do things. If an individual generator wanted to do things differently thats acceptable, if not encouraged. Trying new things is the way change happens and can sometimes lead to better ways of doing things. Sometimes trying a different way will lead you back to the original way and further reinforce why it was that way to begin with.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-12-01-bower_components-in-project-root.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Why Bower_Components was moved to a Project's Root Directory | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Why Bower_Components was moved to a Project's Root Directory</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>01 Dec 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Why Bower_Components was moved to a Project's Root Directory">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><blockquote><p>this is a post by team member <a href=https://github.com/eddiemonge>Eddie Monge Jr</a></p></blockquote><p><strong>tl;dr</strong> Because I said so. lol j/k. <code>/app</code> should be for your files, not third party libraries.</p><p>There has been a few questions and discussions regarding the decision to move the <strong>bower_components</strong> folder outside of the <code>/app</code> folder.</p><p>Matija (<a href=https://github.com/silvenon>silvenon</a>) summarized some of the thoughts nicely:</p><ol><li>I want the <code>/app</code> folder to be for user-generated stuff</li> <li>As external dependencies, I feel they are better located externally. Next to node_modules</li> <li>It's hard to run any command in the terminal which goes through all files, (like tree), because you always have to ignore bower_components</li></ol><p>Here are those reasons point by point with some explanations.</p><h2>User Generated Files</h2><blockquote><p>I want the <code>/app</code> folder to be for user-generated stuff</p></blockquote><p>There are people who edit files in the <code>/app</code> folder then wonder why their changes disappear when they do a <code>bower update/install</code>. Not just beginners but also people who should know better. They think "oh its in the <code>/app</code> folder so I can freely edit it without worrying about it". That was the main expectation this change wanted to make true.</p><h2>External Dependencies</h2><blockquote><p>As external dependencies, I feel they are better located externally. Next to node_modules</p></blockquote><p>This was the single biggest reason for this change. <code>/app</code> should be for the <em>user</em> web app/site files, emphasis on <strong>user</strong>. It shouldn't be for external or third-party files. It is the responsibility of the tool authors to make having the files located elsewhere completely painless (and even transparent) to end users. Make the tools deal with the complexity, and give the users an easy workflow.</p><p>There is already a paradigm of this existing in Ruby on Rails. Not saying RoR is a good example to follow, but it is popular enough to say its what the community expects to see. It has also been in the <a href=https://github.com/yeoman/generator-angular>Angular generator</a> for awhile now and there haven't been problems or complaints about it for a long time. Some people try to PR (pull request) moving it into the <code>/app</code> folder because they think it is supposed to be there but when pointed out how it works, they generally seem to be happy with the change.</p><h2>Tooling</h2><blockquote><p>It's hard to run any command in the terminal which goes through all files, (like tree), because you always have to ignore bower_components</p></blockquote><p>It is easier to do a global search in the <code>/app</code> folder when it isn't cluttered with external libraries. Although a counter to that is:</p><blockquote><p>If your command line tools give you data you don't need I'd say you should use them properly - <a href=https://github.com/Munter>Peter Müller</a></p></blockquote><p>Which is a valid point. It is easy enough to set up a filter to exclude those files. But this kind of goes with the point that tools should get out of the way of the user. Bower is another tool and having it put its files in the users files is not getting out of the way, it's adding complexity.</p><h2>Downsides</h2><p>Nothing is perfect (well almost nothing) so some downsides should be mentioned.</p><ol><li>Requires a build/serve system to work (like the one generated by the official Yeoman generators).</li></ol><p>Counter argument: if Sass/Coffee/Autoprefixer/whatever else is needed then a build system is probably required anyway. If not, or if a pure flat site is wanted, then <code>grunt/gulp/whatever build</code> the site and use the outputted files. Yeoman is supposed to be a starting point, not the be-all-end-all build system/workflow.</p><ol><li>Requires more configuration complexity.</li></ol><p>Counter argument: Doesn't Sass require some setup? Doesn't asset-graph require some complexity? Complexity in the initial setup isn't bad because once configured, it usually doesn't change much or often later. The tools could also be made to be smarted about figuring things out so configuration might not even be required (convention over configuration).</p><h2>Conclusion</h2><p>Hopefully some compelling reasons have been provided for the change and persuaded some, if not all, nay-sayers as to the wisdom of the change. If not, well this change isn't the only way to do things. If an individual generator wanted to do things differently thats acceptable, if not encouraged. Trying new things is the way change happens and can sometimes lead to better ways of doing things. Sometimes trying a different way will lead you back to the original way and further reinforce why it was that way to begin with.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-12-01-bower_components-in-project-root.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/cleanup.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Generators New Year Cleanup! | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Generators New Year Cleanup!</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>21 Jan 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Generators New Year Cleanup!">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>A lots of changes and new features have been introduced in the Generator System (<code>npm search yeoman-generator</code>) lately. If you're not watching the <a href=https://github.com/yeoman/generator>yeoman/generator</a>, maybe you've been let down on the latest changes. Fear not, we <a href=https://github.com/yeoman/generator/releases>documented every recent release in our changelog</a>!</p><p>Along with the new year start, we've decided to build a todos list of the most important changes our official generators should implement. This will allow them to be clean, but also ready for the new upcoming feature; notably the capacity to compose multiples generators together!</p><p>You may not be an official generator maintainer, but we invite you to follow our lead and make sure you follow these guidelines. So, here it goes!</p><h3>Generators should generate a <code>.yo-rc.json</code> file</h3><p>The <code>.yo-rc.json</code> file allow you to save configuration, but is also the marker used to define a project root folder. This allow user from running <code>yo</code> command from sub directory to work on their whole project.</p><p>It is also how composed generators will know what is the root of a project.</p><p>Simply add this line somewhere in your generator to generate the file at least once:</p><div class=highlight><pre><code class=language-javascript data-lang=javascript><span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>save</span><span class=p>();</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Generators New Year Cleanup! | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Generators New Year Cleanup!</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>21 Jan 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Generators New Year Cleanup!">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>A lots of changes and new features have been introduced in the Generator System (<code>npm search yeoman-generator</code>) lately. If you're not watching the <a href=https://github.com/yeoman/generator>yeoman/generator</a>, maybe you've been let down on the latest changes. Fear not, we <a href=https://github.com/yeoman/generator/releases>documented every recent release in our changelog</a>!</p><p>Along with the new year start, we've decided to build a todos list of the most important changes our official generators should implement. This will allow them to be clean, but also ready for the new upcoming feature; notably the capacity to compose multiples generators together!</p><p>You may not be an official generator maintainer, but we invite you to follow our lead and make sure you follow these guidelines. So, here it goes!</p><h3>Generators should generate a <code>.yo-rc.json</code> file</h3><p>The <code>.yo-rc.json</code> file allow you to save configuration, but is also the marker used to define a project root folder. This allow user from running <code>yo</code> command from sub directory to work on their whole project.</p><p>It is also how composed generators will know what is the root of a project.</p><p>Simply add this line somewhere in your generator to generate the file at least once:</p><div class=highlight><pre><code class=language-javascript data-lang=javascript><span class=k>this</span><span class=p>.</span><span class=nx>config</span><span class=p>.</span><span class=nx>save</span><span class=p>();</span>
</code></pre></div><p>Of course, if you're using the config object to store datas, it'll already be created. <a href=http://yeoman.github.io/generator/Storage.html>Read more on the config Storage in our API reference</a>.</p><h3>Use the new <code>.extend()</code> method instead of <code>util.inherit</code></h3><p>Until recently, you'd extend the Base generator this way:</p><div class=highlight><pre><code class=language-javascript data-lang=javascript><span class=kd>var</span> <span class=nx>BlogGenerator</span> <span class=o>=</span> <span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=kd>function</span> <span class=p>()</span> <span class=p>{</span>
<span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>.</span><span class=nx>apply</span><span class=p>(</span><span class=k>this</span><span class=p>,</span> <span class=nx>arguments</span><span class=p>);</span>
<span class=c1>// ...</span>
View
2  blog/generator-0.17.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Generator 0.17.0 prerelease 1 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Generator 0.17.0 prerelease 1</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>11 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman Generator 0.17.0 prerelease 1">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' allo' here's <a href=https://github.com/SBoudrias>Simon</a> for the Yeoman team.</p><p>After about a month without release of the core system, we're really happy to announce <a href=https://github.com/yeoman/generator/releases/tag/v0.17.0-pre.1>yeoman-generator version 0.17.0-pre</a>. Our release cycle have been delayed because this is a fairly big release!</p><p>First of all, we published <code>0.17.0-pre</code> on NPM as a pre-release. Make sure to install it with <code>npm install yeoman-generator --tag pre</code>.</p><p>Follow through for an overview of the major changes.</p><h2>Composability</h2><p>As stated on our <a href=https://github.com/yeoman/yeoman/issues/1264>2014 roadmap</a>, composability is our next major core feature.</p><p>Composability will allow us to write smaller base generators for common needs, and enable generator authors to build higher-level generators which reuse them. That'll make for more centralized works and improvements. For example, we'll only need a single CSS or Bootstrap generator. Every other generator will be able to concentrate on their domain problems and rely on base generators to handle the rest.</p><p>With 0.17, we bring two major improvements to ease composability issues: a run loop and the <code>composeWith</code> method.</p><h3>Run loop</h3><p>With Yeoman each methods on a generator's prototype is a task and run in a synchronous serie. In the current state, a generator will run all its methods; and then call another generator who'll only run then.</p><p>To allow generators to really run side by side, we needed to allow them to run together instead of one after the other.</p><p>To make this happen, we implemented a run loop that registers task with particular priorities. Higher priorities will run first, and lower priorities would run at the end.</p><p>You can read the full documentation about the run loop inside our <a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/running-context.md#the-run-loop>new documentation</a>. This documentation is still WIP and will be released with 0.17.0 complete.</p><h3><code>composeWith()</code></h3><p>This new method is almost like the previous <code>invoke</code> method. The only difference being it'll add the composed generator to the run loop.</p><p>You can read more about <code>composeWith</code> <a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/composability.md>in our new documentation</a>.</p><h2>Enjoy testing your Generators</h2><p>Unit testing a generator can be daunting. To ease the pain, this release include new tests helpers. These helpers creates a RunContext object who take care of setting and running a generator for you.</p><p><a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/testing.md>Read the documentation</a> to learn more about it!</p><h2>And then?</h2><p>As you can see, this is a pretty major release. The run loop is not exactly a breaking change, but it could cause issues if name "conflict" with a priority.</p><p>We launch this pre-release to allow you to test it and bring as much feedback as we can before carving 0.17 features into stone. Please update your generators and tell us how it's been!</p><p>Until next time!</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-11-generator-0.17.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Generator 0.17.0 prerelease 1 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Generator 0.17.0 prerelease 1</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>11 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman Generator 0.17.0 prerelease 1">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' allo' here's <a href=https://github.com/SBoudrias>Simon</a> for the Yeoman team.</p><p>After about a month without release of the core system, we're really happy to announce <a href=https://github.com/yeoman/generator/releases/tag/v0.17.0-pre.1>yeoman-generator version 0.17.0-pre</a>. Our release cycle have been delayed because this is a fairly big release!</p><p>First of all, we published <code>0.17.0-pre</code> on NPM as a pre-release. Make sure to install it with <code>npm install yeoman-generator --tag pre</code>.</p><p>Follow through for an overview of the major changes.</p><h2>Composability</h2><p>As stated on our <a href=https://github.com/yeoman/yeoman/issues/1264>2014 roadmap</a>, composability is our next major core feature.</p><p>Composability will allow us to write smaller base generators for common needs, and enable generator authors to build higher-level generators which reuse them. That'll make for more centralized works and improvements. For example, we'll only need a single CSS or Bootstrap generator. Every other generator will be able to concentrate on their domain problems and rely on base generators to handle the rest.</p><p>With 0.17, we bring two major improvements to ease composability issues: a run loop and the <code>composeWith</code> method.</p><h3>Run loop</h3><p>With Yeoman each methods on a generator's prototype is a task and run in a synchronous serie. In the current state, a generator will run all its methods; and then call another generator who'll only run then.</p><p>To allow generators to really run side by side, we needed to allow them to run together instead of one after the other.</p><p>To make this happen, we implemented a run loop that registers task with particular priorities. Higher priorities will run first, and lower priorities would run at the end.</p><p>You can read the full documentation about the run loop inside our <a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/running-context.md#the-run-loop>new documentation</a>. This documentation is still WIP and will be released with 0.17.0 complete.</p><h3><code>composeWith()</code></h3><p>This new method is almost like the previous <code>invoke</code> method. The only difference being it'll add the composed generator to the run loop.</p><p>You can read more about <code>composeWith</code> <a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/composability.md>in our new documentation</a>.</p><h2>Enjoy testing your Generators</h2><p>Unit testing a generator can be daunting. To ease the pain, this release include new tests helpers. These helpers creates a RunContext object who take care of setting and running a generator for you.</p><p><a href=https://github.com/yeoman/yeoman.io/blob/master/app/authoring/testing.md>Read the documentation</a> to learn more about it!</p><h2>And then?</h2><p>As you can see, this is a pretty major release. The run loop is not exactly a breaking change, but it could cause issues if name "conflict" with a priority.</p><p>We launch this pre-release to allow you to test it and bring as much feedback as we can before carving 0.17 features into stone. Please update your generators and tell us how it's been!</p><p>Until next time!</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-11-generator-0.17.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/generator-karma-rewrite.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Karma Generator Rewrite 0.8.0 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Karma Generator Rewrite 0.8.0</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>12 May 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Karma Generator Rewrite 0.8.0">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' allo'! Here's <a href=https://github.com/eddiemonge>Eddie</a> from the Yeoman team on the recent changes to the Karma Generator. The changes focused on configuration and testing.</p><h2>Why was a Rewrite Necessary?</h2><p><strong>tl;dr</strong>: a rewrite was not necessary. The <a href=https://github.com/yeoman/generator>Angular generator</a> needed some changes to continue to work.</p><p>The <a href="http://karma-runner.github.io/">Karma Team</a> recently made some changes to the way Karma <a href=https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#breaking-changes>installs its plugins</a>. Before, it would install a lot of default plugins. Now it does not install any plugins. Many people viewed this as a pretty bad change. In fact it is a great change because bloatware is not included anymore. Only the plugins users want are now installed.</p><p>The Angular generator used the Karma generator to write its testing components. The Karma change led to testing not working out of the box. The tests complained about not being able to do some things like launch browsers. A quick fix was to install the missing plugins as part of the Angular generation process. This was not an ideal fix as it made the project more fragile and less composable. A better solution was to make the Karma generator be more customizable.</p><p>Also, this was a good project to test the new 0.17.0 changes to the <a href=https://github.com/yeoman/generator>Generator system</a>.</p><h2>What was the Goal of the Rewrite?</h2><ul><li>Use the new 0.17.0 Yeoman Generator</li> <li>Better testing overall</li> <li>Support customizing almost everything in the Karma config</li> <li>Install user requested Karma plugins (and required ones not explicitly specified)</li> <li>Write Gruntfile.js config block and task</li></ul><h3>0.17.0 Yeoman Generator</h3><p><a href=https://github.com/sboudrias>Simon</a> recently made a lot of changes to the Yeoman Generator system that needed some real world testing. While every new feature wasn't tested, the core features got some exposure. This includes easier testing methods, simpler generator syntax and Gruntfile integration<a href=#coffeescript-gruntfile-support>*</a>.</p><h3>Testing</h3><p>The new Generator system made testing the rewrite a pleasure instead of a dreaded task. It reduced the amount of code needed while making it more readable. That usually does not happen so it was a welcome change.</p><p>The generator tests now cover testing the options and file creation instead of doing both at the same time. This should ensure more accuracy from the tests as the pieces get tested on their own. Every source code change is verifiable; no more worrying about if this or that change will break the whole thing.</p><h3>Customizations</h3><p>There are few parts of the generator that are not customizable now. Here is a small list of the the options that are available:</p><ul><li>Specify what browsers to run the tests in (defaults to PhantomJS)</li> <li>What framework to use (defaults to Jasmine)</li> <li>Which files to test</li> <li>What plugins to use. Missing plugins, like a framework or browser, get added by the generator.</li> <li>Where the config files get written to (including the name and path)</li></ul><p>This is not the complete list. For that, check out the project's <a href=https://github.com/yeoman/generator-karma>README</a>.</p><h3>Gruntfile</h3><p>The generator also tries to add the appropriate Gruntfile configuration blocks and tasks. This is a welcome change from having to do it by hand and hoping to get it right. For Gruntfiles written in CoffeeScript, see the <a href=#coffeescript-gruntfile-support>CoffeeScript note</a>.</p><h6>CoffeeScript Gruntfile Support</h6><p>CoffeeScript does not have a parser to be able to read it programmatically and insert the config (if it does, pull requests are welcome). Because of this, the Generator system cannot write the configs. :(</p><h2>The Dark Side</h2><p>Not everything is peachy though; there are a few downsides to this rewrite. The first, which is also an upside, is that this is no longer Angular-centric. <code>angular-scenario</code> and <code>angular-mock</code> are no longer installed by default. To use them, add them as components in the <code>bower-components</code> option. The other change is that there are not any more default plugins specified other than the two needed for Jasmine and PhantomJS.</p><h2>Vs <code>karma init</code></h2><p>With <code>karma init</code> isn't this generator kind of pointless?</p><p>No. <code>karma init</code> scaffolds out a basic configuration file but does not give the option to customize as much as this does. It also does not update the Gruntfile. This generator provides that, allows it to composed with other generators and installs dependencies.</p><h2>Wrap-Up</h2><p>Its my hope that this rewrite is a sign of things to come for the other Yeoman generators. If nothing else, at least the testing should bring smiles to many faces since it is better tested now.</p><p>As always, please file bug reports at the <a href=https://github.com/yeoman/generator-karma/issues>issues page</a>. Pull requests are always welcome but be sure to start with an issue proposing the change(s).</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-05-12-generator-karma-rewrite.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Karma Generator Rewrite 0.8.0 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Karma Generator Rewrite 0.8.0</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>12 May 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Karma Generator Rewrite 0.8.0">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' allo'! Here's <a href=https://github.com/eddiemonge>Eddie</a> from the Yeoman team on the recent changes to the Karma Generator. The changes focused on configuration and testing.</p><h2>Why was a Rewrite Necessary?</h2><p><strong>tl;dr</strong>: a rewrite was not necessary. The <a href=https://github.com/yeoman/generator>Angular generator</a> needed some changes to continue to work.</p><p>The <a href="http://karma-runner.github.io/">Karma Team</a> recently made some changes to the way Karma <a href=https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#breaking-changes>installs its plugins</a>. Before, it would install a lot of default plugins. Now it does not install any plugins. Many people viewed this as a pretty bad change. In fact it is a great change because bloatware is not included anymore. Only the plugins users want are now installed.</p><p>The Angular generator used the Karma generator to write its testing components. The Karma change led to testing not working out of the box. The tests complained about not being able to do some things like launch browsers. A quick fix was to install the missing plugins as part of the Angular generation process. This was not an ideal fix as it made the project more fragile and less composable. A better solution was to make the Karma generator be more customizable.</p><p>Also, this was a good project to test the new 0.17.0 changes to the <a href=https://github.com/yeoman/generator>Generator system</a>.</p><h2>What was the Goal of the Rewrite?</h2><ul><li>Use the new 0.17.0 Yeoman Generator</li> <li>Better testing overall</li> <li>Support customizing almost everything in the Karma config</li> <li>Install user requested Karma plugins (and required ones not explicitly specified)</li> <li>Write Gruntfile.js config block and task</li></ul><h3>0.17.0 Yeoman Generator</h3><p><a href=https://github.com/sboudrias>Simon</a> recently made a lot of changes to the Yeoman Generator system that needed some real world testing. While every new feature wasn't tested, the core features got some exposure. This includes easier testing methods, simpler generator syntax and Gruntfile integration<a href=#coffeescript-gruntfile-support>*</a>.</p><h3>Testing</h3><p>The new Generator system made testing the rewrite a pleasure instead of a dreaded task. It reduced the amount of code needed while making it more readable. That usually does not happen so it was a welcome change.</p><p>The generator tests now cover testing the options and file creation instead of doing both at the same time. This should ensure more accuracy from the tests as the pieces get tested on their own. Every source code change is verifiable; no more worrying about if this or that change will break the whole thing.</p><h3>Customizations</h3><p>There are few parts of the generator that are not customizable now. Here is a small list of the the options that are available:</p><ul><li>Specify what browsers to run the tests in (defaults to PhantomJS)</li> <li>What framework to use (defaults to Jasmine)</li> <li>Which files to test</li> <li>What plugins to use. Missing plugins, like a framework or browser, get added by the generator.</li> <li>Where the config files get written to (including the name and path)</li></ul><p>This is not the complete list. For that, check out the project's <a href=https://github.com/yeoman/generator-karma>README</a>.</p><h3>Gruntfile</h3><p>The generator also tries to add the appropriate Gruntfile configuration blocks and tasks. This is a welcome change from having to do it by hand and hoping to get it right. For Gruntfiles written in CoffeeScript, see the <a href=#coffeescript-gruntfile-support>CoffeeScript note</a>.</p><h6>CoffeeScript Gruntfile Support</h6><p>CoffeeScript does not have a parser to be able to read it programmatically and insert the config (if it does, pull requests are welcome). Because of this, the Generator system cannot write the configs. :(</p><h2>The Dark Side</h2><p>Not everything is peachy though; there are a few downsides to this rewrite. The first, which is also an upside, is that this is no longer Angular-centric. <code>angular-scenario</code> and <code>angular-mock</code> are no longer installed by default. To use them, add them as components in the <code>bower-components</code> option. The other change is that there are not any more default plugins specified other than the two needed for Jasmine and PhantomJS.</p><h2>Vs <code>karma init</code></h2><p>With <code>karma init</code> isn't this generator kind of pointless?</p><p>No. <code>karma init</code> scaffolds out a basic configuration file but does not give the option to customize as much as this does. It also does not update the Gruntfile. This generator provides that, allows it to composed with other generators and installs dependencies.</p><h2>Wrap-Up</h2><p>Its my hope that this rewrite is a sign of things to come for the other Yeoman generators. If nothing else, at least the testing should bring smiles to many faces since it is better tested now.</p><p>As always, please file bug reports at the <a href=https://github.com/yeoman/generator-karma/issues>issues page</a>. Pull requests are always welcome but be sure to start with an issue proposing the change(s).</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-05-12-generator-karma-rewrite.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/generator-update-feb-0207.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Updates to some of our generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Updates to some of our generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>07 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Updates to some of our generators">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Today we have a few updated generators for your consumption. nom nom nom. As always, we welcome any and all feedback or bug reports on the relevant trackers.</p><p><img src=http://i.imgur.com/hSEppjX.gif></p><h2>Scaffold a Gruntfile</h2><p>We released <code>generator-gruntfile</code> <a href=https://github.com/yeoman/generator-gruntfile/releases/tag/v0.0.9>0.0.9</a> which scaffolds out a Gruntfile and package.json file if you don't already have one. Changes:</p><ul><li>Improved stability</li> <li>Fixed peerDependencies issues</li> <li>Fixed strict mode and JSHint options</li> <li>Updated dependencies</li></ul><p>Usage:</p><div class=highlight><pre><code class=language-text data-lang=text>npm install -g generator-gruntfile
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Updates to some of our generators | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Updates to some of our generators</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>07 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Updates to some of our generators">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Today we have a few updated generators for your consumption. nom nom nom. As always, we welcome any and all feedback or bug reports on the relevant trackers.</p><p><img src=http://i.imgur.com/hSEppjX.gif></p><h2>Scaffold a Gruntfile</h2><p>We released <code>generator-gruntfile</code> <a href=https://github.com/yeoman/generator-gruntfile/releases/tag/v0.0.9>0.0.9</a> which scaffolds out a Gruntfile and package.json file if you don't already have one. Changes:</p><ul><li>Improved stability</li> <li>Fixed peerDependencies issues</li> <li>Fixed strict mode and JSHint options</li> <li>Updated dependencies</li></ul><p>Usage:</p><div class=highlight><pre><code class=language-text data-lang=text>npm install -g generator-gruntfile
yo gruntfile
</code></pre></div><h2>Scaffold a Grunt plugin</h2><p>We released <code>generator-gruntplugin</code> <a href=https://github.com/yeoman/generator-gruntplugin/releases/tag/v0.0.6>0.0.6</a> which scaffolds a grunt plugin module including Nodeunit unit tests. Changes:</p><ul><li>Generate package.json from JS object written out as JSON</li> <li>Bumping dependencies</li></ul><p>Usage:</p><div class=highlight><pre><code class=language-text data-lang=text>npm install -g generator-gruntplugin
yo gruntplugin
View
2  blog/gulp-explore.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Exploring A Generator For Gulp.js | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Exploring A Generator For Gulp.js</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>03 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Exploring A Generator For Gulp.js">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Work has begun on our <a href=https://github.com/yeoman/generator-gulp-webapp>first</a> official Yeoman generator for <a href=http://gulpjs.com>Gulp.js</a>.</p><p><img src=http://i.imgur.com/TXdznhb.png style=width:150px></p><p>Gulp is a <a href=https://github.com/substack/stream-handbook>streaming</a> build system which focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. You simply put in a file and get a file out.</p><p>The Yeoman team don't have any plans on dropping our support for <a href=http://gruntjs.com>Grunt</a> at all. On the contrary, we feel that both Grunt and Gulp can <a href=https://github.com/yeoman/yeoman/issues/1232>happily co-exist</a> and hope to support both communities with some automation tooling as best we can.</p><p>Our Gulp generator based on our Grunt generator for <a href=https://github.com/yeoman/generator-webapp>web apps</a> and you can follow along our progress at <a href=https://github.com/yeoman/generator-gulp-webapp>generator-gulp-webapp</a>. It's still early days, but our <a href=https://github.com/yeoman/generator-gulp-webapp/blob/master/app/templates/gulpfile.js>gulpfile</a> already contains early work for handling HTML, CSS, JS and images. See the samples below for a peek at what we're doing:</p><p>Require Gulp and load our Gulp plugins:</p><div class=highlight><pre><code class=language-text data-lang=text>var gulp = require('gulp');
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Exploring A Generator For Gulp.js | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Exploring A Generator For Gulp.js</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>03 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Exploring A Generator For Gulp.js">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Work has begun on our <a href=https://github.com/yeoman/generator-gulp-webapp>first</a> official Yeoman generator for <a href=http://gulpjs.com>Gulp.js</a>.</p><p><img src=http://i.imgur.com/TXdznhb.png style=width:150px></p><p>Gulp is a <a href=https://github.com/substack/stream-handbook>streaming</a> build system which focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. You simply put in a file and get a file out.</p><p>The Yeoman team don't have any plans on dropping our support for <a href=http://gruntjs.com>Grunt</a> at all. On the contrary, we feel that both Grunt and Gulp can <a href=https://github.com/yeoman/yeoman/issues/1232>happily co-exist</a> and hope to support both communities with some automation tooling as best we can.</p><p>Our Gulp generator based on our Grunt generator for <a href=https://github.com/yeoman/generator-webapp>web apps</a> and you can follow along our progress at <a href=https://github.com/yeoman/generator-gulp-webapp>generator-gulp-webapp</a>. It's still early days, but our <a href=https://github.com/yeoman/generator-gulp-webapp/blob/master/app/templates/gulpfile.js>gulpfile</a> already contains early work for handling HTML, CSS, JS and images. See the samples below for a peek at what we're doing:</p><p>Require Gulp and load our Gulp plugins:</p><div class=highlight><pre><code class=language-text data-lang=text>var gulp = require('gulp');
// Load plugins
var $ = require('gulp-load-plugin')({camelize: true});
View
2  blog/hello-1.0.html
@@ -1,3 +1,3 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Release the Kraken! - Announcing Yeoman 1.0 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Release the Kraken! - Announcing Yeoman 1.0</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>23 Aug 2013</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Release the Kraken! - Announcing Yeoman 1.0">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Your favorite top-hat-and-mustache man has hit the shelves. Head to your nearest npm today and update to Yeoman 1.0!</p><p><img alt="The Yeoman 1.0 Team" src=http://i.imgur.com/ckKa3jC.jpg></p><p>For those who haven't tried Yeoman yet, or have been waiting for 1.0, just tell your terminal:</p><div class=highlight><pre><code class=language-text data-lang=text>npm install -g yo
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Release the Kraken! - Announcing Yeoman 1.0 | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Release the Kraken! - Announcing Yeoman 1.0</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>23 Aug 2013</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Release the Kraken! - Announcing Yeoman 1.0">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Your favorite top-hat-and-mustache man has hit the shelves. Head to your nearest npm today and update to Yeoman 1.0!</p><p><img alt="The Yeoman 1.0 Team" src=http://i.imgur.com/ckKa3jC.jpg></p><p>For those who haven't tried Yeoman yet, or have been waiting for 1.0, just tell your terminal:</p><div class=highlight><pre><code class=language-text data-lang=text>npm install -g yo
</code></pre></div><p>If you've already used any of the 1.0 Release Candidates, you'll feel right at home with this upgrade. You're in for more of the same stable, happy relationships you've had with yo and your favorite generators.</p><div class=highlight><pre><code class=language-text data-lang=text>npm update -g yo
</code></pre></div><p><strong>Note:</strong> Remember, you'll need to install a generator using <code>yo</code> or <code>yo</code> followed by a generator name like <code>yo angular</code> before you see the options below :)</p><h2>What's New In 1.0?</h2><p><img alt="A new `yo` helpful prompt system" src=http://i.imgur.com/TY9OpoC.png></p><p>Some of the interesting developments over the past year have included:</p><ul><li><p>Separating out <code>yo</code> from <code>yeoman</code>, positioning it as a first-class scaffolding solution for the web.</p></li><li><p>A completely rewritten generator system with rich prompts (checkbox, list, etc. thanks to <a href=https://github.com/SBoudrias/Inquirer.js>Inquirer.js</a>, file utilities and more.</p></li><li><p><a href=https://github.com/yeoman/generator/pull/311>Major performance improvements</a> and an <a href=https://github.com/yeoman/generator/issues/305>automation of install steps</a>. Generators can now install all their peer dependencies, meaning you can just run: <code>npm install generator-angular</code>.</p></li><li><p>A new <code>yo</code> <a href=https://github.com/yeoman/yo/pull/36>helpful prompt system</a>. Just running <code>yo</code> without specifying a generator will let you easily update your generators, search for and install new generators, and find help.</p></li></ul><h2>Why Yeoman?</h2><p>If you're new to Yeoman, you'll have <em>a lot</em> of power at your fingertips with just one <code>yo ____</code> command. For help getting started, try out these resources:</p><ul><li><p>The Yeoman <a href=http://yeoman.io/learning/index.html>Getting Started Guide</a> will help understand how to use Yo, Grunt, and Bower together efficiently.</p></li><li><p>Addy's <a href="https://www.youtube.com/watch?v=iUQ1fvdO9GY">Video</a> will walk you through using Yeoman to build an application with AngularJS.</p></li><li><p>Stephen's <a href=http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254>Building Apps With The Yeoman Workflow</a> will show you how to build a Backbone.js application.</p></li></ul><p>Even for experienced developers, Yeoman will still improve your workflow. One of the ways Yeoman helps out of the box is by providing a finely-tuned Grunt configuration. What can take hours to setup-- LiveReload, Sass, Uglify, CoffeeScript-- is done in under a minute. If you wish to customize this even futher, nothing is stopping you!</p><h2>Who's Using Yeoman?</h2><p>These days, Yeoman powers the tooling behind popular open-source projects like <a href=https://github.com/yeoman/generator-angular>Angular</a>, can scaffold out <a href=https://github.com/yeoman/generator-jquery>jQuery plugins</a>, full-stack solutions with <a href=https://github.com/hoodiehq/generator-hoodie>Hood.ie</a> and <a href=https://github.com/petecoop/generator-express>Express</a> and is now even used to create complete <a href=https://github.com/wesleytodd/YeoPress>Wordpress</a> and <a href=https://github.com/robwierzbowski/generator-jekyllrb>Jekyll</a> sites.</p><p>Yeoman can be used for applications of any size-- from <a href="http://gifalicious.net/">a gif maker</a> to <a href="https://www.slidecaptain.com/">a slide deck</a>, <a href="http://rdbk.net/">a news site</a> or even <a href="http://vim.rtorr.com/">a VIM cheat sheet</a>.</p><p><em>Have your own? Leave us a message and show it off!</em></p><h2>What's Next For Yeoman?</h2><p>Yeoman will continue to grow. We have big plans that are all based around making your development workflow easier. Addy paints a lovely picture of the future in his video, <a href="https://www.youtube.com/watch?v=MTYZzs8ud3E">The Future Of Yeoman</a>.</p><div class=video-container><iframe width=640 height=480 src=//www.youtube.com/embed/MTYZzs8ud3E frameborder=0 allowfullscreen></iframe></div><p>To recap, here are some of the things you can look forward to:</p><ul><li><p>Generators extending from other generators.</p></li><li><p>Less scaffolding prompts. Your preferences will be remembered.</p></li><li><p>Less flags. <code>yo</code> can be all you need to remember.</p></li><li><p>Drop-in features. Need CoffeeScript?</p></li></ul><p>Many more improvements for generator authors also await. You can follow and contribute to the discussion about where we're headed at <a href=https://github.com/yeoman/yo.next>yo.next</a> on GitHub.</p><h2>A Busy Year</h2><p>Since this time last year…</p><ul><li>Addy's family moved to London.</li> <li>Brian moved to California to work on Angular full-time.</li> <li>Pascal is going to make his big announcement next week or so.</li> <li>Stephen had a baby lady.</li> <li>Sindre got a <a href=https://si0.twimg.com/profile_images/378800000290468360/624c082d4ee22bd6806e58dfe7239fa1.jpeg>mustache</a>.</li></ul><p>…and yet here we are with the release of a massive project. How could we possibly have done this?</p><p>You guys! This simply wouldn't have been possibly without the help of the enormous open source community. If you had a pull request merged, created an issue, or just made a suggestion, leave a comment! This day is all of ours!</p><p>Here are some of us...</p><p><img alt="Addy, Brian, and Sindre" src=http://i.imgur.com/MoBqhEQ.png></p><p>...but, thank you from all of us.</p><p>Stephen Sawchuk { <a href=https://twitter.com/stephenplusplus>@stephenplusplus</a> }, <br>Addy Osmani { <a href=https://twitter.com/addyosmani>@addyosmani</a> }, <br>Sindre Sorhus { <a href=https://twitter.com/sindresorhus>@sindresorhus</a> }, <br>Brian Ford { <a href=https://twitter.com/briantford>@briantford</a> }, <br>Pascal Hartig { <a href=https://twitter.com/passy>@passy</a> }, <br>Paul Irish { <a href=https://twitter.com/paul_irish>@paul_irish</a> }, <br>Frederick Ros { <a href=https://twitter.com/sl33p3r>@sl33p3r</a> }, <br>Mickael Daniel { <a href=https://twitter.com/mklabs>@mklabs</a> }, <br>Eric Bidelman { <a href=https://twitter.com/ebidel>@ebidel</a> }</p><p>and the rest of the <a href=https://github.com/orgs/yeoman/people>Yeoman</a> team.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2013-08-23-hello-1.0.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></h2><a href=/blog/state-of-the-moustache-2015.html class=blog-post-date>Published: April 27, 2015</a><div class=blog-post-content>Digest of what's new in the Yeoman ecosystem</div><a href=/blog/state-of-the-moustache-2015.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></h2><a href=/blog/bower_components-in-project-root.html class=blog-post-date>Published: December 1, 2014</a><div class=blog-post-content><blockquote><p>this is a post by team member <a href=https://github.com/eddiemonge>Eddie Monge Jr</a></p></blockquote></div><a href=/blog/bower_components-in-project-root.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></h2><a href=/blog/release-0.18.html class=blog-post-date>Published: October 14, 2014</a><div class=blog-post-content><p>Allo' Allo' today we're happy to announce the release of <a href=https://www.npmjs.com/package/yeoman-generator>yeoman-generator@0.18.0</a>!</p></div><a href=/blog/release-0.18.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></h2><a href=/blog/generator-karma-rewrite.html class=blog-post-date>Published: May 12, 2014</a><div class=blog-post-content><p>Allo' allo'! Here's <a href=https://github.com/eddiemonge>Eddie</a> from the Yeoman team on the recent changes to the Karma Generator. The changes focused on configuration and testing.</p></div><a href=/blog/generator-karma-rewrite.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></h2><a href=/blog/generator-0.17.html class=blog-post-date>Published: March 11, 2014</a><div class=blog-post-content>After about a month without release of the core system, we're really happy to announce yeoman-generator version 0.17.0-pre. Our release cycle have been delayed because this is a fairly big release!</div><a href=/blog/generator-0.17.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></h2><a href=/blog/releases-march-7th.html class=blog-post-date>Published: March 7, 2014</a><div class=blog-post-content>Review project latest releases</div><a href=/blog/releases-march-7th.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></h2><a href=/blog/performance-optimization.html class=blog-post-date>Published: March 4, 2014</a><div class=blog-post-content><p><img src=/static/tasks.c4b5a0c9f3.jpg alt=""></p></div><a href=/blog/performance-optimization.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></h2><a href=/blog/whats-new-in-backbone-generator.html class=blog-post-date>Published: February 11, 2014</a><div class=blog-post-content><p>The Backbone generator has had a few major updates recently and we wanted to share these changes with the community. The theme of the changes is to make the generator more flexible. There is also some updates related to testing and styling we wanted to share.</p></div><a href=/blog/whats-new-in-backbone-generator.html>Read more »</a></article><div class=pagination> <span>« Prev</span> <em>1</em> <a href=/blog/page2>2</a> <a href="/blog/page2/">Next »</a></div><div class=blog-posts-extra><a href=/blog/archive.html>View the Archives</a></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/index.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></h2><a href=/blog/state-of-the-moustache-2015.html class=blog-post-date>Published: April 27, 2015</a><div class=blog-post-content>Digest of what's new in the Yeoman ecosystem</div><a href=/blog/state-of-the-moustache-2015.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></h2><a href=/blog/bower_components-in-project-root.html class=blog-post-date>Published: December 1, 2014</a><div class=blog-post-content><blockquote><p>this is a post by team member <a href=https://github.com/eddiemonge>Eddie Monge Jr</a></p></blockquote></div><a href=/blog/bower_components-in-project-root.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></h2><a href=/blog/release-0.18.html class=blog-post-date>Published: October 14, 2014</a><div class=blog-post-content><p>Allo' Allo' today we're happy to announce the release of <a href=https://www.npmjs.com/package/yeoman-generator>yeoman-generator@0.18.0</a>!</p></div><a href=/blog/release-0.18.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></h2><a href=/blog/generator-karma-rewrite.html class=blog-post-date>Published: May 12, 2014</a><div class=blog-post-content><p>Allo' allo'! Here's <a href=https://github.com/eddiemonge>Eddie</a> from the Yeoman team on the recent changes to the Karma Generator. The changes focused on configuration and testing.</p></div><a href=/blog/generator-karma-rewrite.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></h2><a href=/blog/generator-0.17.html class=blog-post-date>Published: March 11, 2014</a><div class=blog-post-content>After about a month without release of the core system, we're really happy to announce yeoman-generator version 0.17.0-pre. Our release cycle have been delayed because this is a fairly big release!</div><a href=/blog/generator-0.17.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></h2><a href=/blog/releases-march-7th.html class=blog-post-date>Published: March 7, 2014</a><div class=blog-post-content>Review project latest releases</div><a href=/blog/releases-march-7th.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></h2><a href=/blog/performance-optimization.html class=blog-post-date>Published: March 4, 2014</a><div class=blog-post-content><p><img src=/static/tasks.c4b5a0c9f3.jpg alt=""></p></div><a href=/blog/performance-optimization.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></h2><a href=/blog/whats-new-in-backbone-generator.html class=blog-post-date>Published: February 11, 2014</a><div class=blog-post-content><p>The Backbone generator has had a few major updates recently and we wanted to share these changes with the community. The theme of the changes is to make the generator more flexible. There is also some updates related to testing and styling we wanted to share.</p></div><a href=/blog/whats-new-in-backbone-generator.html>Read more »</a></article><div class=pagination> <span>« Prev</span> <em>1</em> <a href=/blog/page2>2</a> <a href="/blog/page2/">Next »</a></div><div class=blog-posts-extra><a href=/blog/archive.html>View the Archives</a></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/index.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/page2/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></h2><a href=/blog/generator-update-feb-0207.html class=blog-post-date>Published: February 7, 2014</a><div class=blog-post-content><p>Today we have a few updated generators for your consumption. nom nom nom. As always, we welcome any and all feedback or bug reports on the relevant trackers.</p></div><a href=/blog/generator-update-feb-0207.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></h2><a href=/blog/gulp-explore.html class=blog-post-date>Published: February 3, 2014</a><div class=blog-post-content><p>Work has begun on our <a href=https://github.com/yeoman/generator-gulp-webapp>first</a> official Yeoman generator for <a href=http://gulpjs.com>Gulp.js</a>.</p></div><a href=/blog/gulp-explore.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></h2><a href=/blog/cleanup.html class=blog-post-date>Published: January 21, 2014</a><div class=blog-post-content><p>A lots of changes and new features have been introduced in the Generator System (<code>npm search yeoman-generator</code>) lately. If you're not watching the <a href=https://github.com/yeoman/generator>yeoman/generator</a>, maybe you've been let down on the latest changes. Fear not, we <a href=https://github.com/yeoman/generator/releases>documented every recent release in our changelog</a>!</p></div><a href=/blog/cleanup.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></h2><a href=/blog/hello-1.0.html class=blog-post-date>Published: August 23, 2013</a><div class=blog-post-content><p>Your favorite top-hat-and-mustache man has hit the shelves. Head to your nearest npm today and update to Yeoman 1.0!</p></div><a href=/blog/hello-1.0.html>Read more »</a></article><div class=pagination> <a href=/blog/index.html>« Prev</a> <a href=/blog/index.html>1</a> <em>2</em> <span>Next »</span></div><div class=blog-posts-extra><a href=/blog/archive.html>View the Archives</a></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/page2/index.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman Team Blog | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman Team Blog</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></h2><a href=/blog/generator-update-feb-0207.html class=blog-post-date>Published: February 7, 2014</a><div class=blog-post-content><p>Today we have a few updated generators for your consumption. nom nom nom. As always, we welcome any and all feedback or bug reports on the relevant trackers.</p></div><a href=/blog/generator-update-feb-0207.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></h2><a href=/blog/gulp-explore.html class=blog-post-date>Published: February 3, 2014</a><div class=blog-post-content><p>Work has begun on our <a href=https://github.com/yeoman/generator-gulp-webapp>first</a> official Yeoman generator for <a href=http://gulpjs.com>Gulp.js</a>.</p></div><a href=/blog/gulp-explore.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></h2><a href=/blog/cleanup.html class=blog-post-date>Published: January 21, 2014</a><div class=blog-post-content><p>A lots of changes and new features have been introduced in the Generator System (<code>npm search yeoman-generator</code>) lately. If you're not watching the <a href=https://github.com/yeoman/generator>yeoman/generator</a>, maybe you've been let down on the latest changes. Fear not, we <a href=https://github.com/yeoman/generator/releases>documented every recent release in our changelog</a>!</p></div><a href=/blog/cleanup.html>Read more »</a></article> <article class=blog-post-preview><h2 class=blog-post-title><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></h2><a href=/blog/hello-1.0.html class=blog-post-date>Published: August 23, 2013</a><div class=blog-post-content><p>Your favorite top-hat-and-mustache man has hit the shelves. Head to your nearest npm today and update to Yeoman 1.0!</p></div><a href=/blog/hello-1.0.html>Read more »</a></article><div class=pagination> <a href=/blog/index.html>« Prev</a> <a href=/blog/index.html>1</a> <em>2</em> <span>Next »</span></div><div class=blog-posts-extra><a href=/blog/archive.html>View the Archives</a></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/blog/page2/index.html class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/performance-optimization.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Grunt And Gulp Tasks For Performance Optimization | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Grunt And Gulp Tasks For Performance Optimization</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>04 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Grunt And Gulp Tasks For Performance Optimization">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p><img src=/static/tasks.c4b5a0c9f3.jpg alt=""></p><p>Delays in performance have the potential to impact user <a href=https://twitter.com/igrigorik/status/300226402496704512>engagement</a>, <a href="http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/">experience</a> and <a href=https://speakerdeck.com/lara/designing-for-performance>revenue</a>. Thankfully, Google's 'Make The Web Faster' team recommend a set of best-practice <a href=https://developers.google.com/speed/docs/insights/rules>rules</a> for keeping your pages lean, fast and smooth. These include minifying resources like CSS and JavaScript, optimizing images, inlining and removing unused styles and so on.</p><p>If you have complete control over your server, an excellent <a href="https://developers.google.com/speed/pagespeed/">PageSpeed</a> <a href=https://developers.google.com/speed/pagespeed/module>Module</a> for <a href=https://developers.google.com/speed/pagespeed/module/download>Apache</a> and <a href=https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source>Nginx</a> exists with filters for many of these tasks. If not however, or you feel the module isn’t quite for you, a number of build-tasks exist for tools you’re probably already using to fill in the gaps with more granular control.</p><p>The below represent <a href=http://gruntjs.com>Grunt</a> and <a href=http://gulpjs.com>Gulp</a> tasks the Yeoman team regularly use in our projects. We’ve tried our best to keep this list focused and exclude previous suggestions which no-longer offer as much value, but there’s plenty here to help you keep your pages and their resources as small as possible.</p><div class=note><strong>Note:</strong> Yeoman's <a href=https://github.com/yeoman/generator-webapp>Grunt</a> and <a href=https://github.com/yeoman/generator-gulp-webapp>Gulp</a> webapp generators include tasks for optimizing images and concatenating and minifying HTML/CSS/JS. We feel that this provides a healthy baseline, but this post will cover tasks which go further.</div><h2>Compress &amp; optimize images</h2><p>The average web page is now over <a href="http://httparchive.org/interesting.php?a=All&amp;l=Aug%2015%202013#bytesperpage">1.5MB</a> in size, with images responsible for the bulk of this. We aim to keep our image sizes as lean as possible to reduce the time it takes for a user to wait for that resource to load.</p><p>With the right balance of compression and formatting it's possible to still ship images as a part of your page whilst minimizing load time as much as possible. This is really important for users on mobile with limited data plans or slow connections.</p><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-imagemin>grunt-contrib-imagemin</a></li> <li><a href=https://github.com/JamieMason/grunt-imageoptim>grunt-imageoptim</a> (OSX only)</li></ul><p>Why two tasks? Well, here’s an excellent <a href="http://jamiemason.github.io/ImageOptim-CLI/">breakdown</a> of differences between the two. Choose the one that is most suitable for you.</p><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-imagemin>gulp-imagemin</a></li></ul><div class=note><strong>Note:</strong> Etsy found that just by <a href=http://radar.oreilly.com/2014/01/web-performance-is-user-experience.html>adding</a> 160KB of images to their pages on mobile, their bounce rate increased by 12%. If you can't cut down on the images used in your pages, at least run them through an optimizer.</div><h2>Generate responsive images for the <code>&lt;picture&gt;</code> element</h2><p>If you have a responsive site which is visually flexible on multiple devices, you'll want a strategy to make images flexible too.</p><p>Serving unnecessarily large images to the browser can <a href="http://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/">impact</a> both rendering and load performance, but these aren't the only metrics that can suffer when large images are shipped to the browser.</p><p>This is one reason we need responsive images, and it's great to see <a href="http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html?m=1">srcset</a> - hopefully leading to a full implementation of <code>&lt;picture&gt;</code> - is already in Chrome Beta.</p><p>There are a number of Grunt tasks available that can help generate multi-resolution images as part of your build process.</p><h4>Grunt</h4><ul><li><a href=https://github.com/andismith/grunt-responsive-images>grunt-responsive-images</a> - use this along with <a href="https://github.com/BBC-News/Imager.js/">Imager.js</a>, <code>&lt;picture&gt;</code> or the picturefill <a href=https://github.com/jansepar/picturefill>polyfill</a>.</li> <li><a href=https://www.npmjs.com/package/grunt-clowncar>grunt-clowncar</a></li></ul><p>In addition, if you need to just resize/normalize images that are large in dimension, you can use <a href=https://www.npmjs.com/package/grunt-image-resize>grunt-image-resize</a>.</p><div class=note><strong>Note:</strong> Tim Kaldec's research into responsive images has <a href="http://timkadlec.com/2013/06/why-we-need-responsive-images/">suggested</a> a responsive images strategy could lead to savings of up to 72% on image weight. Whilst it is still early to opt for a spec-compatible, cross-browser approach to responsive images the BBC and Guardian have been using Imager.js for this successfully.</div><h2>Minify SVG images</h2><p>SVG files created with editors usually contain a large quantity of redundant information (metadata, comments, hidden elements and so forth). This content can be safely removed or converted to a more minimal form without imacting the final SVG that's being rendered.</p><h4>Grunt</h4><ul><li><a href=https://github.com/sindresorhus/grunt-svgmin>grunt-svgmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-svgmin>gulp-svgmin</a></li></ul><h2>Generate spritesheets</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-spritesmith>grunt-spritesmith</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-sprite>gulp-sprite</a></li></ul><h2>Convert images to WebP</h2><p>WebP is a recent image format that offers lossless and lossy compression for images on the web. WebP lossless images are up to 26% smaller in size compared to PNGs and WebP lossy images are 25-34% smaller in size compared to JPEGs. That's quite a saving and thankfully there exist tasks for encoding to WebP for both Grunt and Gulp.</p><h4>Grunt</h4><ul><li><a href=https://github.com/somerandomdude/grunt-webp>grunt-webp</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-webp>gulp-webp</a></li></ul><div class=note><strong>Note:</strong> This <a href="http://www.webpagetest.org/video/compare.php?tests=130125_6N_KZA%2C130125_NH_KZ8&amp;thumbSize=200&amp;ival=100&amp;end=full">test</a> from WebPageTest suggests that compared to JPEG, WebP encoded images complete loading much quicker due to their smaller filesizes. The Chrome Web Store <a href="https://www.igvita.com/2013/03/07/faster-smaller-and-more-beautiful-web-with-webp/">found</a> that switching to WebP saw a 30% average saving on bytes, saving them several terabytes of bandwidth a day.</div><h2>Build SVG sprites with support for various browsers</h2><h3>Grunt</h3><ul><li><a href=https://github.com/filamentgroup/grunticon>grunticon</a></li></ul><h3>Gulp</h3><ul><li><a href=https://www.npmjs.com/package/gulp-svgmin>gulp-svgmin</a></li></ul><p>We consider inlining images using Data URIs to now be an anti-pattern given their <a href="http://www.mobify.com/blog/data-uris-are-slow-on-mobile/">poor</a> performance on mobile.</p><h2>Minify CSS</h2><p>Minification eliminates unnecessary space, line breaks, indendation and characters in your files, which are generally unnecessary in production. Compacting down your HTML, CSS and JS can improve on parsing, execution and doanload times. For CSS specifically, we recommend:</p><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-cssmin>grunt-contrib-cssmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-cssmin>gulp-cssmin</a></li></ul><h2>Remove unused CSS</h2><p>In projects using CSS frameworks like Bootstrap, Foundation and so forth you typically don’t use the entire kitchen-sink of styles available. Rather than shipping the full framework to production, use UnCSS to remove unused styles across your pages. Some developers have seen anything up to 85% savings in stylesheet filesize.</p><h4>Grunt</h4><ul><li><a href=https://github.com/addyosmani/grunt-uncss>grunt-uncss</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/ben-eb/gulp-uncss>gulp-uncss</a></li></ul><div class=note><strong>Note:</strong> A question developers regularly ask is whether UnCSS, or the process of removing unused CSS can also work with styles injected into the page dynamically. The answer is 'yes'. UnCSS works in tandem with PhantomJS in order to make this happen. Devs have seen anything between <a href=https://twitter.com/efexen/status/438672726996574209>10</a>-<a href=https://twitter.com/thisbetom/status/432575411138998273>120KB</a> in savings on a typical Bootstrap page and UnCSS also works well with other frameworks.</div><h2>Inline CSS</h2><p>If the external CSS resources for a particular page are small, you can inline those directly in your markup to save on additional requests. Inlining small CSS in this way allows the browser to proceed with rendering the page.</p><h4>Grunt</h4><ul><li><a href=https://github.com/jgallen23/grunt-inline-css>grunt-inline-css</a></li></ul><h4>Gulp</h4><ul><li><a href="https://www.npmjs.com/package/gulp-inline-css/">gulp-inline-css</a></li></ul><h2>Combine media queries</h2><p>This isn't a PageSpeed recommendation, but allows you to combine matching media queries into a single media query definition. We've found it useful for handling CSS generated by preprocessors which may use nested media queries.</p><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-combine-media-queries>grunt-combine-media-queries</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-combine-media-queries>gulp-combine-media-queries</a></li></ul><h2>JavaScript</h2><h3>Minify, compress JS</h3><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-uglify>grunt-contrib-uglify</a></li> <li><a href=https://github.com/gmarty/grunt-closure-compiler>grunt-closure-compiler</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/terinjokes/gulp-uglify>gulp-uglify</a></li> <li><a href=https://github.com/steida/gulp-closure-compiler>gulp-closure-compiler</a></li></ul><h2>RequireJS (optimization via r.js)</h2><h4>Grunt</h4><ul><li><a href=https://github.com/asciidisco/grunt-requirejs>grunt-requirejs</a></li></ul><h4>Gulp</h4><ul><li><a href=http://requirejs.org>RequireJS</a></li></ul><h2>Minify HTML</h2><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-htmlmin>grunt-contrib-htmlmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/jonschlinkert/gulp-htmlmin>gulp-htmlmin</a></li></ul><h2>Simple concatenation</h2><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-concat>grunt-contrib-concat</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-concat>gulp-concat</a></li></ul><h2>General compression for files/folders</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-contrib-compress>grunt-contrib-compress</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-zip>gulp-zip</a></li></ul><h2>Zopfli compression</h2><p>The Zopfli Compression Algorithm is an open-source compression library that generates output typically 3–8% smaller compared to zlib at maximum compression. It is best suited for apps where data is compressed just once and then sent over the network lots of times.</p><h4>Grunt</h4><ul><li><a href=https://github.com/mathiasbynens/grunt-zopfli>grunt-zopfli</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-zopfli>gulp-zopfli</a></li></ul><div class=note><strong>Note:</strong> When Google Fonts switched to using Zopfli fonts were ~6% smaller on average, and in some cases up to 15% smaller. According to <a href=https://plus.google.com/+IlyaGrigorik/posts/1sxencNkbNS>Ilya Grigorik</a>, for the case of Open Sans it was more than 10% smaller, translating to faster rendering and loading times. Zopfli images can however take longer to decode than JPGs so measure the metrics that matter to you when deciding whether to use WebP.</div><h2>Inline Critical path CSS</h2><p>The critical path represents the code and resources needed to render the "above-the-fold" content in the page - i.e what your users will first see when they load up your page. PageSpeed recommends inlining your critical path CSS for improved performance. Whilst tools like <a href="https://code.google.com/p/modpagespeed/">mod_pagespeed</a> are highly efficient at achieving this, it’s more difficult to optimize for the critical path with other tooling.</p><p>You could probably use PhantomJS along with the above the fold scripts from <a href="https://github.com/r3b/speedreport/">speedreport</a> to get an idea of what CSS is above the fold and can then work on optimizing this manually.</p><div class=note><strong>Note:</strong> Paul Kinlan wrote a <a href="http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/">bookmarklet</a> for estimating the above-the-fold CSS for a page which is also worth checking out.</div><h2>Asset pipeline (auto-handle all optimizations)</h2><p>On the ‘tools to keep an eye on’ list is <a href=https://github.com/assetgraph/assetgraph>AssetGraph</a>.</p><p>AssetGraph looks at projects as a set of graph problems where the nodes are considered assets (HTML, CSS, Images, JS) and edges, the relationships between them (image tags, anchor tag, script tags etc).</p><p>As AssetGraph can determine how project assets relate to each other it can perform many of the common performance optimizations developers may want to achieve on their own automatically. This works particularly well on smaller projects and support for larger projects is being worked on.</p><h4>Grunt</h4><ul><li><a href=https://github.com/Munter/grunt-reduce>grunt-reduce</a></li></ul><h4>Gulp</h4><p>Gulp users should just use AssetGraph directly.</p><h2>Benchmarking</h2><p>The following benchmarking tasks are useful to integrate as a part of Continuous Integration. Although the following are currently only available for Grunt, you can use <a href=https://www.npmjs.com/package/gulp-grunt>gulp-grunt</a> to run Grunt tasks from Gulp. We recommend:</p><ul><li><a href=https://www.npmjs.com/package/grunt-pagespeed>grunt-pagespeed</a> - fantastic for automating checking your PageSpeed score as a part of CI.</li> <li><a href=https://github.com/topcoat/topcoat-grunt-telemetry>grunt-topcoat-telemetry</a> - get smoothness, load time and other stats from Telemetry as part of CI. This could help you set up a performance benchmarking dashboard similar to the one used by <a href="http://bench.topcoat.io/">TopCoat</a></li> <li><a href=https://www.npmjs.com/package/grunt-wpt>grunt-wpt</a> - CI for WebPageTest scores</li> <li><a href=https://www.npmjs.com/package/grunt-phantomas>grunt-phantomas</a> - response times for requests, responses, time to first image/CSS/JS, onDOMReady and more.</li></ul><h2>Framework Optimization</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-ngmin>grunt-ngmin</a></li> <li><a href=https://www.npmjs.com/package/grunt-react>grunt-react</a></li> <li><a href=https://www.npmjs.com/package/grunt-vulcanize>grunt-vulcanize</a> - excellent for concatenating and flatening Web Components.</li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/Kagami/gulp-ng-annotate>gulp-ng-annotate</a></li> <li><a href=https://github.com/sindresorhus/gulp-react>gulp-react</a></li> <li><a href=https://github.com/sindresorhus/gulp-vulcanize>gulp-vulcanize</a></li></ul><h4>Misch</h4><ul><li><a href=https://github.com/sindresorhus/gulp-google-cdn>gulp-google-cdn</a></li> <li><a href=https://github.com/sindresorhus/gulp-size>gulp-size</a></li></ul><h2>Conclusions</h2><p>Delays in performance have the potential to impact user engagement, experience and revenue. Take time to experiment with the tasks available for performance optimization, find out what practical gains they can offer to your projects.</p><p>Visitors to your page will be happier as a result of a snappier experience and a faster web is better for all.</p><p>~ Addy Osmani</p><p><em>With thanks to Sindre Sorhus, Pascal Hartig and Stephen Sawchuk for their review</em></p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-04-performance-optimization.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Grunt And Gulp Tasks For Performance Optimization | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Grunt And Gulp Tasks For Performance Optimization</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>04 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Grunt And Gulp Tasks For Performance Optimization">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p><img src=/static/tasks.c4b5a0c9f3.jpg alt=""></p><p>Delays in performance have the potential to impact user <a href=https://twitter.com/igrigorik/status/300226402496704512>engagement</a>, <a href="http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/">experience</a> and <a href=https://speakerdeck.com/lara/designing-for-performance>revenue</a>. Thankfully, Google's 'Make The Web Faster' team recommend a set of best-practice <a href=https://developers.google.com/speed/docs/insights/rules>rules</a> for keeping your pages lean, fast and smooth. These include minifying resources like CSS and JavaScript, optimizing images, inlining and removing unused styles and so on.</p><p>If you have complete control over your server, an excellent <a href="https://developers.google.com/speed/pagespeed/">PageSpeed</a> <a href=https://developers.google.com/speed/pagespeed/module>Module</a> for <a href=https://developers.google.com/speed/pagespeed/module/download>Apache</a> and <a href=https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source>Nginx</a> exists with filters for many of these tasks. If not however, or you feel the module isn’t quite for you, a number of build-tasks exist for tools you’re probably already using to fill in the gaps with more granular control.</p><p>The below represent <a href=http://gruntjs.com>Grunt</a> and <a href=http://gulpjs.com>Gulp</a> tasks the Yeoman team regularly use in our projects. We’ve tried our best to keep this list focused and exclude previous suggestions which no-longer offer as much value, but there’s plenty here to help you keep your pages and their resources as small as possible.</p><div class=note><strong>Note:</strong> Yeoman's <a href=https://github.com/yeoman/generator-webapp>Grunt</a> and <a href=https://github.com/yeoman/generator-gulp-webapp>Gulp</a> webapp generators include tasks for optimizing images and concatenating and minifying HTML/CSS/JS. We feel that this provides a healthy baseline, but this post will cover tasks which go further.</div><h2>Compress &amp; optimize images</h2><p>The average web page is now over <a href="http://httparchive.org/interesting.php?a=All&amp;l=Aug%2015%202013#bytesperpage">1.5MB</a> in size, with images responsible for the bulk of this. We aim to keep our image sizes as lean as possible to reduce the time it takes for a user to wait for that resource to load.</p><p>With the right balance of compression and formatting it's possible to still ship images as a part of your page whilst minimizing load time as much as possible. This is really important for users on mobile with limited data plans or slow connections.</p><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-imagemin>grunt-contrib-imagemin</a></li> <li><a href=https://github.com/JamieMason/grunt-imageoptim>grunt-imageoptim</a> (OSX only)</li></ul><p>Why two tasks? Well, here’s an excellent <a href="http://jamiemason.github.io/ImageOptim-CLI/">breakdown</a> of differences between the two. Choose the one that is most suitable for you.</p><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-imagemin>gulp-imagemin</a></li></ul><div class=note><strong>Note:</strong> Etsy found that just by <a href=http://radar.oreilly.com/2014/01/web-performance-is-user-experience.html>adding</a> 160KB of images to their pages on mobile, their bounce rate increased by 12%. If you can't cut down on the images used in your pages, at least run them through an optimizer.</div><h2>Generate responsive images for the <code>&lt;picture&gt;</code> element</h2><p>If you have a responsive site which is visually flexible on multiple devices, you'll want a strategy to make images flexible too.</p><p>Serving unnecessarily large images to the browser can <a href="http://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/">impact</a> both rendering and load performance, but these aren't the only metrics that can suffer when large images are shipped to the browser.</p><p>This is one reason we need responsive images, and it's great to see <a href="http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html?m=1">srcset</a> - hopefully leading to a full implementation of <code>&lt;picture&gt;</code> - is already in Chrome Beta.</p><p>There are a number of Grunt tasks available that can help generate multi-resolution images as part of your build process.</p><h4>Grunt</h4><ul><li><a href=https://github.com/andismith/grunt-responsive-images>grunt-responsive-images</a> - use this along with <a href="https://github.com/BBC-News/Imager.js/">Imager.js</a>, <code>&lt;picture&gt;</code> or the picturefill <a href=https://github.com/jansepar/picturefill>polyfill</a>.</li> <li><a href=https://www.npmjs.com/package/grunt-clowncar>grunt-clowncar</a></li></ul><p>In addition, if you need to just resize/normalize images that are large in dimension, you can use <a href=https://www.npmjs.com/package/grunt-image-resize>grunt-image-resize</a>.</p><div class=note><strong>Note:</strong> Tim Kaldec's research into responsive images has <a href="http://timkadlec.com/2013/06/why-we-need-responsive-images/">suggested</a> a responsive images strategy could lead to savings of up to 72% on image weight. Whilst it is still early to opt for a spec-compatible, cross-browser approach to responsive images the BBC and Guardian have been using Imager.js for this successfully.</div><h2>Minify SVG images</h2><p>SVG files created with editors usually contain a large quantity of redundant information (metadata, comments, hidden elements and so forth). This content can be safely removed or converted to a more minimal form without imacting the final SVG that's being rendered.</p><h4>Grunt</h4><ul><li><a href=https://github.com/sindresorhus/grunt-svgmin>grunt-svgmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-svgmin>gulp-svgmin</a></li></ul><h2>Generate spritesheets</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-spritesmith>grunt-spritesmith</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-sprite>gulp-sprite</a></li></ul><h2>Convert images to WebP</h2><p>WebP is a recent image format that offers lossless and lossy compression for images on the web. WebP lossless images are up to 26% smaller in size compared to PNGs and WebP lossy images are 25-34% smaller in size compared to JPEGs. That's quite a saving and thankfully there exist tasks for encoding to WebP for both Grunt and Gulp.</p><h4>Grunt</h4><ul><li><a href=https://github.com/somerandomdude/grunt-webp>grunt-webp</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-webp>gulp-webp</a></li></ul><div class=note><strong>Note:</strong> This <a href="http://www.webpagetest.org/video/compare.php?tests=130125_6N_KZA%2C130125_NH_KZ8&amp;thumbSize=200&amp;ival=100&amp;end=full">test</a> from WebPageTest suggests that compared to JPEG, WebP encoded images complete loading much quicker due to their smaller filesizes. The Chrome Web Store <a href="https://www.igvita.com/2013/03/07/faster-smaller-and-more-beautiful-web-with-webp/">found</a> that switching to WebP saw a 30% average saving on bytes, saving them several terabytes of bandwidth a day.</div><h2>Build SVG sprites with support for various browsers</h2><h3>Grunt</h3><ul><li><a href=https://github.com/filamentgroup/grunticon>grunticon</a></li></ul><h3>Gulp</h3><ul><li><a href=https://www.npmjs.com/package/gulp-svgmin>gulp-svgmin</a></li></ul><p>We consider inlining images using Data URIs to now be an anti-pattern given their <a href="http://www.mobify.com/blog/data-uris-are-slow-on-mobile/">poor</a> performance on mobile.</p><h2>Minify CSS</h2><p>Minification eliminates unnecessary space, line breaks, indendation and characters in your files, which are generally unnecessary in production. Compacting down your HTML, CSS and JS can improve on parsing, execution and doanload times. For CSS specifically, we recommend:</p><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-cssmin>grunt-contrib-cssmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-cssmin>gulp-cssmin</a></li></ul><h2>Remove unused CSS</h2><p>In projects using CSS frameworks like Bootstrap, Foundation and so forth you typically don’t use the entire kitchen-sink of styles available. Rather than shipping the full framework to production, use UnCSS to remove unused styles across your pages. Some developers have seen anything up to 85% savings in stylesheet filesize.</p><h4>Grunt</h4><ul><li><a href=https://github.com/addyosmani/grunt-uncss>grunt-uncss</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/ben-eb/gulp-uncss>gulp-uncss</a></li></ul><div class=note><strong>Note:</strong> A question developers regularly ask is whether UnCSS, or the process of removing unused CSS can also work with styles injected into the page dynamically. The answer is 'yes'. UnCSS works in tandem with PhantomJS in order to make this happen. Devs have seen anything between <a href=https://twitter.com/efexen/status/438672726996574209>10</a>-<a href=https://twitter.com/thisbetom/status/432575411138998273>120KB</a> in savings on a typical Bootstrap page and UnCSS also works well with other frameworks.</div><h2>Inline CSS</h2><p>If the external CSS resources for a particular page are small, you can inline those directly in your markup to save on additional requests. Inlining small CSS in this way allows the browser to proceed with rendering the page.</p><h4>Grunt</h4><ul><li><a href=https://github.com/jgallen23/grunt-inline-css>grunt-inline-css</a></li></ul><h4>Gulp</h4><ul><li><a href="https://www.npmjs.com/package/gulp-inline-css/">gulp-inline-css</a></li></ul><h2>Combine media queries</h2><p>This isn't a PageSpeed recommendation, but allows you to combine matching media queries into a single media query definition. We've found it useful for handling CSS generated by preprocessors which may use nested media queries.</p><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-combine-media-queries>grunt-combine-media-queries</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-combine-media-queries>gulp-combine-media-queries</a></li></ul><h2>JavaScript</h2><h3>Minify, compress JS</h3><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-uglify>grunt-contrib-uglify</a></li> <li><a href=https://github.com/gmarty/grunt-closure-compiler>grunt-closure-compiler</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/terinjokes/gulp-uglify>gulp-uglify</a></li> <li><a href=https://github.com/steida/gulp-closure-compiler>gulp-closure-compiler</a></li></ul><h2>RequireJS (optimization via r.js)</h2><h4>Grunt</h4><ul><li><a href=https://github.com/asciidisco/grunt-requirejs>grunt-requirejs</a></li></ul><h4>Gulp</h4><ul><li><a href=http://requirejs.org>RequireJS</a></li></ul><h2>Minify HTML</h2><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-htmlmin>grunt-contrib-htmlmin</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/jonschlinkert/gulp-htmlmin>gulp-htmlmin</a></li></ul><h2>Simple concatenation</h2><h4>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-concat>grunt-contrib-concat</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-concat>gulp-concat</a></li></ul><h2>General compression for files/folders</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-contrib-compress>grunt-contrib-compress</a></li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-zip>gulp-zip</a></li></ul><h2>Zopfli compression</h2><p>The Zopfli Compression Algorithm is an open-source compression library that generates output typically 3–8% smaller compared to zlib at maximum compression. It is best suited for apps where data is compressed just once and then sent over the network lots of times.</p><h4>Grunt</h4><ul><li><a href=https://github.com/mathiasbynens/grunt-zopfli>grunt-zopfli</a></li></ul><h4>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-zopfli>gulp-zopfli</a></li></ul><div class=note><strong>Note:</strong> When Google Fonts switched to using Zopfli fonts were ~6% smaller on average, and in some cases up to 15% smaller. According to <a href=https://plus.google.com/+IlyaGrigorik/posts/1sxencNkbNS>Ilya Grigorik</a>, for the case of Open Sans it was more than 10% smaller, translating to faster rendering and loading times. Zopfli images can however take longer to decode than JPGs so measure the metrics that matter to you when deciding whether to use WebP.</div><h2>Inline Critical path CSS</h2><p>The critical path represents the code and resources needed to render the "above-the-fold" content in the page - i.e what your users will first see when they load up your page. PageSpeed recommends inlining your critical path CSS for improved performance. Whilst tools like <a href="https://code.google.com/p/modpagespeed/">mod_pagespeed</a> are highly efficient at achieving this, it’s more difficult to optimize for the critical path with other tooling.</p><p>You could probably use PhantomJS along with the above the fold scripts from <a href="https://github.com/r3b/speedreport/">speedreport</a> to get an idea of what CSS is above the fold and can then work on optimizing this manually.</p><div class=note><strong>Note:</strong> Paul Kinlan wrote a <a href="http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/">bookmarklet</a> for estimating the above-the-fold CSS for a page which is also worth checking out.</div><h2>Asset pipeline (auto-handle all optimizations)</h2><p>On the ‘tools to keep an eye on’ list is <a href=https://github.com/assetgraph/assetgraph>AssetGraph</a>.</p><p>AssetGraph looks at projects as a set of graph problems where the nodes are considered assets (HTML, CSS, Images, JS) and edges, the relationships between them (image tags, anchor tag, script tags etc).</p><p>As AssetGraph can determine how project assets relate to each other it can perform many of the common performance optimizations developers may want to achieve on their own automatically. This works particularly well on smaller projects and support for larger projects is being worked on.</p><h4>Grunt</h4><ul><li><a href=https://github.com/Munter/grunt-reduce>grunt-reduce</a></li></ul><h4>Gulp</h4><p>Gulp users should just use AssetGraph directly.</p><h2>Benchmarking</h2><p>The following benchmarking tasks are useful to integrate as a part of Continuous Integration. Although the following are currently only available for Grunt, you can use <a href=https://www.npmjs.com/package/gulp-grunt>gulp-grunt</a> to run Grunt tasks from Gulp. We recommend:</p><ul><li><a href=https://www.npmjs.com/package/grunt-pagespeed>grunt-pagespeed</a> - fantastic for automating checking your PageSpeed score as a part of CI.</li> <li><a href=https://github.com/topcoat/topcoat-grunt-telemetry>grunt-topcoat-telemetry</a> - get smoothness, load time and other stats from Telemetry as part of CI. This could help you set up a performance benchmarking dashboard similar to the one used by <a href="http://bench.topcoat.io/">TopCoat</a></li> <li><a href=https://www.npmjs.com/package/grunt-wpt>grunt-wpt</a> - CI for WebPageTest scores</li> <li><a href=https://www.npmjs.com/package/grunt-phantomas>grunt-phantomas</a> - response times for requests, responses, time to first image/CSS/JS, onDOMReady and more.</li></ul><h2>Framework Optimization</h2><h4>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-ngmin>grunt-ngmin</a></li> <li><a href=https://www.npmjs.com/package/grunt-react>grunt-react</a></li> <li><a href=https://www.npmjs.com/package/grunt-vulcanize>grunt-vulcanize</a> - excellent for concatenating and flatening Web Components.</li></ul><h4>Gulp</h4><ul><li><a href=https://github.com/Kagami/gulp-ng-annotate>gulp-ng-annotate</a></li> <li><a href=https://github.com/sindresorhus/gulp-react>gulp-react</a></li> <li><a href=https://github.com/sindresorhus/gulp-vulcanize>gulp-vulcanize</a></li></ul><h4>Misch</h4><ul><li><a href=https://github.com/sindresorhus/gulp-google-cdn>gulp-google-cdn</a></li> <li><a href=https://github.com/sindresorhus/gulp-size>gulp-size</a></li></ul><h2>Conclusions</h2><p>Delays in performance have the potential to impact user engagement, experience and revenue. Take time to experiment with the tasks available for performance optimization, find out what practical gains they can offer to your projects.</p><p>Visitors to your page will be happier as a result of a snappier experience and a faster web is better for all.</p><p>~ Addy Osmani</p><p><em>With thanks to Sindre Sorhus, Pascal Hartig and Stephen Sawchuk for their review</em></p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-04-performance-optimization.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/release-0.18.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman generator version 0.18.0 - Release announcement | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman generator version 0.18.0 - Release announcement</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>14 Oct 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman generator version 0.18.0 - Release announcement">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' Allo' today we're happy to announce the release of <a href=https://www.npmjs.com/package/yeoman-generator>yeoman-generator@0.18.0</a>!</p><p>It's been multiple months since our last minor version bump. This new release bring lots of new features and strive at improving the composability features (first introduced in 0.17).</p><h2>New features!</h2><h3>Storing prompt answers</h3><p>Using the <code>{store: true}</code> property on a prompt will store the user answers in a machine global storage. This mean next time the user run a generator, the default answer will be filled with the value previously stored.</p><p>Careful notice, providing a default value prevent user from returning empty answers.</p><p>Huge thanks to @stefanbuck for the PR https://github.com/yeoman/generator/pull/688</p><h3>New File System</h3><p>Since version 0.17, the Yeoman file system proved to be poorly designed to attack composability issues. That's why with 0.18 we release a completely rethought file system abstraction. You can see the discussion and design process <a href=https://github.com/yeoman/generator/issues/658>taking place in this issue</a>.</p><p>Every legacy methods (<code>this.write</code>, <code>this.copy</code>, <a href=http://yeoman.github.io/generator/actions.html>etc</a>) have been back ported to use this new system. So updating to 0.18.0 should magically improve your generator.</p><h4>New <code>fs</code> methods</h4><p>The core system can be accessed on <code>generator.fs</code>. This object is an instance of <a href=https://github.com/SBoudrias/mem-fs-editor>mem-fs-editor</a> and provide the same methods.</p><p>This system is way simpler than the current legacy method and doesn't do any kind of magic. It won't automatically compile templates (use <code>this.fs.copyTpl()</code> for this), it won't pass <code>this</code> as template context, and it won't automatically assume paths are relative to anything.</p><p>An example/usual usage would be:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=k>this</span><span class=p>.</span><span class=nx>fs</span><span class=p>.</span><span class=nx>copyTpl</span><span class=p>(</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman generator version 0.18.0 - Release announcement | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman generator version 0.18.0 - Release announcement</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>14 Oct 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman generator version 0.18.0 - Release announcement">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>Allo' Allo' today we're happy to announce the release of <a href=https://www.npmjs.com/package/yeoman-generator>yeoman-generator@0.18.0</a>!</p><p>It's been multiple months since our last minor version bump. This new release bring lots of new features and strive at improving the composability features (first introduced in 0.17).</p><h2>New features!</h2><h3>Storing prompt answers</h3><p>Using the <code>{store: true}</code> property on a prompt will store the user answers in a machine global storage. This mean next time the user run a generator, the default answer will be filled with the value previously stored.</p><p>Careful notice, providing a default value prevent user from returning empty answers.</p><p>Huge thanks to @stefanbuck for the PR https://github.com/yeoman/generator/pull/688</p><h3>New File System</h3><p>Since version 0.17, the Yeoman file system proved to be poorly designed to attack composability issues. That's why with 0.18 we release a completely rethought file system abstraction. You can see the discussion and design process <a href=https://github.com/yeoman/generator/issues/658>taking place in this issue</a>.</p><p>Every legacy methods (<code>this.write</code>, <code>this.copy</code>, <a href=http://yeoman.github.io/generator/actions.html>etc</a>) have been back ported to use this new system. So updating to 0.18.0 should magically improve your generator.</p><h4>New <code>fs</code> methods</h4><p>The core system can be accessed on <code>generator.fs</code>. This object is an instance of <a href=https://github.com/SBoudrias/mem-fs-editor>mem-fs-editor</a> and provide the same methods.</p><p>This system is way simpler than the current legacy method and doesn't do any kind of magic. It won't automatically compile templates (use <code>this.fs.copyTpl()</code> for this), it won't pass <code>this</code> as template context, and it won't automatically assume paths are relative to anything.</p><p>An example/usual usage would be:</p><div class=highlight><pre><code class=language-js data-lang=js><span class=k>this</span><span class=p>.</span><span class=nx>fs</span><span class=p>.</span><span class=nx>copyTpl</span><span class=p>(</span>
<span class=k>this</span><span class=p>.</span><span class=nx>templatePath</span><span class=p>(</span><span class=s1>'mocha/base-test.js'</span><span class=p>),</span>
<span class=k>this</span><span class=p>.</span><span class=nx>destinationPath</span><span class=p>(</span><span class=s1>'test/index.js'</span><span class=p>),</span>
<span class=p>{</span> <span class=nx>projectName</span><span class=o>:</span> <span class=s1>'my-awesome-module'</span> <span class=p>}</span>
View
2  blog/releases-march-7th.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman updates for Friday, March 7th. | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman updates for Friday, March 7th.</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>07 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman updates for Friday, March 7th.">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>First off, Happy Friday!</p><p><img src=http://i.imgur.com/WHfJgag.jpg></p><p>Today we released updates to six of our official generators. The complete changelogs can be found in our linked release pages lower down.</p><p>Sindre also released a new version of his <a href=https://github.com/sindresorhus/generator-gulp-plugin-boilerplate>Gulp plugin generator</a>, Hemanth released an <a href=https://github.com/hemanth/generator-atom>Atom Editor package generator</a> and Rob updated <a href=https://github.com/yeoman/grunt-bower-requirejs>grunt-bower-requirejs</a>. Simon is almost ready shipping a huge new feature for <code>yo</code> (<a href=https://github.com/yeoman/generator/commits/master>composability</a>), which we hope to talk about in the next few weeks. Leonardo, Eddie and Rob have been working on a completely new mobile-first design for <code>yeoman.io</code> which they hope to get out in the next month. Kevin has been helping out all over the place.</p><p>Peter has continued his work on <a href=https://github.com/assetgraph/assetgraph>AssetGraph</a> and for the brave of heart there's an experimental Yeoman <a href=https://github.com/Munter/generator-webapp-assetgraph>Webapp generator</a> using it that's available to play with.</p><h2>Release Highlights</h2><ul><li>Our Gulp WebApp generator now supports <a href=https://github.com/yeoman/generator-gulp-webapp/commit/f594d53a2f558208ab011398a96a9de4b1f853b1>wiredep</a> so any dependencies installed with Bower will be automatically wired up to your index for you.</li> <li>Our Backbone generator now provides more useful boilerplate scaffolding (thanks to the community, and Revath for maintaining)</li> <li>Our Grunt WebApp generator gets a big update with numerous stability fixes. We've also switched to using the official Bootstrap Sass package.</li></ul><h2>Releases</h2><ul><li><a href=https://github.com/yeoman/generator-gulp-webapp/releases/tag/v0.0.4>Gulp WebApp generator -- 0.0.4</a></li> <li><a href=https://github.com/yeoman/generator-webapp/releases/tag/v0.4.8>Grunt WebApp generator -- 0.4.8</a></li> <li><a href=https://github.com/yeoman/generator-gruntplugin/releases/tag/v0.0.7>Grunt Plugin generator -- 0.0.7</a></li> <li><a href=https://github.com/yeoman/generator-generator/releases/tag/v0.4.3>Generator generator -- 0.4.3</a></li> <li><a href=https://github.com/yeoman/generator-backbone/releases/tag/v0.2.5>Backbone generator -- 0.2.5</a></li> <li><a href=https://github.com/yeoman/generator-jquery/releases/tag/v0.0.9>jQuery generator -- 0.0.9</a></li></ul><h2>Community</h2><p>On the community-front, we've started work on our next monthly digest but until then enjoy this quick video on <a href=http://tagtree.tv/angular-with-yeoman>building a budgeting webapp</a> with Yo and Angular.</p><p>Until next time, have an awesome weekend!</p><p>~ Addy and the team</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-07-releases-march-7th.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman updates for Friday, March 7th. | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Yeoman updates for Friday, March 7th.</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>07 Mar 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Yeoman updates for Friday, March 7th.">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>First off, Happy Friday!</p><p><img src=http://i.imgur.com/WHfJgag.jpg></p><p>Today we released updates to six of our official generators. The complete changelogs can be found in our linked release pages lower down.</p><p>Sindre also released a new version of his <a href=https://github.com/sindresorhus/generator-gulp-plugin-boilerplate>Gulp plugin generator</a>, Hemanth released an <a href=https://github.com/hemanth/generator-atom>Atom Editor package generator</a> and Rob updated <a href=https://github.com/yeoman/grunt-bower-requirejs>grunt-bower-requirejs</a>. Simon is almost ready shipping a huge new feature for <code>yo</code> (<a href=https://github.com/yeoman/generator/commits/master>composability</a>), which we hope to talk about in the next few weeks. Leonardo, Eddie and Rob have been working on a completely new mobile-first design for <code>yeoman.io</code> which they hope to get out in the next month. Kevin has been helping out all over the place.</p><p>Peter has continued his work on <a href=https://github.com/assetgraph/assetgraph>AssetGraph</a> and for the brave of heart there's an experimental Yeoman <a href=https://github.com/Munter/generator-webapp-assetgraph>Webapp generator</a> using it that's available to play with.</p><h2>Release Highlights</h2><ul><li>Our Gulp WebApp generator now supports <a href=https://github.com/yeoman/generator-gulp-webapp/commit/f594d53a2f558208ab011398a96a9de4b1f853b1>wiredep</a> so any dependencies installed with Bower will be automatically wired up to your index for you.</li> <li>Our Backbone generator now provides more useful boilerplate scaffolding (thanks to the community, and Revath for maintaining)</li> <li>Our Grunt WebApp generator gets a big update with numerous stability fixes. We've also switched to using the official Bootstrap Sass package.</li></ul><h2>Releases</h2><ul><li><a href=https://github.com/yeoman/generator-gulp-webapp/releases/tag/v0.0.4>Gulp WebApp generator -- 0.0.4</a></li> <li><a href=https://github.com/yeoman/generator-webapp/releases/tag/v0.4.8>Grunt WebApp generator -- 0.4.8</a></li> <li><a href=https://github.com/yeoman/generator-gruntplugin/releases/tag/v0.0.7>Grunt Plugin generator -- 0.0.7</a></li> <li><a href=https://github.com/yeoman/generator-generator/releases/tag/v0.4.3>Generator generator -- 0.4.3</a></li> <li><a href=https://github.com/yeoman/generator-backbone/releases/tag/v0.2.5>Backbone generator -- 0.2.5</a></li> <li><a href=https://github.com/yeoman/generator-jquery/releases/tag/v0.0.9>jQuery generator -- 0.0.9</a></li></ul><h2>Community</h2><p>On the community-front, we've started work on our next monthly digest but until then enjoy this quick video on <a href=http://tagtree.tv/angular-with-yeoman>building a budgeting webapp</a> with Yo and Angular.</p><p>Until next time, have an awesome weekend!</p><p>~ Addy and the team</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-03-07-releases-march-7th.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  blog/state-of-the-moustache-2015.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>State of the Moustache | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>State of the Moustache</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>27 Apr 2015</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="State of the Moustache">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><blockquote><p>This is a post by team member <a href=https://github.com/addyosmani>Addy Osmani</a>. <br>In this issue we cover generators for React, ES6, desktop apps and more.</p></blockquote><h2>Intro</h2><p>Allo! Allo! April is a special month for us as it represents 3 years since the project first started and almost 2 years since we decided to rename the binary from <a href=http://github.com/yeoman/yeoman>yeoman</a> to <a href=http://github.com/yeoman/yo>yo</a>. This month also saw Yeoman grow to <a href=http://www.npm-stats.com/%7Epackages/yo>1.3 million</a> total installs and 1635 community <a href="http://yeoman.io/generators/">generators</a>.</p><p>A huge thank you to all our contributors and a special call-out to all the global event organisers that featured Yeoman at their events. <a href=https://twitter.com/YeomanTO>YeomanTO</a>, the <a href=https://twitter.com/Smartass_io/status/580501962527010816>Codepen Meetups</a>, <a href=https://twitter.com/kevinSuttle/status/568811512938127361>IBM Design Camp</a>, <a href=https://twitter.com/solanojuan/status/575807587095990272>OttawaJS</a>, <a href=https://twitter.com/jsmontreal>JSMontreal</a> and others all have our ❤. We couldn't be doing this without you.</p><h2>Highlights</h2><p>Some of our recent highlights have been increased use of Yeoman for scaffolding in the React community, folks trying out ES6 to write their own <a href=http://mammal.io/articles/yeoman-generators-es6>generators</a> and Internet Explorer PM Ade Bateman using yo to scaffold out <a href=http://adrianba.net/archive/2015/03/14/using-yeoman-to-start-writing-technical-specifications-with-respec.aspx>technical specifications</a>. Crazy cool.</p><p><img src=/static/april-es6.d234a06289.png alt=""></p><p>We're excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.</p><h3>Spotlight: React</h3><p><a href=http://reactjs.com>React</a> is a library for creating user-interfaces by Facebook. It creates its own Virtual DOM, where components live. This approach provides the potential for performance gains as React calculates what work needs to be done in the DOM beforehand, updating the DOM tree in a batch accordingly. React avoids costly DOM operations and aims to update in an efficient way.</p><p>Three new generators for quickly getting started with React are out: <a href=https://github.com/newtriks/generator-react-webpack>React and WebPack</a> (recommended, with support for Flux and react-router), <a href=https://github.com/banderson/generator-flux-react>React and Flux</a> (with Browserify), and <a href=https://github.com/payner35/generator-meteor-react>React and Meteor</a>.</p><p><img src=/static/april-react.9450e5850e.png alt=""></p><h3>Spotlight: ES6</h3><p>A number of new generators are also now available for quickly turning your ES6+ code into ES5 code. There are generators available for <a href=https://github.com/thejameskyle/generator-es6-library-boilerplate>Babel</a>, <a href=https://github.com/swirlycheetah/generator-angular2>Angular2</a> and <a href=https://github.com/zewa666/generator-aurelia>Aurelia</a> - a new framework using ES6 and Web Components. A few more ES6 generators can be found over on my <a href=https://github.com/addyosmani/es6-tools#code-generation>es6-tools</a> project.</p><p><img src=/static/april-es62.d2fe90e04c.png alt=""></p><h3>Spotlight: Electron</h3><p><a href="http://electron.atom.io/">Electron</a>, formerly atom-shell, allows you to build cross-platform desktop apps using JS/CSS/HTML. Some of the apps built using it that you may already be using include <a href="https://slack.com/">Slack</a>, <a href=https://atom.io>Atom Editor</a> (of course) and Photoshop/Sketch export tool <a href="http://avocode.com/">Avocode</a>.</p><p>Electron is based on <a href="http://iojs.org/">io.js</a> and Chromium and to help you get started with projects using it, Sindre Sorhus has written a quick Electron <a href=https://github.com/sindresorhus/generator-electron>generator</a> you can try out. He also maintains a list of <a href=https://github.com/sindresorhus/awesome-electron>awesome-electron</a> projects in case you're looking for inspiration.</p><p><img src=/static/april-electron.13b33c7a1e.png alt=""></p><h3>Spotlight: Node</h3><p>While many of us are used to just using <code>npm init</code> for fleshing out our new Node modules, some might prefer a more opinionated alternative. Cue <a href=https://github.com/sindresorhus/node-module-boilerplate>node-module-boilerplate</a> and <a href=https://github.com/sindresorhus/generator-nm>generator-nm</a> by Sindre Sorhus. His starting point includes EditorConfig, Travis and a unit testing starting point out of the box.</p><p>On a related note, if you find yourself needing to automate debugging a Yeoman generator with node-inspector, Hemanth on the team has written up a useful <a href=https://github.com/hemanth/debug-yeoman-generator>script</a> you can also check out.</p><h2>Community</h2><p>Below is a round-up of community authored articles about or mentioning Yeoman which we enjoyed reading this month. Learn how to build a complete WebRTC client, a Slack bot or automate your Wordpress theme tooling workflow. This and more below.</p><h3>Articles</h3><p><a href=http://blog.mgechev.com/2014/12/26/multi-user-video-conference-webrtc-angularjs-yeoman>Multi-User Video Conference with WebRTC and Yeoman</a></p><p><a href=http://mammal.io/articles/yeoman-generators-es6>Writing Yeoman generators in ES6</a></p><p><a href="http://blog.pandorabots.com/putting-your-bot-on-slack/">Putting your bot on #Slack using Yeoman</a></p><p><a href=https://stormpath.com/blog/angular-node-15-minutes>How to Build an App With AngularJS, Node.js and Stormpath in 15 Minutes</a></p><p><a href=https://speakerdeck.com/artificermil/front-end-workflow-automation-for-wordpress-theme-and-plugin-development>Worflow automation for Wordpress Theme Developers with Yeoman</a></p><p><a href=http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015>A Baseline for Front-End [JS] Developers: 2015</a></p><p><a href=http://robdodson.me/yeoman-polymer-and-gulp>Yeoman, Polymer and Gulp</a></p><p><a href=http://yeoman.io/authoring/integrating-yeoman.html>Integrating Yeoman with third-party tools</a></p><p><a href=https://asciinema.org/a/13240>Using <code>yo webapp</code> via Docker</a></p><p><a href="http://itmustbe.com/code/2015/04/04/node-yeoman-bower-gulp-postcss-os-x-yosemite/">Node, Yeoman, Bower, and Gulp with PostCSS on OS X Yosemite</a></p><p><a href="https://youtube.com/watch?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl&amp;v=bqTLJi086Po">Yeoman Tutorial video series</a></p><p><a href=https://scotch.io/tutorials/internationalization-of-angularjs-applications>Internationalization of AngularJS Applications</a></p><p><a href="http://www.drissamri.be/blog/technology/starting-modern-java-project-with-jhipster/">Starting modern Java projects with JHipster and Yeoman</a></p><p><a href="http://khmylov.com/blog/2015/02/build-web-app-and-survive/">How to set up a modern web app and stay sane</a></p><p><a href="http://angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/?utm_medium=email&amp;utm_source=rubyweekly">How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application (Gulp Version)</a></p><p><a href="https://airpair.com/typescript/posts/typescript-development-with-gulp-and-sublime-text?utm_medium=email&amp;utm_source=javascriptweekly">Practical TypeScript Development with Gulp and Sublime Text 3</a></p><h3>Some generators we liked</h3><p><a href="http://axiacore.github.io/generator-django-axiacore/">A new generator for Django projects</a></p><p><a href=https://github.com/ragingwind/mobile-chrome-apps-starter-kit>Mobile Chrome Apps Starter Kit with Polymer</a></p><p><a href=https://github.com/Swiip/generator-gulp-angular/releases>Angular + Gulp generator has a new release</a></p><p><a href=https://github.com/bezoerb/generator-grunt-symfony>Symphony2 with JSPM and critical-CSS optimisation</a></p><p><a href=https://github.com/sixertoy/generator-brackextension>Generator for Adobe Brackets extensions</a></p><h2>Announcements from core</h2><h3>Exploring npm3</h3><p><a href=https://github.com/npm/npm/wiki/Roadmap>npm@3</a> plans to introduce a number of improvements, including a caching rewrite and no longer installing <code>peerDependencies</code> by default. This particular change will have an impact on <code>yo</code> as it means you end up needing to resolve peerDep conflicts yourself manually. We may end up having our sub-generators in <code>dependencies</code> instead, but look forward to taking full advantage of npm@3 where it'll benefit our users.</p><h3>Deprecations</h3><p>As Simon mentioned in our <a href=https://github.com/yeoman/generator/releases/tag/v0.19.0>0.19 release notes</a> for the generator system, we're currently looking to deprecate a set of methods as we work on cleaning up our API towards an eventual 1.0 release. As always, please test your generators against the latest version of <code>yeoman-generator</code> to ensure everything continues to run smoothly.</p><h3>Composition FTW</h3><p>It's been pleasant to see an <a href=https://twitter.com/tomwayson/status/588564830665084930>increasing</a> number of developers using our <a href=http://yeoman.io/authoring/composability.html>composability</a> feature for their generators. This enables building upon common ground so that a generator can be run inside another generator, rather than having to replicate functionality. E.g call out to a generator for scaffolding Karma tests rather than doing this inside your AngularApp one.</p><h2>Tipping our hat</h2><p>That's about it for this round-up. We would like to remind folks that we're always checking out <a href=http://twitter.com/yeoman>@yeoman</a> and enjoy hearing suggestions for anything we can be doing better, news, new generators you've written or even just <a href=https://twitter.com/kittytail38/status/573522972528373761>doodles</a> of your favorite man in a hat. If you have ideas for the next post, you can also drop 'em in this <a href=https://github.com/yeoman/yeoman/issues/1411>thread</a>.</p><p>Until next time, <code>yo awesomeness</code>.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2015-04-27-state-of-the-moustache-2015.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>State of the Moustache | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>State of the Moustache</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>27 Apr 2015</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="State of the Moustache">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><blockquote><p>This is a post by team member <a href=https://github.com/addyosmani>Addy Osmani</a>. <br>In this issue we cover generators for React, ES6, desktop apps and more.</p></blockquote><h2>Intro</h2><p>Allo! Allo! April is a special month for us as it represents 3 years since the project first started and almost 2 years since we decided to rename the binary from <a href=http://github.com/yeoman/yeoman>yeoman</a> to <a href=http://github.com/yeoman/yo>yo</a>. This month also saw Yeoman grow to <a href=http://www.npm-stats.com/%7Epackages/yo>1.3 million</a> total installs and 1635 community <a href="http://yeoman.io/generators/">generators</a>.</p><p>A huge thank you to all our contributors and a special call-out to all the global event organisers that featured Yeoman at their events. <a href=https://twitter.com/YeomanTO>YeomanTO</a>, the <a href=https://twitter.com/Smartass_io/status/580501962527010816>Codepen Meetups</a>, <a href=https://twitter.com/kevinSuttle/status/568811512938127361>IBM Design Camp</a>, <a href=https://twitter.com/solanojuan/status/575807587095990272>OttawaJS</a>, <a href=https://twitter.com/jsmontreal>JSMontreal</a> and others all have our ❤. We couldn't be doing this without you.</p><h2>Highlights</h2><p>Some of our recent highlights have been increased use of Yeoman for scaffolding in the React community, folks trying out ES6 to write their own <a href=http://mammal.io/articles/yeoman-generators-es6>generators</a> and Internet Explorer PM Ade Bateman using yo to scaffold out <a href=http://adrianba.net/archive/2015/03/14/using-yeoman-to-start-writing-technical-specifications-with-respec.aspx>technical specifications</a>. Crazy cool.</p><p><img src=/static/april-es6.039a46de2c.png alt=""></p><p>We're excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.</p><h3>Spotlight: React</h3><p><a href=http://reactjs.com>React</a> is a library for creating user-interfaces by Facebook. It creates its own Virtual DOM, where components live. This approach provides the potential for performance gains as React calculates what work needs to be done in the DOM beforehand, updating the DOM tree in a batch accordingly. React avoids costly DOM operations and aims to update in an efficient way.</p><p>Three new generators for quickly getting started with React are out: <a href=https://github.com/newtriks/generator-react-webpack>React and WebPack</a> (recommended, with support for Flux and react-router), <a href=https://github.com/banderson/generator-flux-react>React and Flux</a> (with Browserify), and <a href=https://github.com/payner35/generator-meteor-react>React and Meteor</a>.</p><p><img src=/static/april-react.dc00da3b7a.png alt=""></p><h3>Spotlight: ES6</h3><p>A number of new generators are also now available for quickly turning your ES6+ code into ES5 code. There are generators available for <a href=https://github.com/thejameskyle/generator-es6-library-boilerplate>Babel</a>, <a href=https://github.com/swirlycheetah/generator-angular2>Angular2</a> and <a href=https://github.com/zewa666/generator-aurelia>Aurelia</a> - a new framework using ES6 and Web Components. A few more ES6 generators can be found over on my <a href=https://github.com/addyosmani/es6-tools#code-generation>es6-tools</a> project.</p><p><img src=/static/april-es62.57350bf664.png alt=""></p><h3>Spotlight: Electron</h3><p><a href="http://electron.atom.io/">Electron</a>, formerly atom-shell, allows you to build cross-platform desktop apps using JS/CSS/HTML. Some of the apps built using it that you may already be using include <a href="https://slack.com/">Slack</a>, <a href=https://atom.io>Atom Editor</a> (of course) and Photoshop/Sketch export tool <a href="http://avocode.com/">Avocode</a>.</p><p>Electron is based on <a href="http://iojs.org/">io.js</a> and Chromium and to help you get started with projects using it, Sindre Sorhus has written a quick Electron <a href=https://github.com/sindresorhus/generator-electron>generator</a> you can try out. He also maintains a list of <a href=https://github.com/sindresorhus/awesome-electron>awesome-electron</a> projects in case you're looking for inspiration.</p><p><img src=/static/april-electron.cb7fdc7e74.png alt=""></p><h3>Spotlight: Node</h3><p>While many of us are used to just using <code>npm init</code> for fleshing out our new Node modules, some might prefer a more opinionated alternative. Cue <a href=https://github.com/sindresorhus/node-module-boilerplate>node-module-boilerplate</a> and <a href=https://github.com/sindresorhus/generator-nm>generator-nm</a> by Sindre Sorhus. His starting point includes EditorConfig, Travis and a unit testing starting point out of the box.</p><p>On a related note, if you find yourself needing to automate debugging a Yeoman generator with node-inspector, Hemanth on the team has written up a useful <a href=https://github.com/hemanth/debug-yeoman-generator>script</a> you can also check out.</p><h2>Community</h2><p>Below is a round-up of community authored articles about or mentioning Yeoman which we enjoyed reading this month. Learn how to build a complete WebRTC client, a Slack bot or automate your Wordpress theme tooling workflow. This and more below.</p><h3>Articles</h3><p><a href=http://blog.mgechev.com/2014/12/26/multi-user-video-conference-webrtc-angularjs-yeoman>Multi-User Video Conference with WebRTC and Yeoman</a></p><p><a href=http://mammal.io/articles/yeoman-generators-es6>Writing Yeoman generators in ES6</a></p><p><a href="http://blog.pandorabots.com/putting-your-bot-on-slack/">Putting your bot on #Slack using Yeoman</a></p><p><a href=https://stormpath.com/blog/angular-node-15-minutes>How to Build an App With AngularJS, Node.js and Stormpath in 15 Minutes</a></p><p><a href=https://speakerdeck.com/artificermil/front-end-workflow-automation-for-wordpress-theme-and-plugin-development>Worflow automation for Wordpress Theme Developers with Yeoman</a></p><p><a href=http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015>A Baseline for Front-End [JS] Developers: 2015</a></p><p><a href=http://robdodson.me/yeoman-polymer-and-gulp>Yeoman, Polymer and Gulp</a></p><p><a href=http://yeoman.io/authoring/integrating-yeoman.html>Integrating Yeoman with third-party tools</a></p><p><a href=https://asciinema.org/a/13240>Using <code>yo webapp</code> via Docker</a></p><p><a href="http://itmustbe.com/code/2015/04/04/node-yeoman-bower-gulp-postcss-os-x-yosemite/">Node, Yeoman, Bower, and Gulp with PostCSS on OS X Yosemite</a></p><p><a href="https://youtube.com/watch?list=PLpP9FLMkNf54AFwvRgYb8KMbKCaqqopsl&amp;v=bqTLJi086Po">Yeoman Tutorial video series</a></p><p><a href=https://scotch.io/tutorials/internationalization-of-angularjs-applications>Internationalization of AngularJS Applications</a></p><p><a href="http://www.drissamri.be/blog/technology/starting-modern-java-project-with-jhipster/">Starting modern Java projects with JHipster and Yeoman</a></p><p><a href="http://khmylov.com/blog/2015/02/build-web-app-and-survive/">How to set up a modern web app and stay sane</a></p><p><a href="http://angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/?utm_medium=email&amp;utm_source=rubyweekly">How to Wire Up Ruby on Rails and AngularJS as a Single-Page Application (Gulp Version)</a></p><p><a href="https://airpair.com/typescript/posts/typescript-development-with-gulp-and-sublime-text?utm_medium=email&amp;utm_source=javascriptweekly">Practical TypeScript Development with Gulp and Sublime Text 3</a></p><h3>Some generators we liked</h3><p><a href="http://axiacore.github.io/generator-django-axiacore/">A new generator for Django projects</a></p><p><a href=https://github.com/ragingwind/mobile-chrome-apps-starter-kit>Mobile Chrome Apps Starter Kit with Polymer</a></p><p><a href=https://github.com/Swiip/generator-gulp-angular/releases>Angular + Gulp generator has a new release</a></p><p><a href=https://github.com/bezoerb/generator-grunt-symfony>Symphony2 with JSPM and critical-CSS optimisation</a></p><p><a href=https://github.com/sixertoy/generator-brackextension>Generator for Adobe Brackets extensions</a></p><h2>Announcements from core</h2><h3>Exploring npm3</h3><p><a href=https://github.com/npm/npm/wiki/Roadmap>npm@3</a> plans to introduce a number of improvements, including a caching rewrite and no longer installing <code>peerDependencies</code> by default. This particular change will have an impact on <code>yo</code> as it means you end up needing to resolve peerDep conflicts yourself manually. We may end up having our sub-generators in <code>dependencies</code> instead, but look forward to taking full advantage of npm@3 where it'll benefit our users.</p><h3>Deprecations</h3><p>As Simon mentioned in our <a href=https://github.com/yeoman/generator/releases/tag/v0.19.0>0.19 release notes</a> for the generator system, we're currently looking to deprecate a set of methods as we work on cleaning up our API towards an eventual 1.0 release. As always, please test your generators against the latest version of <code>yeoman-generator</code> to ensure everything continues to run smoothly.</p><h3>Composition FTW</h3><p>It's been pleasant to see an <a href=https://twitter.com/tomwayson/status/588564830665084930>increasing</a> number of developers using our <a href=http://yeoman.io/authoring/composability.html>composability</a> feature for their generators. This enables building upon common ground so that a generator can be run inside another generator, rather than having to replicate functionality. E.g call out to a generator for scaffolding Karma tests rather than doing this inside your AngularApp one.</p><h2>Tipping our hat</h2><p>That's about it for this round-up. We would like to remind folks that we're always checking out <a href=http://twitter.com/yeoman>@yeoman</a> and enjoy hearing suggestions for anything we can be doing better, news, new generators you've written or even just <a href=https://twitter.com/kittytail38/status/573522972528373761>doodles</a> of your favorite man in a hat. If you have ideas for the next post, you can also drop 'em in this <a href=https://github.com/yeoman/yeoman/issues/1411>thread</a>.</p><p>Until next time, <code>yo awesomeness</code>.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2015-04-27-state-of-the-moustache-2015.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
4 blog/whats-new-in-backbone-generator.html
@@ -1,3 +1,3 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>What's new in the Backbone generator | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>What's new in the Backbone generator</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>11 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="What's new in the Backbone generator">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>The Backbone generator has had a few major updates recently and we wanted to share these changes with the community. The theme of the changes is to make the generator more flexible. There is also some updates related to testing and styling we wanted to share.</p><h2>Custom app path</h2><p>Before, the scaffold generated the project's application files into the app folder. Now you can customize it using the <code>--appPath</code> option.</p><div class=highlight><pre><code class=language-sh data-lang=sh>yo backbone --appPath<span class=o>=</span>public
-</code></pre></div><p>This will create a folder named <code>public</code> instead of <code>app</code>. It will then put the scaffolded code into that folder. When you use a sub-generator, like <code>backbone:model</code>, the scaffold will use the <code>public</code> directory.</p><p><img src=/static/backbone-app-path.f010295c9e.png alt="app-path option"></p><h2>Generating <a href="http://mochajs.org/">Mocha</a> tests</h2><p>We have written a new generator named <a href=https://github.com/revathskumar/generator-backbone-mocha>generator-backbone-mocha</a>. This will generate Mocha tests for your Backbone app. When you create new model with <code>yo backbone:model todo</code>, this will create <code>todo.spec.js</code> in your <code>test</code> folder.</p><p><img src=/static/yo-backbone-mocha.5ddce6a569.png alt="Backbone mocha"></p><p>You can choose BDD/TDD when generating the new Backbone app with the <code>--ui</code> option.</p><div class=highlight><pre><code class=language-sh data-lang=sh>yo backbone --ui<span class=o>=</span>tdd
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>What's new in the Backbone generator | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body class=blog><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/" class=active>Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>What's new in the Backbone generator</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/blog/archive.html>View the Archives</a></li> <li class=year_divider><a class=year_title>2015</a><ul> <li><a href=/blog/state-of-the-moustache-2015.html>State of the Moustache</a></li></ul></li><li class=year_divider><a class=year_title>2014</a><ul> <li><a href=/blog/bower_components-in-project-root.html>Why Bower_Components was moved to a Project's Root Directory</a></li> <li><a href=/blog/release-0.18.html>Yeoman generator version 0.18.0 - Release announcement</a></li> <li><a href=/blog/generator-karma-rewrite.html>Karma Generator Rewrite 0.8.0</a></li> <li><a href=/blog/generator-0.17.html>Yeoman Generator 0.17.0 prerelease 1</a></li> <li><a href=/blog/releases-march-7th.html>Yeoman updates for Friday, March 7th.</a></li> <li><a href=/blog/performance-optimization.html>Grunt And Gulp Tasks For Performance Optimization</a></li> <li><a href=/blog/whats-new-in-backbone-generator.html>What's new in the Backbone generator</a></li> <li><a href=/blog/generator-update-feb-0207.html>Updates to some of our generators</a></li> <li><a href=/blog/gulp-explore.html>Exploring A Generator For Gulp.js</a></li> <li><a href=/blog/cleanup.html>Generators New Year Cleanup!</a></li></ul></li><li class=year_divider><a class=year_title>2013</a><ul> <li><a href=/blog/hello-1.0.html>Release the Kraken! - Announcing Yeoman 1.0</a></li></ul></li></ul></nav><article class=main><section class=content-chunk><section><div class="blog-post-meta clearfix"><p class=date>11 Feb 2014</p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="What's new in the Backbone generator">Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></div><div class=post><p>The Backbone generator has had a few major updates recently and we wanted to share these changes with the community. The theme of the changes is to make the generator more flexible. There is also some updates related to testing and styling we wanted to share.</p><h2>Custom app path</h2><p>Before, the scaffold generated the project's application files into the app folder. Now you can customize it using the <code>--appPath</code> option.</p><div class=highlight><pre><code class=language-sh data-lang=sh>yo backbone --appPath<span class=o>=</span>public
+</code></pre></div><p>This will create a folder named <code>public</code> instead of <code>app</code>. It will then put the scaffolded code into that folder. When you use a sub-generator, like <code>backbone:model</code>, the scaffold will use the <code>public</code> directory.</p><p><img src=/static/backbone-app-path.9ac67dad82.png alt="app-path option"></p><h2>Generating <a href="http://mochajs.org/">Mocha</a> tests</h2><p>We have written a new generator named <a href=https://github.com/revathskumar/generator-backbone-mocha>generator-backbone-mocha</a>. This will generate Mocha tests for your Backbone app. When you create new model with <code>yo backbone:model todo</code>, this will create <code>todo.spec.js</code> in your <code>test</code> folder.</p><p><img src=/static/yo-backbone-mocha.079a5e6f79.png alt="Backbone mocha"></p><p>You can choose BDD/TDD when generating the new Backbone app with the <code>--ui</code> option.</p><div class=highlight><pre><code class=language-sh data-lang=sh>yo backbone --ui<span class=o>=</span>tdd
</code></pre></div><p>By default the generator is setup to use BDD with Mocha.</p><h2>Added CoffeeScript support for RequireJS</h2><p>Another great addition to the Backbone generator (version 2.0), is CoffeeScript support for RequireJS. A lot of people have requested this and we are happy to announce support for it. Thanks to <a href=https://github.com/stephanebachelier>@stephanebachelier</a> for the effort in getting this in.</p><h2>Bootstrap 3.0</h2><p>The last change we want to announce relates to Bootstrap. We have upgraded to Bootstrap 3.0! Now by default, Yeoman will install Bootstrap 3.0 when you generate a new application. Don't fear though, projects can include Bootstrap 2.0 still. After project generation, edit the bower.json file and change the version of (sass-)bootstrap required.</p><h2>Other minor updates</h2><ul><li>Dropped support for node 0.8</li> <li><code>grunt server</code> task is now deprecated. <code>grunt serve</code> has replaced it. For more information, see <a href=https://github.com/yeoman/yeoman/issues/1183>this issue explaining it</a></li> <li>Improved scaffolds</li></ul><p>We hope you like the new additions and enhancements we have made on the Backbone generator. We are looking for your feedback on keeping this project awesome.</p></div><hr><a href="/blog/">« View More Posts</a></section></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/_posts/blog/2014-02-11-whats-new-in-backbone-generator.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  codelab.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Let's Scaffold a Web App with Yeoman | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html class=active>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Let's Scaffold a Web App with Yeoman</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html class=active>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><p class=authors>By Addy Osmani, James Cryer &amp; Pearl Chen</p><p>Allo! Allo! In this 1-hour codelab, you build a fully functional web application from scratch with the help of <a href=http://yeoman.io>Yeoman</a>. You'll also use features from <a href=http://gruntjs.com>Grunt</a> and <a href="http://bower.io/">Bower</a>. The sample app will be written in <a href="https://angularjs.org/">AngularJS</a>.</p><p class=mast-intro><img src=/static/yeoman-008.1c21c31597.png></p><p>Haven't met Yeoman yet? <a href=codelab/meet-yeoman.html>Start here with an introduction »</a></p><p>Don't know any AngularJS? That's okay, we'll walk you through it. However we do assume that you have some previous JavaScript experience.</p><h2>Build this sample app with Yeoman</h2><p>The sample web app you'll build today will be a Todo app. You will be able to add todos, delete todos, organize your todos using drag and drop, and save todos offline.</p><p><img src=/static/image_2.8911ff242b.png alt="Finished todo app"></p><h2 id=toc>What's in this codelab?</h2><p>We will build the above Todo app from scratch. Each step builds on the previous so go through each step one by one.</p><ul><li><strong>Step 1:</strong> <a href=codelab/setup.html>Set up your dev environment »</a></li> <li><strong>Step 2:</strong> <a href=codelab/install-generators.html>Install a Yeoman generator »</a></li> <li><strong>Step 3:</strong> <a href=codelab/scaffold-app.html>Use a generator to scaffold out your app »</a></li> <li><strong>Step 4:</strong> <a href=codelab/review-generated-files.html>Review the Yeoman-generated app directory structure »</a></li> <li><strong>Step 5:</strong> <a href=codelab/preview-inbrowser.html>Preview your app in the browser »</a></li> <li><strong>Step 6:</strong> <a href=codelab/write-app.html>Start writing our AngularJS application »</a></li> <li><strong>Step 7:</strong> <a href=codelab/install-packages.html>Use Bower to install packages »</a></li> <li><strong>Step 8:</strong> <a href=codelab/write-unit-tests.html>Test with Karma and Jasmine »</a></li> <li><strong>Step 9:</strong> <a href=codelab/local-storage.html>Make todos persistent with local storage »</a></li> <li><strong>Step 10:</strong> <a href=codelab/prepare-production.html>Get ready for production »</a></li> <li>Like what you see? <a href=codelab/keep-going.html>Yeoman can do more »</a></li></ul><p>It will take approximately 60 minutes to complete this codelab. By the end, you'll have a snazzy Todo app and your computer will be set up to build even more awesome web apps in the future.</p><div class="note important" id=source-files><h2>View the final source code</h2><p>The finished app can be found at <a href=https://github.com/addyosmani/yeoman-examples/tree/master/angular-localStorage-todos>bit.ly/yoangular</a>. In case you get stuck, these are the specific files that we will be editing in the <strong>angular-localStorage-todos &gt; app</strong> folder:</p><ul><li><a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/index.html>index.html</a></li> <li>views &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/views/main.html>main.html</a></li> <li>scripts &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/scripts/app.js>app.js</a></li> <li>scripts &gt; controllers &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/scripts/controllers/main.js>main.js</a></li></ul><p>Note: To run the app after downloading the source code, run <code>npm install</code> followed by <code>bower install</code> in the <strong>angular-localStorage-todos</strong> directory. Then you can run <code>grunt serve</code>.</p></div><p><hr></p><div class="note tip"><p>Enjoy coding in the cloud? Don't have administrative access to your computer? <a href=https://github.com/codio/tutorial_yo_angular>Try this codelab in the Codio Web IDE</a>.</p><p>To keep your Yeoman environment set up on your local computer for future development, continue with Step 1.</p></div><p class=codelab-paging>Let's get started with <a href=codelab/setup.html>Step 1 »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Let's Scaffold a Web App with Yeoman | Yeoman</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html class=active>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container>Let's Scaffold a Web App with Yeoman</div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html class=active>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><p class=authors>By Addy Osmani, James Cryer &amp; Pearl Chen</p><p>Allo! Allo! In this 1-hour codelab, you build a fully functional web application from scratch with the help of <a href=http://yeoman.io>Yeoman</a>. You'll also use features from <a href=http://gruntjs.com>Grunt</a> and <a href="http://bower.io/">Bower</a>. The sample app will be written in <a href="https://angularjs.org/">AngularJS</a>.</p><p class=mast-intro><img src=/static/yeoman-008.1c21c31597.png></p><p>Haven't met Yeoman yet? <a href=codelab/meet-yeoman.html>Start here with an introduction »</a></p><p>Don't know any AngularJS? That's okay, we'll walk you through it. However we do assume that you have some previous JavaScript experience.</p><h2>Build this sample app with Yeoman</h2><p>The sample web app you'll build today will be a Todo app. You will be able to add todos, delete todos, organize your todos using drag and drop, and save todos offline.</p><p><img src=/static/image_2.958d17371c.png alt="Finished todo app"></p><h2 id=toc>What's in this codelab?</h2><p>We will build the above Todo app from scratch. Each step builds on the previous so go through each step one by one.</p><ul><li><strong>Step 1:</strong> <a href=codelab/setup.html>Set up your dev environment »</a></li> <li><strong>Step 2:</strong> <a href=codelab/install-generators.html>Install a Yeoman generator »</a></li> <li><strong>Step 3:</strong> <a href=codelab/scaffold-app.html>Use a generator to scaffold out your app »</a></li> <li><strong>Step 4:</strong> <a href=codelab/review-generated-files.html>Review the Yeoman-generated app directory structure »</a></li> <li><strong>Step 5:</strong> <a href=codelab/preview-inbrowser.html>Preview your app in the browser »</a></li> <li><strong>Step 6:</strong> <a href=codelab/write-app.html>Start writing our AngularJS application »</a></li> <li><strong>Step 7:</strong> <a href=codelab/install-packages.html>Use Bower to install packages »</a></li> <li><strong>Step 8:</strong> <a href=codelab/write-unit-tests.html>Test with Karma and Jasmine »</a></li> <li><strong>Step 9:</strong> <a href=codelab/local-storage.html>Make todos persistent with local storage »</a></li> <li><strong>Step 10:</strong> <a href=codelab/prepare-production.html>Get ready for production »</a></li> <li>Like what you see? <a href=codelab/keep-going.html>Yeoman can do more »</a></li></ul><p>It will take approximately 60 minutes to complete this codelab. By the end, you'll have a snazzy Todo app and your computer will be set up to build even more awesome web apps in the future.</p><div class="note important" id=source-files><h2>View the final source code</h2><p>The finished app can be found at <a href=https://github.com/addyosmani/yeoman-examples/tree/master/angular-localStorage-todos>bit.ly/yoangular</a>. In case you get stuck, these are the specific files that we will be editing in the <strong>angular-localStorage-todos &gt; app</strong> folder:</p><ul><li><a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/index.html>index.html</a></li> <li>views &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/views/main.html>main.html</a></li> <li>scripts &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/scripts/app.js>app.js</a></li> <li>scripts &gt; controllers &gt; <a href=https://github.com/addyosmani/yeoman-examples/blob/master/angular-localStorage-todos/app/scripts/controllers/main.js>main.js</a></li></ul><p>Note: To run the app after downloading the source code, run <code>npm install</code> followed by <code>bower install</code> in the <strong>angular-localStorage-todos</strong> directory. Then you can run <code>grunt serve</code>.</p></div><p><hr></p><div class="note tip"><p>Enjoy coding in the cloud? Don't have administrative access to your computer? <a href=https://github.com/codio/tutorial_yo_angular>Try this codelab in the Codio Web IDE</a>.</p><p>To keep your Yeoman environment set up on your local computer for future development, continue with Step 1.</p></div><p class=codelab-paging>Let's get started with <a href=codelab/setup.html>Step 1 »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
4 codelab/install-generators.html
@@ -1,2 +1,2 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html class=active>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 2: Install a Yeoman generator</h1><p>In a traditional web development workflow, you would need to spend a lot of time setting up boilerplate code for your webapp, downloading dependencies, and manually creating your web folder structure. Yeoman generators to the rescue! Let's install a generator for AngularJS projects.</p><h2>Install an AngularJS generator</h2><p>You can install Yeoman generators using the <a href="https://www.npmjs.com/">npm</a> command and there are over <a href="http://yeoman.io/generators/">1000+ generators</a> now available, many of which have been written by the open-source community.</p><p>Install <a href=https://www.npmjs.com/package/generator-angular>generator-angular</a> using this command:</p><div class=highlight><pre><code class=language-sh data-lang=sh>npm install --global generator-angular@0.11.1
-</code></pre></div><p>This will start to install the Node packages required for the generator. Using <code>@0.12.1</code> will request a specific version of the generator.</p><div class="note important"><h2>Errors?</h2><p>If you see permission or access errors, such as <code>EPERM</code> or <code>EACCESS</code>, do not use <code>sudo</code> as a work-around. You can consult <a href=https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md>this guide</a> for a more robust solution.</p></div><p><hr></p><div class="note tip"><p>Along with using <code>npm install</code> directly, you can search for generators via the Yeoman interactive menu. Run <code>yo</code> and select <b>Install a generator</b> to search for published generators.</p><img src=/static/image_4.afb0c562ea.png></div><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=scaffold-app.html>Go to the next step »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/install-generators.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html class=active>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 2: Install a Yeoman generator</h1><p>In a traditional web development workflow, you would need to spend a lot of time setting up boilerplate code for your webapp, downloading dependencies, and manually creating your web folder structure. Yeoman generators to the rescue! Let's install a generator for AngularJS projects.</p><h2>Install an AngularJS generator</h2><p>You can install Yeoman generators using the <a href="https://www.npmjs.com/">npm</a> command and there are over <a href="http://yeoman.io/generators/">1000+ generators</a> now available, many of which have been written by the open-source community.</p><p>Install <a href=https://www.npmjs.com/package/generator-angular>generator-angular</a> using this command:</p><div class=highlight><pre><code class=language-sh data-lang=sh>npm install --global generator-angular@0.11.1
+</code></pre></div><p>This will start to install the Node packages required for the generator. Using <code>@0.12.1</code> will request a specific version of the generator.</p><div class="note important"><h2>Errors?</h2><p>If you see permission or access errors, such as <code>EPERM</code> or <code>EACCESS</code>, do not use <code>sudo</code> as a work-around. You can consult <a href=https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md>this guide</a> for a more robust solution.</p></div><p><hr></p><div class="note tip"><p>Along with using <code>npm install</code> directly, you can search for generators via the Yeoman interactive menu. Run <code>yo</code> and select <b>Install a generator</b> to search for published generators.</p><img src=/static/image_4.4628144919.png></div><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=scaffold-app.html>Go to the next step »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/install-generators.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
8 codelab/install-packages.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html class=active>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 7: Use Bower to install packages</h1><div class=mast-holder><img src=/static/yeoman-005.caffeeaba0.png></div><p>Let’s add some order to our list and make it sortable. For this we’re going to use Bower to install the <a href=https://github.com/angular-ui/ui-sortable>AngularUI Sortable module</a>, a directive component for AngularJS. If you are continuing from the last step you will have to stop your site in the terminal by pressing ctrl-C or open a new terminal window and navigate to your project directory.</p><h2>List current packages</h2><p>We can check what packages we have already installed by running this command from within the myTodo project directory created earlier:</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower list
-</code></pre></div><p><img src=/static/image_22.c68a0ccfe4.png alt=""></p><p>You should see that you already have packages for angular-cookies, angular-resources, angular-route, plus others. Remember how we selected these as part of <a href=scaffold-app.html#configure>Step 3</a> when we configured our generator?</p><h2>Search for packages</h2><p>To verify that there are AngularUI packages available, use Bower to search for "angular-ui-sortable":</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower search angular-ui-sortable
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html class=active>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 7: Use Bower to install packages</h1><div class=mast-holder><img src=/static/yeoman-005.caffeeaba0.png></div><p>Let’s add some order to our list and make it sortable. For this we’re going to use Bower to install the <a href=https://github.com/angular-ui/ui-sortable>AngularUI Sortable module</a>, a directive component for AngularJS. If you are continuing from the last step you will have to stop your site in the terminal by pressing ctrl-C or open a new terminal window and navigate to your project directory.</p><h2>List current packages</h2><p>We can check what packages we have already installed by running this command from within the myTodo project directory created earlier:</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower list
+</code></pre></div><p><img src=/static/image_22.b317ac566b.png alt=""></p><p>You should see that you already have packages for angular-cookies, angular-resources, angular-route, plus others. Remember how we selected these as part of <a href=scaffold-app.html#configure>Step 3</a> when we configured our generator?</p><h2>Search for packages</h2><p>To verify that there are AngularUI packages available, use Bower to search for "angular-ui-sortable":</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower search angular-ui-sortable
</code></pre></div><p>There is one result for "angular-ui-sortable" so let’s install it along with <a href="http://jqueryui.com/">jQuery UI</a> as we already have jQuery installed. To save you from searching, the package name for jQuery UI is "jquery-ui".</p><h2 id=install>Install packages</h2><p>Use Bower to install both "angular-ui-sortable" and "jquery-ui":</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower install --save angular-ui-sortable
</code></pre></div><div class=highlight><pre><code class=language-sh data-lang=sh>bower install --save jquery-ui
</code></pre></div><p>The <code>--save</code> option updates the <strong><em>bower.json</em></strong> file with dependencies on angular-ui-sortable and jquery-ui. This will save you from having to manually add it to <em>bower.json</em> yourself.</p><div class="note tip"><h2>Install multiple Bower packages at once</h2><p>If you have multiple packages that you want to install, you can do it in one line:</p><pre>
<code class=language-sh>bower install --save angular-ui-sortable jquery-ui</code>
-</pre></div><p><img src=/static/image_24.9d6c5f6c49.png alt=""></p><h2>Confirm installation</h2><p>Take a look at your <strong><em>bower_components</em></strong> directory just to check that everything is there as expected. You should see folders for "jquery-ui" and "angular-ui-sortable" alongside the previously installed angular packages:</p><p><img src=/static/image_25.3bca5ab50c.png alt=""></p><h2 id=implement>Make todos sortable</h2><p>References to these newly installed dependencies must be added to our <em>index.html</em> file. You <em>could</em> manually add the AngularUI Sortable module and jQueryUI script files yourself but Yeoman will automate this for you!</p><p>Quit your current command line process by using the <span class=keyboard>Ctrl</span>+<span class=keyboard>C</span> keyboard command.</p><p>Then run <code>grunt serve</code> again.</p><p>You'll see that the <code>script</code> section at the bottom of <em>index.html</em> has automatically updated to include <code>jquery-ui/ui/jquery-ui.js</code> and <code>angular-ui-sortable/sortable.js</code>:</p><div class=highlight><pre><code class=language-html data-lang=html><span class=c>&lt;!-- build:js scripts/vendor.js --&gt;</span>
+</pre></div><p><img src=/static/image_24.030cb43fbe.png alt=""></p><h2>Confirm installation</h2><p>Take a look at your <strong><em>bower_components</em></strong> directory just to check that everything is there as expected. You should see folders for "jquery-ui" and "angular-ui-sortable" alongside the previously installed angular packages:</p><p><img src=/static/image_25.10df994af9.png alt=""></p><h2 id=implement>Make todos sortable</h2><p>References to these newly installed dependencies must be added to our <em>index.html</em> file. You <em>could</em> manually add the AngularUI Sortable module and jQueryUI script files yourself but Yeoman will automate this for you!</p><p>Quit your current command line process by using the <span class=keyboard>Ctrl</span>+<span class=keyboard>C</span> keyboard command.</p><p>Then run <code>grunt serve</code> again.</p><p>You'll see that the <code>script</code> section at the bottom of <em>index.html</em> has automatically updated to include <code>jquery-ui/ui/jquery-ui.js</code> and <code>angular-ui-sortable/sortable.js</code>:</p><div class=highlight><pre><code class=language-html data-lang=html><span class=c>&lt;!-- build:js scripts/vendor.js --&gt;</span>
<span class=c>&lt;!-- bower:js --&gt;</span>
<span class=nt>&lt;script </span><span class=na>src=</span><span class=s>"bower_components/jquery/dist/jquery.js"</span><span class=nt>&gt;&lt;/script&gt;</span>
<span class=nt>&lt;script </span><span class=na>src=</span><span class=s>"bower_components/angular/angular.js"</span><span class=nt>&gt;&lt;/script&gt;</span>
@@ -51,4 +51,4 @@
<span class=nt>&lt;/span&gt;</span>
<span class=nt>&lt;/p&gt;</span>
<span class=nt>&lt;/div&gt;</span>
-</code></pre></div><p>Run "grunt serve" again and back in the browser, we can now re-order our list:</p><div class=side-by-side><img src=/static/image_26.303722d0c8.png> <img src=/static/image_27.0d23095f13.png></div><p>Pat yourself on the back! You just used Yeoman to build a snazzy todo app in no time. Can you imagine doing front-end web development in any other way now?</p><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=write-unit-tests.html>Go to the next step »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/install-packages.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+</code></pre></div><p>Run "grunt serve" again and back in the browser, we can now re-order our list:</p><div class=side-by-side><img src=/static/image_26.616cf3ea29.png> <img src=/static/image_27.9e860f6cbb.png></div><p>Pat yourself on the back! You just used Yeoman to build a snazzy todo app in no time. Can you imagine doing front-end web development in any other way now?</p><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=write-unit-tests.html>Go to the next step »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/install-packages.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  codelab/keep-going.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html class=active>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Congratulations!</h1><div class=mast-holder><img src=/static/yeoman-003.6c5165efba.png></div><h2>Like what you see? Yeoman can do more.</h2><p>Yeoman supports scaffolding out a lot more for Angular and other frameworks than what we’ve shown today.</p><p>For example, the Angular generator also supports creating new views, directives and controllers for you. A new controller can be scaffolded by running <code>yo angular:route routeName</code>, which will create your controller files but also update the route in <em>app.js</em> for you. We also try scaffolding out unit tests where possible.</p><p>To find out all the Yeoman commands for the Angular generator take a look at the <a href=https://github.com/yeoman/generator-angular#readme>generator readme</a>.</p><h2>Where to go next</h2><ul><li><p><strong>AngularJS</strong> (<a href="https://angularjs.org/">angularjs.org</a>) helped us write this Todo app quickly and with elegance. To dig deeper into the sweet spots of AngularJS, take a look at the detailed <a href=https://docs.angularjs.org/guide/overview>documentation</a>.</p></li><li><p><strong>Grunt</strong> (<a href=http://gruntjs.com>gruntjs.com</a>) has tasks for almost anything you might like to do with your app, whether it’s <a href=https://github.com/gruntjs/grunt-contrib-compass>compiling CoffeeScript</a> or <a href=https://github.com/gruntjs/grunt-contrib-connect>hooking up your app to custom middleware</a> like PHP or Express. Your Yeoman app already has a <em>Gruntfile.js</em> already set up for you so read up on how to configure more Grunt tasks <a href=http://gruntjs.com/configuring-tasks>here</a>.</p></li><li><p><strong>Bower</strong> (<a href="http://bower.io/">bower.io</a>) has a growing collection of easily installable packages for adding capabilities to your app. View all the packages available through Bower's registry <a href="http://sindresorhus.com/bower-components/">here</a>.</p></li><li><p><strong>Yeoman</strong> is always evolving. Be sure to check out <a href=http://yeoman.io>yeoman.io</a> for more information and follow <a href=https://twitter.com/yeoman>@yeoman</a> and <a href=https://plus.google.com/101063139999404044459/posts>+Yeoman</a> to stay up to date.</p></li></ul><p>That’s it from your man-in-a-hat for now. Thanks!</p><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/keep-going.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html class=active>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Congratulations!</h1><div class=mast-holder><img src=/static/yeoman-003.6c5165efba.png></div><h2>Like what you see? Yeoman can do more.</h2><p>Yeoman supports scaffolding out a lot more for Angular and other frameworks than what we’ve shown today.</p><p>For example, the Angular generator also supports creating new views, directives and controllers for you. A new controller can be scaffolded by running <code>yo angular:route routeName</code>, which will create your controller files but also update the route in <em>app.js</em> for you. We also try scaffolding out unit tests where possible.</p><p>To find out all the Yeoman commands for the Angular generator take a look at the <a href=https://github.com/yeoman/generator-angular#readme>generator readme</a>.</p><h2>Where to go next</h2><ul><li><p><strong>AngularJS</strong> (<a href="https://angularjs.org/">angularjs.org</a>) helped us write this Todo app quickly and with elegance. To dig deeper into the sweet spots of AngularJS, take a look at the detailed <a href=https://docs.angularjs.org/guide/overview>documentation</a>.</p></li><li><p><strong>Grunt</strong> (<a href=http://gruntjs.com>gruntjs.com</a>) has tasks for almost anything you might like to do with your app, whether it’s <a href=https://github.com/gruntjs/grunt-contrib-compass>compiling CoffeeScript</a> or <a href=https://github.com/gruntjs/grunt-contrib-connect>hooking up your app to custom middleware</a> like PHP or Express. Your Yeoman app already has a <em>Gruntfile.js</em> already set up for you so read up on how to configure more Grunt tasks <a href=http://gruntjs.com/configuring-tasks>here</a>.</p></li><li><p><strong>Bower</strong> (<a href="http://bower.io/">bower.io</a>) has a growing collection of easily installable packages for adding capabilities to your app. View all the packages available through Bower's registry <a href="http://sindresorhus.com/bower-components/">here</a>.</p></li><li><p><strong>Yeoman</strong> is always evolving. Be sure to check out <a href=http://yeoman.io>yeoman.io</a> for more information and follow <a href=https://twitter.com/yeoman>@yeoman</a> and <a href=https://plus.google.com/101063139999404044459/posts>+Yeoman</a> to stay up to date.</p></li></ul><p>That’s it from your man-in-a-hat for now. Thanks!</p><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/keep-going.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
6 codelab/local-storage.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html class=active>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 10: Make Todos persistent with local storage</h1><p>Let’s revisit the issue of items not persisting when the browser refreshes.</p><div class="note tip">If you had no issues with Step 7 and you're short on time, you can skip to the <a href=keep-going.html>codelab wrapup</a>.</div><h2>Install Bower package</h2><p>To easily achieve this we can use another Angular module called "<a href=http://gregpike.net/demos/angular-local-storage/demo/demo.html>angular-local-storage</a>" that will allow us to quickly implement <a href=http://diveintohtml5.info/storage.html>local storage</a>. Again, Bower comes to the rescue.</p><p>Run the following command:</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower install --save angular-local-storage
-</code></pre></div><p><img src=/static/image_29.4eb3b98c5d.png alt=""></p><h2>Add local storage</h2><p>Similar to how we added jQueryUI and AngularUI Sortable in <a href=install-packages.html#implement>Step 7</a> to make todos sortable, we need to add a reference to the <em>angular-local-storage.js</em> file in <em>index.html</em>.</p><p>Since we're using <em>bower.json</em> to keep track of our modules, <span class=keyboard>Ctrl</span>+<span class=keyboard>C</span> to exit the current command line process, then re-run <code>grunt serve</code> to get some automated magic in your <em>index.html</em>.</p><p>At the bottom of <em>index.html</em>, this should have been added:</p><div class=highlight><pre><code class=language-html data-lang=html><span class=nt>&lt;script </span><span class=na>src=</span><span class=s>"bower_components/angular-local-storage/dist/angular-local-storage.js"</span><span class=nt>&gt;&lt;/script&gt;</span>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html class=active>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Step 10: Make Todos persistent with local storage</h1><p>Let’s revisit the issue of items not persisting when the browser refreshes.</p><div class="note tip">If you had no issues with Step 7 and you're short on time, you can skip to the <a href=keep-going.html>codelab wrapup</a>.</div><h2>Install Bower package</h2><p>To easily achieve this we can use another Angular module called "<a href=http://gregpike.net/demos/angular-local-storage/demo/demo.html>angular-local-storage</a>" that will allow us to quickly implement <a href=http://diveintohtml5.info/storage.html>local storage</a>. Again, Bower comes to the rescue.</p><p>Run the following command:</p><div class=highlight><pre><code class=language-sh data-lang=sh>bower install --save angular-local-storage
+</code></pre></div><p><img src=/static/image_29.5c5212e4a2.png alt=""></p><h2>Add local storage</h2><p>Similar to how we added jQueryUI and AngularUI Sortable in <a href=install-packages.html#implement>Step 7</a> to make todos sortable, we need to add a reference to the <em>angular-local-storage.js</em> file in <em>index.html</em>.</p><p>Since we're using <em>bower.json</em> to keep track of our modules, <span class=keyboard>Ctrl</span>+<span class=keyboard>C</span> to exit the current command line process, then re-run <code>grunt serve</code> to get some automated magic in your <em>index.html</em>.</p><p>At the bottom of <em>index.html</em>, this should have been added:</p><div class=highlight><pre><code class=language-html data-lang=html><span class=nt>&lt;script </span><span class=na>src=</span><span class=s>"bower_components/angular-local-storage/dist/angular-local-storage.js"</span><span class=nt>&gt;&lt;/script&gt;</span>
</code></pre></div><p>Your <em>index.html</em> scripts block should now look like this:</p><div class=highlight><pre><code class=language-html data-lang=html><span class=c>&lt;!-- build:js scripts/vendor.js --&gt;</span>
<span class=c>&lt;!-- bower:js --&gt;</span>
<span class=nt>&lt;script </span><span class=na>src=</span><span class=s>"bower_components/jquery/dist/jquery.js"</span><span class=nt>&gt;&lt;/script&gt;</span>
@@ -97,4 +97,4 @@
<span class=p>};</span>
<span class=p>});</span>
-</code></pre></div><p>If you look at your app in the browser now you’ll see that there are no items in the todo list. The app is initialising the todos array from local storage and we haven’t given it any todo items yet.</p><p><img src=/static/image_30.300f81b3f8.png alt=""></p><p>Go ahead and add a few items to the list:</p><p><img src=/static/image_31.f3ab163fb2.png alt=""></p><p>Now when we refresh our browser the items persist. Hooray!</p><p>We can confirm whether our data is being persisted to local storage by checking the <strong>Resources</strong> panel in Chrome DevTools and selecting <strong>Local Storage</strong> from the lefthand side:</p><p><img src=/static/image_32.8e95e67a99.png alt=""></p><div class="note tip"><h2>Write unit tests</h2><p>For an extra challenge, revisit unit testing in <a href=write-unit-tests.html>Step 8</a> and consider how you might update your tests now that the code is using local storage.</p><p>Tip: It's not a straight forward answer and involves knowing about mock services. Check out <a href=http://andyshora.com/unit-testing-best-practices-angularjs.html>Unit Testing Best Practices in AngularJS</a>, specifically the <em>Mocking Services and Modules in AngularJS</em> section.</p><h2>Fix the ng-repeat issue</h2><p>For an extra challenge, the ng-repeat function does not accept multiple items with the same value. Try fixing this by looking into "track by" and see if you can get it to work. There is also a bubbling issue that needs to be solved when you use this type of ng-repeat.</p></div><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=keep-going.html>You're done! Keep going »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/local-storage.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+</code></pre></div><p>If you look at your app in the browser now you’ll see that there are no items in the todo list. The app is initialising the todos array from local storage and we haven’t given it any todo items yet.</p><p><img src=/static/image_30.b5a20eda87.png alt=""></p><p>Go ahead and add a few items to the list:</p><p><img src=/static/image_31.3584ba5d10.png alt=""></p><p>Now when we refresh our browser the items persist. Hooray!</p><p>We can confirm whether our data is being persisted to local storage by checking the <strong>Resources</strong> panel in Chrome DevTools and selecting <strong>Local Storage</strong> from the lefthand side:</p><p><img src=/static/image_32.8e95e67a99.png alt=""></p><div class="note tip"><h2>Write unit tests</h2><p>For an extra challenge, revisit unit testing in <a href=write-unit-tests.html>Step 8</a> and consider how you might update your tests now that the code is using local storage.</p><p>Tip: It's not a straight forward answer and involves knowing about mock services. Check out <a href=http://andyshora.com/unit-testing-best-practices-angularjs.html>Unit Testing Best Practices in AngularJS</a>, specifically the <em>Mocking Services and Modules in AngularJS</em> section.</p><h2>Fix the ng-repeat issue</h2><p>For an extra challenge, the ng-repeat function does not accept multiple items with the same value. Try fixing this by looking into "track by" and see if you can get it to work. There is also a bubbling issue that needs to be solved when you use this type of ng-repeat.</p></div><p class=codelab-paging><a href=../codelab.html#toc>« Return to overview</a> or <a href=keep-going.html>You're done! Keep going »</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/local-storage.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
View
2  codelab/meet-yeoman.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.8591591dd0.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.3678876372.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html class=active>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Meet Yeoman</h1><p>Yeoman is a man in a hat with tricks up his sleeve.</p><p>With just a command or two, Yeoman can write boilerplate code for your entire web application or individual pieces like Controllers and Models. Yeoman can fire up a preview web server and watch your files for edits in order to live reload changes and compile your Sass. Yeoman can also run your unit tests, minimize and concatenate your code, optimize images, plus more!</p><p><img src=/static/image_1.59a383e66f.png alt=""></p><ul><li><a href=http://yeoman.io><strong>yo</strong></a> is a scaffolding tool that offers an ecosystem of framework-specific scaffolds, called generators, that can be used to perform some of the tedious tasks mentioned earlier.</li></ul><p>Yeoman also works with other tools for improving your productivity:</p><ul><li><p><a href=http://gruntjs.com><strong>grunt</strong></a> is used to build, preview, and test your project, thanks to help from tasks curated by the Yeoman team and <a href=https://github.com/gruntjs/grunt-contrib>grunt-contrib</a>.</p></li><li><p><a href="http://gulpjs.com/"><strong>gulp</strong></a> is an alternative to GruntJS that favors code over configuration.</p></li><li><p><a href="http://bower.io/"><strong>bower</strong></a> is used for dependency management, so that you no longer have to manually download your front-end libraries.</p></li></ul><p>You can install Yeoman generators using the <a href="https://www.npmjs.com/">npm</a> command and there are over <a href="http://yeoman.io/generators/">500 generators</a> now available, many of which have been written by the open-source community. Popular generators include <a href=https://github.com/yeoman/generator-angular>generator-angular</a>, <a href=https://github.com/yeoman/generator-backbone>generator-backbone</a>, and <a href=https://github.com/yeoman/generator-polymer>generator-polymer</a>.</p><h2>Why use Yeoman?</h2><p>With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by scaffolding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.</p><p><a href=../codelab.html>« Return to overview</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.html>Tweet</a><script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||(n=t.createElement(e),n.id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script><script src=https://apis.google.com/js/plusone.js></script><g:plus action=share></g:plus></div></section></article></div></div><footer class=page-footer><ul class="footer-links footer-links-social"><li><a href=https://plus.google.com/101063139999404044459/posts class=icon><img src=/static/social-gplus.cdac08228d.svg alt=Google+></a></li> <li><a href=https://twitter.com/yeoman class=icon><img src=/static/social-twitter.60eb981a15.svg alt=Twitter></a></li> <li><a href=https://github.com/yeoman/yeoman class=icon><img src=/static/social-github.767995ad17.svg alt=Github></a></li> <li><a href=/blog/atom.xml class=icon><img src=/static/social-feed.c635057faf.svg alt=Feed></a></li></ul><ul class="footer-links footer-links-contribute"><li><a href="http://yeoman.github.io/generator/" class=btn>API</a></li> <li><a href=https://github.com/yeoman/yeoman.io/blob/master/app/codelab/meet-yeoman.md class="btn btn-improve" title="Edit this page on Github to help improve the site">Improve this page</a></li></ul></footer><script src=//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script><script src=/static/bundle-5022.6f6c082cfd.js async></script><script>!function(t,e,n){"undefined"!=typeof n.module&&n.module.exports?n.module.exports=e():"undefined"!=typeof n.define&&"function"==n.define&&n.define.amd?define(t,e):n[t]=e()}("$script",function(){function t(t,e){for(var n=0,o=t.length;o>n;++n)if(!e(t[n]))return l;return 1}function e(e,n){t(e,function(t){return!n(t)})}function n(i,c,l){function p(t){return t.call?t():s[t]}function g(){if(!--w){s[y]=1,v&&v();for(var n in f)t(n.split("|"),p)&&!e(f[n],p)&&(f[n]=[])}}i=i[m]?i:[i];var h=c&&c.call,v=h?c:l,y=h?i.join(""):c,w=i.length;return setTimeout(function(){e(i,function(t){return d[t]?(y&&(u[y]=1),2==d[t]&&g()):(d[t]=1,y&&(u[y]=1),o(!a.test(t)&&r?r+t+".js":t,g),void 0)})},0),n}function o(t,e){var n=i.createElement("script"),o=l;n.onload=n.onerror=n[v]=function(){n[g]&&!/^c|loade/.test(n[g])||o||(n.onload=n[v]=null,o=1,d[t]=2,e())},n.async=1,n.src=t,c.insertBefore(n,c.firstChild)}var r,i=document,c=i.getElementsByTagName("head")[0],a=/^https?:\/\//,s={},u={},f={},d={},l=!1,m="push",p="DOMContentLoaded",g="readyState",h="addEventListener",v="onreadystatechange";return!i[g]&&i[h]&&(i[h](p,function y(){i.removeEventListener(p,y,l),i[g]="complete"},l),i[g]="loading"),n.get=o,n.order=function(t,e,o){!function r(i){i=t.shift(),t.length?n(i,r):n(i,e,o)}()},n.path=function(t){r=t},n.ready=function(o,r,i){o=o[m]?o:[o];var c=[];return!e(o,function(t){s[t]||c[m](t)})&&t(o,function(t){return s[t]})?r():!function(t){f[t]=f[t]||[],f[t][m](r),i&&i(c)}(o.join("|")),n},n},this);var _gaq=[["_setAccount","UA-32956520-1"],["_setDomainName",".yeoman.io"],["_trackPageview"],["_trackPageLoadTime"]];$script("http://www.google-analytics.com/ga.js"),$script("https://apis.google.com/js/plusone.js"),$script("//platform.twitter.com/widgets.js");</script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>Yeoman - Modern workflows for modern webapps</title><meta name=viewport content="width=device-width"><link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic" rel=stylesheet><link rel=stylesheet href=/static/bundle-4963.138cb6b273.css><link href=/blog/atom.xml type=application/atom+xml rel=alternate title="Yeoman Blog Atom Feed"><link rel="shortcut icon" href=../static/favicon.b25e58c4b8.ico></head><body><header class=page-header><div class=container><div class=mobile-bar><h1 class=logo><a href="/"><img src=/static/logo.f0661e3819.png alt=Yeoman></a></h1><button class="mobile-menu-toggle ir">open</button></div><nav class=main-menu><ul class=main-nav><li><a href="/learning/">Using Yeoman</a><ul> <li><a href=/learning/index.html>Getting started</a></li> <li><a href=/codelab.html>Tutorial (codelab)</a></li> <li><a href=/learning/resources.html>Resources</a></li> <li><a href=/learning/deployment.html>Deployment</a></li> <li><a href=/learning/faq.html>FAQ</a></li> <li><a href=/learning/support.html>Support</a></li></ul></li><li><a href="/generators/">Discovering generators</a></li> <li><a href="/authoring/">Creating a generator</a><ul> <li><a href=/authoring/index.html>Getting started</a></li> <li><a href=/authoring/running-context.html>Running Context</a></li> <li><a href=/authoring/user-interactions.html>User Interactions</a></li> <li><a href=/authoring/composability.html>Composability</a></li> <li><a href=/authoring/dependencies.html>Managing Dependencies</a></li> <li><a href=/authoring/file-system.html>Interacting with the file system</a></li> <li><a href=/authoring/gruntfile.html>Creating a Gruntfile</a></li> <li><a href=/authoring/storage.html>Storing user configs</a></li> <li><a href=/authoring/testing.html>Unit testing</a></li> <li><a href=/authoring/debugging.html>Debugging Generators</a></li> <li><a href=/authoring/integrating-yeoman.html>Integrating Yeoman in other tools</a></li> <li><a href="http://yeoman.github.io/generator/">Full API documentation</a></li></ul></li><li><a href="/blog/">Blog</a></li> <li><a href="/contributing/">Contributing</a><ul> <li><a href=/contributing/index.html>Contributing</a></li> <li><a href=/contributing/opening-issues.html>How to open an issue</a></li> <li><a href=/contributing/pull-request.html>How to submit a PR</a></li> <li><a href=/contributing/style-guide.html>Style Guide</a></li> <li><a href=/contributing/testing-guidelines.html>Testing Guidelines</a></li> <li><a href=/contributing/ticketing.html>Issue system overview</a></li></ul></li></ul></nav></div></header><div id=content><h2 class=page-title><div class=container></div></h2><div class="container has-sidebar clearfix"><nav class=context-nav><ul><li><a href=/codelab.html>Let's Scaffold a Web App</a></li> <li><a href=/codelab/meet-yeoman.html class=active>Meet Yeoman</a></li> <li><a href=/codelab/setup.html>Step 1</a></li> <li><a href=/codelab/install-generators.html>Step 2</a></li> <li><a href=/codelab/scaffold-app.html>Step 3</a></li> <li><a href=/codelab/review-generated-files.html>Step 4</a></li> <li><a href=/codelab/preview-inbrowser.html>Step 5</a></li> <li><a href=/codelab/write-app.html>Step 6</a></li> <li><a href=/codelab/install-packages.html>Step 7</a></li> <li><a href=/codelab/write-unit-tests.html>Step 8</a></li> <li><a href=/codelab/prepare-production.html>Step 9</a></li> <li><a href=/codelab/local-storage.html>Step 10</a></li> <li><a href=/codelab/keep-going.html>Keep going</a></li></ul></nav><article class=main><section class=content-chunk><h1>Meet Yeoman</h1><p>Yeoman is a man in a hat with tricks up his sleeve.</p><p>With just a command or two, Yeoman can write boilerplate code for your entire web application or individual pieces like Controllers and Models. Yeoman can fire up a preview web server and watch your files for edits in order to live reload changes and compile your Sass. Yeoman can also run your unit tests, minimize and concatenate your code, optimize images, plus more!</p><p><img src=/static/image_1.cb4f4429e2.png alt=""></p><ul><li><a href=http://yeoman.io><strong>yo</strong></a> is a scaffolding tool that offers an ecosystem of framework-specific scaffolds, called generators, that can be used to perform some of the tedious tasks mentioned earlier.</li></ul><p>Yeoman also works with other tools for improving your productivity:</p><ul><li><p><a href=http://gruntjs.com><strong>grunt</strong></a> is used to build, preview, and test your project, thanks to help from tasks curated by the Yeoman team and <a href=https://github.com/gruntjs/grunt-contrib>grunt-contrib</a>.</p></li><li><p><a href="http://gulpjs.com/"><strong>gulp</strong></a> is an alternative to GruntJS that favors code over configuration.</p></li><li><p><a href="http://bower.io/"><strong>bower</strong></a> is used for dependency management, so that you no longer have to manually download your front-end libraries.</p></li></ul><p>You can install Yeoman generators using the <a href="https://www.npmjs.com/">npm</a> command and there are over <a href="http://yeoman.io/generators/">500 generators</a> now available, many of which have been written by the open-source community. Popular generators include <a href=https://github.com/yeoman/generator-angular>generator-angular</a>, <a href=https://github.com/yeoman/generator-backbone>generator-backbone</a>, and <a href=https://github.com/yeoman/generator-polymer>generator-polymer</a>.</p><h2>Why use Yeoman?</h2><p>With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Deciding on a workflow that you’re happy with is often a very personal endeavour, but getting started isn’t always easy. Yeoman aims to solve this problem by scaffolding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.</p><p><a href=../codelab.html>« Return to overview</a></p><div class=social><a href=https://twitter.com/share class=twitter-share-button data-text="Let's Scaffold A Web App With @Yeoman!" data-url=http://yeoman.io/codelab.ht