Yeoman Blog2023-06-12T12:12:36+00:00https://yeoman.io/Yeoman TeamSay allo' to yeoman-generator 1.02016-12-17T00:00:00+00:00https://yeoman.io/blog/hello-generator-1.0<p>It’s been a long time coming, but <code class=highlighter-rouge>yeoman-generator</code> 1.0 is finally available!</p><ul><li><a href=https://github.com/yeoman/generator/releases/tag/v1.0.0>Full changelog</a></li> <li><a href=https://www.npmjs.com/package/yeoman-generator>Download from npm</a></li></ul><p>We’ve been <a href=https://github.com/yeoman/generator/issues/766>talking about releasing a 1.0</a> release since February 2015. Yeoman has been around since 2012. Over those 4 years, it accumulated a lot of technical debt and depreciated API. We always put a lot of value in maintaining backward compatibility and making upgrading to new version of our core framework as smooth as possible. As such, we started in 2015 to release smaller sets of breaking changes as minor pre 1.0.</p><p>It’s hard to clearly define when we’re ready to accept an API as good enough to be maintained as the baseline of our project. Stripping out useless and deprecated methods brought us to a point where we could clearly see some core accidental complexity. So, we’re releasing 1.0 today fixing these and removing all the methods that had been marked as deprecated.</p><p>If you’ve been keeping up to date with past <code class=highlighter-rouge>yeoman-generator</code> releases, we expect the update process to be relatively painless.</p><h2 id=changes>Changes</h2><p>The two major changes with this release was rethinking and simplifying the way you compose generators and the way you handle options and arguments passed to your generator.</p><h3 id=update-to-option-and-argument-parsing>Update to option and argument parsing</h3><p>A lot of bugs accumulated around the way the generator system handled option and argument. We believe we fixed most of these as of 1.0.</p><p>For generator maintainers, the main changes is that argument and options are now both accessible in the same transparent way. Arguments are now accessed as <code class=highlighter-rouge>this.options[argumentName]</code> instead of <code class=highlighter-rouge>this[argumentName]</code>. The old way was often creating bugs due to clashes with other instance names.</p><p>The <code class=highlighter-rouge>type</code> property should now be correctly respected. It can also be defined as a function taking the string input and parsing it to whatever value you wish.</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=k>this</span><span class=p>.</span><span class=nx>option</span><span class=p>(</span><span class=s2>"bar"</span><span class=p>,</span> <span class=p>{</span>
<span class=na>type</span><span class=p>:</span> <span class=nx>input</span> <span class=o>=></span> <span class=nx>_</span><span class=p>.</span><span class=nx>capitalize</span><span class=p>(</span><span class=nx>input</span><span class=p>)</span>
<span class=p>});</span>
</code></pre></div></div><h3 id=update-to-composewith>Update to composeWith</h3><p><code class=highlighter-rouge>composeWith</code> was without any doubt the function with the most accidental complexity from other parts of our system. Changes to the input parsing as explained previously allowed us to reduce the complexity of that method.</p><p>Previously you’d write a composeWith function as:</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=c1>// OLD API</span>
<span class=k>this</span><span class=p>.</span><span class=nx>composeWith</span><span class=p>(</span>
<span class=s2>"node:eslint"</span><span class=p>,</span>
<span class=p>{</span>
<span class=na>options</span><span class=p>:</span> <span class=p>{</span>
<span class=na>indent</span><span class=p>:</span> <span class=mi>2</span>
<span class=p>}</span>
<span class=p>},</span>
<span class=p>{</span>
<span class=na>local</span><span class=p>:</span> <span class=nx>require</span><span class=p>.</span><span class=nx>resolve</span><span class=p>(</span><span class=s2>"generator-node/generators/eslint"</span><span class=p>)</span>
<span class=p>}</span>
<span class=p>);</span>
</code></pre></div></div><p>Now, it’s just:</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=k>this</span><span class=p>.</span><span class=nx>composeWith</span><span class=p>(</span><span class=nx>require</span><span class=p>.</span><span class=nx>resolve</span><span class=p>(</span><span class=s2>"generator-node/generators/eslint"</span><span class=p>),</span> <span class=p>{</span>
<span class=na>indent</span><span class=p>:</span> <span class=mi>2</span>
<span class=p>});</span>
</code></pre></div></div><h3 id=simpler-default-export>Simpler default export</h3><p>Previously the <code class=highlighter-rouge>yeoman-generator</code> package would expose a lot of unrelated functions.</p><p>It now only exports the core <code class=highlighter-rouge>Generator</code> class:</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=kd>const</span> <span class=nx>Generator</span> <span class=o>=</span> <span class=nx>require</span><span class=p>(</span><span class=s2>"yeoman-generator"</span><span class=p>);</span>
<span class=k>export</span> <span class=k>default</span> <span class=kd>class</span> <span class=kd>extends</span> <span class=nx>Generator</span> <span class=p>{}</span>
</code></pre></div></div><p>No more <code class=highlighter-rouge>NamedBase</code> and no more <code class=highlighter-rouge>yeoman-environment</code> factory (use <code class=highlighter-rouge>yeoman-environment</code> directly for that).</p><h3 id=yarn-support>Yarn support</h3><p>We now expose <code class=highlighter-rouge>this.yarnInstall()</code> (just like <code class=highlighter-rouge>this.npmInstall()</code>) because life is too short to wait on installs.</p><p><code class=highlighter-rouge>npmInstall</code> has also been improved with a longer default cache duration.</p><h3 id=misc-changes>Misc changes</h3><p>We deleted a lot of deprecated functions:</p><ul><li><code class=highlighter-rouge>this.expand()</code></li> <li><code class=highlighter-rouge>this.expandFiles()</code></li> <li><code class=highlighter-rouge>this.isPathAbsolute()</code></li> <li><code class=highlighter-rouge>this.mkdir()</code></li> <li><code class=highlighter-rouge>this.invoke()</code></li> <li><code class=highlighter-rouge>this.hookFor()</code></li> <li><code class=highlighter-rouge>this.remote()</code></li> <li><code class=highlighter-rouge>this.remoteDir()</code></li> <li><code class=highlighter-rouge>this.fetch()</code></li> <li><code class=highlighter-rouge>this.extract()</code></li> <li><code class=highlighter-rouge>this.tarball()</code></li> <li><code class=highlighter-rouge>this.welcome()</code></li> <li><code class=highlighter-rouge>this.write()</code></li> <li><code class=highlighter-rouge>this.read()</code></li> <li><code class=highlighter-rouge>this.copy()</code></li> <li><code class=highlighter-rouge>this.bulkCopy()</code></li> <li><code class=highlighter-rouge>this.template()</code></li> <li><code class=highlighter-rouge>this.directory()</code></li> <li><code class=highlighter-rouge>this.bulkDirectory()</code></li></ul><p>These are all functions that can be replaced by raw npm modules. They didn’t require Generator prototype functions.</p><p>File handling should all be done with the <code class=highlighter-rouge>this.fs</code> virtual file system (/authoring/file-system.html)</p><h2 id=migration-guide>Migration guide</h2><p>If you’ve been keeping up with the latest <code class=highlighter-rouge>yeoman-generator</code> release, then you should’ve seen deprecation warning each time you used a function that was going to be deleted.</p><p>If you didn’t keep up with our releases. Then I’d suggest updating to <a href=https://github.com/yeoman/generator/releases/tag/v0.19.0><code class=highlighter-rouge>v0.19</code></a> and progressively update to 1.0 as you’ll get future deprecation warning as you update to each version. Fix the warning and update to the next minor until you reach 1.0.</p><p>As always, feel free to drop in <a href=https://gitter.im/yeoman/yeoman>our gitter chat</a> to get support if you run into issues. Bugs can be reported to <a href=https://github.com/yeoman/generator/issues/new>the yeoman-generator repository</a>.</p><p>We do hope this release will help you make better and more efficient generators!</p><p>Cheers, <a href=https://twitter.com/Vaxilart>Simon</a> and the rest of the <a href=https://yeoman.io/ >Yeoman team</a></p>Generator-M-Ionic - JS fatigue and transitioning to Typescript, Angular 2 & Ionic 22016-07-13T00:00:00+00:00https://yeoman.io/blog/generator-m-ionic-js-fatigue-and-transitioning-to-typescript-angular-2-and-ionic-2<p align=center><a href=https://github.com/mwaylabs/generator-m-ionic alt=Generator-M-Ionic><img width=175 src=/static/logo.06e9814fb3.png></a></p><blockquote><p>This is a guest post by <a href=https://twitter.com/JonathanGrupp>Jonathan Grupp</a></p></blockquote><p><a href=https://github.com/mwaylabs/generator-m-ionic>Generator-M-Ionic</a> is an open source collection of advanced workflows for building cross-platform HTML5 mobile apps with Ionic. This article gives a quick introduction into the generator’s capabilities and refers to more elaborate resources for those willing to work with it.</p><p>As we’re transitioning to the next generation technology stack with Typescript, Angular 2 and Ionic 2, we’re trying to overcome <a href=https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.vh3bssyd7>JS fatigue</a> and JS tooling fatigue and bring the development of the different tools closer together. You can help us by joining the discussion!</p><h2 id=whats-generator-m-ionic-for>What’s Generator-M-Ionic for?</h2><blockquote><p><strong>Advanced workflows for building rock-solid Ionic apps:</strong> develop, prototype, test, build and deliver high quality apps with Yeoman, Gulp, Bower, Angular, Cordova and of course Ionic. All in one sexy generator.</p></blockquote><p>The roots of <a href=https://github.com/mwaylabs/generator-m-ionic>Generator-M-Ionic</a> reach back more than two years when my team and I (<a href=https://github.com/gruppjo>@gruppjo</a>) at <a href=http://www.mwaysolutions.com/ >M-Way Solutions</a> decided to move our HTML5 mobile app development stack to Angular and Ionic in <a href=http://blog.mwaysolutions.com/2015/03/26/generator-m-the-state-of-html5-mobile-app-development-at-m-way/ >early 2014</a>. Since then <a href=https://github.com/mwaylabs/generator-m-ionic>Generator-M-Ionic</a> has grown into a full-fledged collection of development tools for building large-scale enterprise apps with <a href=http://cordova.apache.org/ >Cordova</a>, <a href=https://angularjs.org/ >Angular</a> and <a href=http://ionicframework.com/ >Ionic</a>.</p><p>Built on top of the <a href=https://yeoman.io/ >Yeoman Ecosystem</a> with <a href=http://gulpjs.com/ >Gulp</a>, <a href=https://bower.io/ >Bower</a> and <a href=https://www.npmjs.com/ >npm</a>, Generator-M-Ionic offers highly efficient workflows for building apps from start to finish by wiring together a complex technology stack and by providing workflows for all important aspects of professional cross-platform HTML5 app development with Cordova, Angular and Ionic.</p><p><img src=/static/tech_stack.987ffff448.png alt="Generator-M-Ionic technology stack"></p><p>Here’s a brief overview of Generator-M-Ionic’s capabilities:</p><h3 id=code-generation>Code Generation</h3><ul><li><code class=highlighter-rouge>yo m-ionic</code> sets up a fine-tuned project including:<ul> <li>worry-free <a href=https://github.com/mwaylabs/generator-m-ionic/tree/master/docs/guides/git_integration.md>Git integration</a></li> <li>a properly configured <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/development_intro.md#using-the-cordova-cli>Cordova project</a></li> <li>an out of the box <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/questions.md#starter-template>sample app</a></li> <li>seamless <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/sass_integration.md>Sass integration</a></li> <li>easy to understand <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/file_structure.md>file-structure</a></li></ul></li><li><a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/sub_generators.md>sub generators</a> create ready to use components like Angular controllers, templates, services and more</li></ul><h3 id=development-workflows>Development Workflows</h3><ul><li><code class=highlighter-rouge>gulp watch</code> automatically connects the frontend-stack including Angular, Ionic and all other bower components, stylesheets, your own Angular and Ionic components with your app and watches for changes</li> <li><code class=highlighter-rouge>gulp --livereload "run ios"</code> builds an app for your device and watches for changes on your dev machine using <a href=https://www.browsersync.io/ >Browsersync</a></li> <li>… discover more useful workflows in our <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/development_intro.md>Development Introduction</a></li></ul><h3 id=code-quality>Code Quality</h3><ul><li><a href=http://eslint.org/ >ESLint</a> together with other JSONLint runs along with all important development tasks</li> <li><code class=highlighter-rouge>gulp karma</code> and <code class=highlighter-rouge>gulp protractor</code> profit from an out-of-the-box ready-to-use <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/testing.md>Testing workflow</a></li> <li>these integrate nicely into Continuous Integration, precommit and other hooks with <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/testing_workflow.md>Husky</a></li></ul><h3 id=continuous-integration>Continuous Integration</h3><p>In addition to our CI-ready build and test workflows, injecting <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/build_vars.md>Build Vars</a> into your build and other <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/programmatically_change_configxml.md>CI features</a> complement a successful Continuous Integration setup with Generator-M-Ionic.</p><h3 id=advanced-workflows>Advanced Workflows</h3><p>Handling <a href=https://github.com/mwaylabs/generator-m-ionic/tree/master/docs/guides/cors_proxy.md>CORS & Proxying</a> issues, managing different sets of <a href=https://github.com/mwaylabs/generator-m-ionic/tree/master/docs/guides/icons_splash_screens.md>App Icons and splash screens</a>, tackling different API endpoints and other things with <a href=https://github.com/mwaylabs/generator-m-ionic/tree/master/docs/guides/environments.md>Environments</a> and much more is part of the <a href=https://github.com/mwaylabs/generator-m-ionic#advanced>Advanced Workflows Section</a> of our Guides.</p><h3 id=ecosystems>Ecosystems</h3><p>Creating things like backends, push services, user management, build infrastructures and others can be hard. Luckily there’s ecosystems like the <a href=http://ionic.io/ >Ionic Platform</a>, our own enterprise-targeting <a href=https://www.relution.io/ >Relution</a>, which your Generator-M-Ionic project integrates into nicely. <a href=https://github.com/mwaylabs/generator-m-ionic#ecosystems>Read more</a>.</p><h2 id=if-that-wasnt-enough>If that wasn’t enough</h2><p>… check out our <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/programmatically_change_configxml.md>GitHub repository</a> for the full documentation!</p><p>Besides that, we recently had the pleasure of publishing a full blog series about Generator-M-Ionic on the <a href=http://blog.ionic.io/ >Ionic Blog</a>. Give it a go for a more tutorial-like approach of getting to know the full value of Generator-M-Ionic:</p><ul><li>Advanced workflows for building rock-solid Ionic apps. <a href=http://blog.ionic.io/advanced-workflows-for-building-rock-solid-ionic-apps-part-1/ >Part 1: Playground</a></li> <li>Advanced workflows for building rock-solid Ionic apps. <a href=http://blog.ionic.io/advanced-workflows-for-building-rock-solid-ionic-apps-part-2/ >Part 2: Mountain</a></li> <li>Advanced workflows for building rock-solid Ionic apps. <a href=http://blog.ionic.io/advanced-workflows-for-building-rock-solid-ionic-apps-part-3/ >Part 3: Orbit</a></li></ul><p>We’d love to hear your feedback!</p><h2 id=transitioning>Transitioning</h2><p>With Angular 2 <a href="http://angularjs.blogspot.de/2016/06/rc4-now-available.html?view=magazine">release candidates</a> and Ionic 2 <a href=http://blog.ionic.io/ionic-2-beta-10-is-live/ >betas</a> now being released almost every week <a href=http://blog.mwaysolutions.com/2016/03/23/preparing-for-ionic-2-and-angular-2/ >we’re preparing to make our transition</a> in a reasonable and educated fashion.</p><p><img src=/static/angular2_ionic2.fdfb900971.png alt="Angular 2 Ionic 2"></p><p>The Angular 1 & Ionic 1 ecosystem is huge and many companies like ourselves, or organizations who use our generator have a large number of apps and assets written for this stack. Therefore the Angular 1 / Ionic 1 stack will continue to play a major role for a long time to come, before the majority of the market will have made its transition.</p><p>Thus it’s especially important for us to provide tools that capitalize on these assets and apps instead of rendering them useless. A smooth transition instead of mindlessly rushing towards the new stack.</p><p>For this we need your help.</p><h2 id=spark-the-discussion>Spark the discussion</h2><p>If you like what you’re seeing in our generator you can help us figure out how all of us can build Ionic 2 apps in the future. There’s many open ends and a lot of commotion regarding the whole Angular 2 / Ionic 2 stack. Whether to Browserify or to Webpack, to ES6/7 or to Typescript and whether to CLI or to Yeoman?</p><p>There’s a lot of choices contributing to <a href=https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.vh3bssyd7>JS fatigue</a> and from a tooling standpoint this isn’t any different.</p><p>There is an <a href=https://github.com/angular/angular-cli>Angular 2 CLI prototype</a> from the Angular creators and the <a href=http://ionicframework.com/docs/v2/cli/ >Ionic 2 CLI</a> from the Ionic creators. Unfortunately both of them are more or less closed systems which drastically complicates building on top of it to suit your own needs. As of now it’s time consuming, partly impossible to get Ionic, Cordova, a proper e2e and unit <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/testing.md>testing workflow</a>, <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/eslint.md>linting</a>, <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/environments.md>environments</a>, <a href=https://github.com/mwaylabs/generator-m-ionic/blob/master/docs/guides/build_vars.md>build vars</a> and many of our other features into each of these tools without forking and largely altering them.</p><p>Personally I’m quite intrigued by the flexibility of the FountainJS Generators, which is the next generation of the famous <a href=https://github.com/Swiip/generator-gulp-angular>generator-gulp-angular</a>, both created by <a href=https://twitter.com/Zckrs>@zckrs</a> and <a href=https://twitter.com/Swiip>@Swiip</a>. I hope we can build on top of their architecture. Relying on the <a href=https://yeoman.io/ >Yeoman</a> architecture allows tremendous flexibility and extensibility in their and our project. Unfortunately the Angular 2 CLI and the Ionic 2 CLI don’t use Yeoman and don’t provide easy ways to build on top of their functionality. In fact that’s exactly the same problem we had with Angular 1 and Ionic 1 and is the reason <a href=http://blog.mwaysolutions.com/2015/09/21/generator-m-ionic-and-the-search-for-the-holy-grail/ >why we started building our generator in the first place</a>.</p><h2 id=get-in-touch>Get in touch</h2><p>You can help by joining the discussion, tell us which features of Generator-M-Ionic, the Angular 2 CLI and the Ionic 2 CLI you like and hopefully we can bring development of all of them closer together, getting rid of some of that decision fatigue and bring better tools for all of us.</p><p>You can start by commenting on <a href=https://github.com/mwaylabs/generator-m-ionic/issues/403>this issue in our repository</a>, or dive deeper into to the corresponding discussion over at the <a href=https://github.com/yeoman/yeoman/issues/1571>yeoman repo</a>, <a href=https://github.com/angular/angular-cli/issues/49#issuecomment-196876545>angular-cli repo</a> or <a href=https://github.com/driftyco/ionic-cli/issues/845>ionic-cli repo</a>.</p><p>Let us know what you think and help us build better tools for the next generation of HTML5 mobile app development!</p><p>For everything else our <a href=https://github.com/mwaylabs/generator-m-ionic>GitHub repository</a> and <a href=https://gitter.im/mwaylabs/generator-m-ionic>Gitter channel</a> is the way to go!</p>generator-gulp-angular 1.0.0 stable released2015-10-15T00:00:00+00:00https://yeoman.io/blog/generator-gulp-angular-v1<blockquote><p>This is a guest post by <a href=https://github.com/Swiip>Matthieu Lux</a> and <a href=https://github.com/zckrs>Mehdy Dara</a>.</p></blockquote><h2 id=intro->Intro <img src=/static/generator-gulp-angular-logo.a6d9572773.png alt=Logo></h2><p>It has now been more than a year since we (<a href=https://twitter.com/Swiip>@Swiip</a> and <a href=https://twitter.com/Zckrs>@zckrs</a>), started work on our Yeoman generator. Today we are celebrating the release of our first major and stable version: <a href=https://www.npmjs.com/package/generator-gulp-angular>generator-gulp-angular 1.0.0</a>.</p><p>At first, we wanted to make a good merge of <a href=https://github.com/yeoman/generator-gulp-webapp>generator-gulp-webapp</a> and <a href=https://github.com/yeoman/generator-angular>generator-angular</a>, as we worked on Angular but grew tired of Grunt’s verbosity. Then, the project popularity started to increase and so did its ambition.</p><h2 id=philosophy>Philosophy</h2><p>We followed all the precepts of Yeoman and added our own:</p><ul><li>Provide a well written seed project, following the best recommendations for folder structure and code style.</li> <li>Offer options to enable the user to start with the best tooling and optimizations using the latest technologies.</li> <li>Use automatic injection in different parts of the project: script tags both vendor and sources in the index.html, styles files, vendor, css or preprocessed.</li> <li>Provide test coverage, as perfect as possible, for both the generator and also code it generated.</li></ul><h3 id=technologies-supported>Technologies supported</h3><p>We are not joking around when we talk about this being a stable version. We integrated lots of technologies and languages, from CoffeeScript to TypeScript, to Sass to Stylus. The number of combinations exceeds several million! We wrote tests, documentation and fixed issues for 12 minor versions and 2 release candidates, to be able to deliver a perfectly configured seed project, no matter the options you choose.</p><p><img src=/static/technologies-gga.e534cdd81e.png alt=""></p><h3 id=optimization-served>Optimization served</h3><p>We integrated many optimizations for your web application using a few Gulp plugins:</p><ul><li><strong><a href=http://www.browsersync.io/docs/gulp/ >browserSync</a></strong>: full-featured development web server with livereload and device sync</li> <li><strong><a href=https://github.com/Kagami/gulp-ng-annotate>ngAnnotate</a></strong>: convert simple injection to complete syntax to be minification proof</li> <li><strong><a href=https://github.com/miickel/gulp-angular-templatecache>angular-templatecache</a></strong>: all HTML partials will be converted to JS to be bundled in the application</li> <li><strong><a href=https://github.com/adametry/gulp-eslint>ESLint</a></strong>: the pluggable linting utility for JavaScript</li> <li><strong><a href=https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb>watch</a></strong>: watch your source files and recompile them automatically</li> <li><strong><a href=https://github.com/jonkemp/gulp-useref>useref</a></strong>: allow configuration of your files in comments of your HTML file</li> <li><strong><a href=https://github.com/terinjokes/gulp-uglify>uglify</a></strong>: optimize all your JavaScript</li> <li><strong><a href=https://github.com/murphydanger/gulp-minify-css>clean-css</a></strong>: optimize all your CSS</li> <li><strong><a href=https://github.com/sindresorhus/gulp-rev>rev</a></strong>: add a hash in the file names to prevent browser cache problems</li> <li><strong><a href=https://github.com/karma-runner/gulp-karma#tldr>karma</a></strong>: out of the box unit test configuration with karma</li> <li><strong><a href=https://github.com/mllrsohn/gulp-protractor>protractor</a></strong>: out of the box e2e test configuration with protractor</li></ul><h2 id=200-on-the-road>2.0.0 on the road…</h2><p>But version 1.0.0 is not the end of the road. While maintaining the v1 branch, we started a new GitHub organization called <a href=https://github.com/FountainJS>FountainJS</a> targeting a futuristic v2 version. As the context of the build tools has greatly evolved over a year, it’ll be a reboot of the code base. The major selling point will be to use Yeoman Generator’s composition support, to upgrade to Gulp 4 and to write it in ES6. Finally, we hope to open new horizons in terms of options: dependency management for sure, but why not also Web frameworks (someone talked about React?) and also a backend.</p><p>Go try out the <a href=https://www.npmjs.com/package/generator-gulp-angular>generator-gulp-angular</a> v1.0.0 release! Any feedback, issues, or contributions on the new <a href=https://github.com/FountainJS>FountainJS</a> project will always be appreciated.</p>State of the Moustache2015-04-27T00:00:00+00:00https://yeoman.io/blog/state-of-the-moustache-2015<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 id=intro>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=https://github.com/yeoman/yeoman>yeoman</a> to <a href=https://github.com/yeoman/yo>yo</a>. This month also saw Yeoman grow to <a href=http://www.npm-stats.com/~packages/yo>1.3 million</a> total installs and 1635 community <a href=https://yeoman.github.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 id=highlights>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.768aa761fc.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 id=spotlight-react>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.8cd75e7f6d.png alt=""></p><h3 id=spotlight-es6>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.999f514308.png alt=""></p><h3 id=spotlight-electron>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.2bfc6d8b8a.png alt=""></p><h3 id=spotlight-node>Spotlight: Node</h3><p>While many of us are used to just using <code class=highlighter-rouge>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 id=community>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 id=articles>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=/authoring/integrating-yeoman.html>Integrating Yeoman with third-party tools</a></p><p><a href=https://asciinema.org/a/13240>Using <code class=highlighter-rouge>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&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&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&utm_source=javascriptweekly">Practical TypeScript Development with Gulp and Sublime Text 3</a></p><h3 id=some-generators-we-liked>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 id=announcements-from-core>Announcements from core</h2><h3 id=exploring-npm3>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 class=highlighter-rouge>peerDependencies</code> by default. This particular change will have an impact on <code class=highlighter-rouge>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 class=highlighter-rouge>dependencies</code> instead, but look forward to taking full advantage of npm@3 where it’ll benefit our users.</p><h3 id=deprecations>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 class=highlighter-rouge>yeoman-generator</code> to ensure everything continues to run smoothly.</p><h3 id=composition-ftw>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=/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 id=tipping-our-hat>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 class=highlighter-rouge>yo awesomeness</code>.</p>Why Bower_Components was moved to a Project's Root Directory2014-12-01T00:00:00+00:00https://yeoman.io/blog/bower_components-in-project-root<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 class=highlighter-rouge>/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 class=highlighter-rouge>/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 class=highlighter-rouge>/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 id=user-generated-files>User Generated Files</h2><blockquote><p>I want the <code class=highlighter-rouge>/app</code> folder to be for user-generated stuff</p></blockquote><p>There are people who edit files in the <code class=highlighter-rouge>/app</code> folder then wonder why their changes disappear when they do a <code class=highlighter-rouge>bower update/install</code>. Not just beginners but also people who should know better. They think “oh its in the <code class=highlighter-rouge>/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 id=external-dependencies>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 class=highlighter-rouge>/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 class=highlighter-rouge>/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 id=tooling>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 class=highlighter-rouge>/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 id=downsides>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 class=highlighter-rouge>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 id=conclusion>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>Yeoman generator version 0.18.0 - Release announcement2014-10-14T00:00:00+00:00https://yeoman.io/blog/release-0.18<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 id=new-features>New features!</h2><h3 id=storing-prompt-answers>Storing prompt answers</h3><p>Using the <code class=highlighter-rouge>{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 id=new-file-system>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 class=highlighter-rouge>this.write</code>, <code class=highlighter-rouge>this.copy</code>, <a href=https://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 id=new-fs-methods>New <code class=highlighter-rouge>fs</code> methods</h4><p>The core system can be accessed on <code class=highlighter-rouge>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 class=highlighter-rouge>this.fs.copyTpl()</code> for this), it won’t pass <code class=highlighter-rouge>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="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><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=s2>"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=s2>"test/index.js"</span><span class=p>),</span>
<span class=p>{</span> <span class=na>projectName</span><span class=p>:</span> <span class=s2>"my-awesome-module"</span> <span class=p>}</span>
<span class=p>);</span>
</code></pre></div></div><p>As you can see, we also added two new paths helpers:</p><ol><li><code class=highlighter-rouge>this.templatePath()</code> which is: <code class=highlighter-rouge>path.join(this.sourceRoot(), ...rest)</code></li> <li><code class=highlighter-rouge>this.destinationPath()</code> which is: <code class=highlighter-rouge>path.join(this.destinationRoot(), ...rest)</code></li></ol><p>Try it out and please give us feedback on how you like this new API. It is more verbose than our legacy methods, but it is clearer and less magical.</p><p><em>Note that the legacy system will remain available at least until version 1.0.0</em></p><h4 id=what-about-the-0170-thissrc-and-thisdest-file-utils>What about the 0.17.0 <code class=highlighter-rouge>this.src</code> and <code class=highlighter-rouge>this.dest</code> file utils</h4><p>These should be considered deprecated. The design decision they make isn’t a good fit with composability and will create issues on the long run.</p><h4 id=file-writing-filters>File writing filters</h4><p>Ever wished to apply custom filters on every file write? Beautifying files, normalizing whitespace, etc, is now possible.</p><p>Once per Yeoman process, we will write every modified files to disk. This process is passed through a <a href=https://github.com/wearefractal/vinyl>vinyl</a> object stream (just like <a href=http://gulpjs.com/ >gulp</a>). Any author can register a <code class=highlighter-rouge>transformStream</code> to modify the file path or content.</p><p>For example:</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=kd>var</span> <span class=nx>beautify</span> <span class=o>=</span> <span class=nx>require</span><span class=p>(</span><span class=s2>"gulp-beautify"</span><span class=p>);</span>
<span class=k>this</span><span class=p>.</span><span class=nx>registerTransformStream</span><span class=p>(</span><span class=nx>beautify</span><span class=p>({</span> <span class=na>indentSize</span><span class=p>:</span> <span class=mi>2</span> <span class=p>}));</span>
</code></pre></div></div><p>Note that <strong>every file type will be passed through this stream</strong>. So make sure any transform stream passthrough unsupported files. Tools like <a href=https://github.com/robrich/gulp-if>gulp-if</a> or <a href=https://github.com/sindresorhus/gulp-filter>gulp-filter</a> will help filter invalid type and pass them through.</p><p>This new feature means you can basically use any <em>gulp</em> plugins to process generated files during the writing phase.</p><h2 id=improvements>Improvements</h2><ul><li>Tests <a href=/authoring/testing.html>using <code class=highlighter-rouge>helpers.run()</code></a> won’t output to the console keeping the test output clean. Every log method is now a <code class=highlighter-rouge>sinon.stub()</code> making it easy to assert your generator outputted the correct content.</li> <li>Testing run context now automatically run your tests in a unique tmpdir. No need to manually call <code class=highlighter-rouge>helper.run().inDir()</code> anymore.</li> <li><code class=highlighter-rouge>assert.fileContent</code> and <code class=highlighter-rouge>assert.noFileContent</code> accept a String as arguments (before we just accepted Regex)</li> <li>The Conflicter have been refactored to be simple and easy to use.</li></ul><h3 id=installation-methods-only-running-once>Installation methods only running once</h3><p><code class=highlighter-rouge>npm</code> and <code class=highlighter-rouge>bower</code> installation helpers are now always running once per process. This was a change made in 0.17, but we extended the feature to cover every use/methods who could launch these process.</p><p>This was a breaking an edge case in 0.17. But for the sake of clarity, let’s be clear. The following construct will break:</p><div class="language-js highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=k>this</span><span class=p>.</span><span class=nx>installDependencies</span><span class=p>({</span>
<span class=na>callback</span><span class=p>:</span> <span class=k>this</span><span class=p>.</span><span class=k>async</span><span class=p>()</span> <span class=c1>// This will block the process forever, and node will fail</span>
<span class=p>});</span>
</code></pre></div></div><p>Every install method will be registered on the <a href=/authoring/running-context.html><code class=highlighter-rouge>install</code> run queue</a>. Using <code class=highlighter-rouge>this.async()</code> as a callback will create a deadlock.</p><h2 id=fixes>Fixes</h2><ul><li>Installation methods (npm, bower helpers) now correctly pass the options to the spawn process.</li> <li>When a conflict occurs on a directory, we don’t show the <code class=highlighter-rouge>diff</code> option anymore. (selecting diff on directory threw an error)</li> <li>You can now correctly overwrite the <code class=highlighter-rouge>stdio</code> with <code class=highlighter-rouge>generator.spawnCommand()</code></li> <li><code class=highlighter-rouge>generator.composeWith()</code> now correctly resolve the <code class=highlighter-rouge>local</code> option path.</li></ul><h2 id=meta>Meta</h2><ul><li>We’ve extracted <a href=https://github.com/yeoman/environment>yeoman-environment</a> on it’s own repository. This mean these two core Yeoman parts can now evolve at their own pace.</li> <li>All our tests now uses tmpdir for testing making them more reliable.</li> <li>Completely remove network connection from our test suite - it is now way faster.</li></ul><h2 id=potentially-breaking-change>Potentially breaking change</h2><ul><li>We stopped manually mocking Inquirer in tests. Mainly because Inquirer parses values in ways we didn’t imitate and this caused too much issue. Now we rely more on Inquirer and only mock the minimum. This also mean we don’t create the magic <code class=highlighter-rouge>errors</code> property during test. You can listen for generator errors instead.</li> <li>We removed <code class=highlighter-rouge>require('yeoman-generator').inquirer</code>. Require your own version from now on.</li> <li>We removed <code class=highlighter-rouge>generator.shell</code> and <code class=highlighter-rouge>generator.request</code>. Require your own version.</li></ul><h2 id=in-conclusion>In conclusion</h2><p>The work is still not completed. We still need to update some of our website documentation to include the new APIs methods. And we’ll need to update our core generators to this new version. These should come soon, in the meantime refer to this post about the new features.</p><p>So, enjoy this new release! Please upgrade and let us know how the API feels, and as usual feel free to report any bug you encounter!</p><p>Cheers</p>Karma Generator Rewrite 0.8.02014-05-12T00:00:00+00:00https://yeoman.io/blog/generator-karma-rewrite<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 id=why-was-a-rewrite-necessary>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 id=what-was-the-goal-of-the-rewrite>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 id=0170-yeoman-generator>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 id=testing>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 id=customizations>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 id=gruntfile>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 id=coffeescript-gruntfile-support>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 id=the-dark-side>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 class=highlighter-rouge>angular-scenario</code> and <code class=highlighter-rouge>angular-mock</code> are no longer installed by default. To use them, add them as components in the <code class=highlighter-rouge>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 id=vs-karma-init>Vs <code class=highlighter-rouge>karma init</code></h2><p>With <code class=highlighter-rouge>karma init</code> isn’t this generator kind of pointless?</p><p>No. <code class=highlighter-rouge>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 id=wrap-up>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>Yeoman Generator 0.17.0 prerelease 12014-03-11T00:00:00+00:00https://yeoman.io/blog/generator-0.17<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 class=highlighter-rouge>0.17.0-pre</code> on NPM as a pre-release. Make sure to install it with <code class=highlighter-rouge>npm install yeoman-generator --tag pre</code>.</p><p>Follow through for an overview of the major changes.</p><h2 id=composability>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 class=highlighter-rouge>composeWith</code> method.</p><h3 id=run-loop>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.github.io/blob/source/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 id=composewith><code class=highlighter-rouge>composeWith()</code></h3><p>This new method is almost like the previous <code class=highlighter-rouge>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 class=highlighter-rouge>composeWith</code> <a href=https://github.com/yeoman/yeoman.github.io/blob/source/app/authoring/composability.md>in our new documentation</a>.</p><h2 id=enjoy-testing-your-generators>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.github.io/blob/source/app/authoring/testing.md>Read the documentation</a> to learn more about it!</p><h2 id=and-then>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>Yeoman updates for Friday, March 7th.2014-03-07T00:00:00+00:00https://yeoman.io/blog/releases-march-7th<p>First off, Happy Friday!</p><p><img src=https://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 class=highlighter-rouge>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 class=highlighter-rouge>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 id=release-highlights>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 id=releases>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 id=community>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>Grunt And Gulp Tasks For Performance Optimization2014-03-04T00:00:00+00:00https://yeoman.io/blog/performance-optimization<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 id=compress--optimize-images>Compress & optimize images</h2><p>The average web page is now over <a href="http://httparchive.org/interesting.php?a=All&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 id=grunt>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 id=gulp>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 id=generate-responsive-images-for-the-picture-element>Generate responsive images for the <code class=highlighter-rouge><picture></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 class=highlighter-rouge><picture></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 id=grunt-1>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 class=highlighter-rouge><picture></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 id=minify-svg-images>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 id=grunt-2>Grunt</h4><ul><li><a href=https://github.com/sindresorhus/grunt-svgmin>grunt-svgmin</a></li></ul><h4 id=gulp-1>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-svgmin>gulp-svgmin</a></li></ul><h2 id=generate-spritesheets>Generate spritesheets</h2><h4 id=grunt-3>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-spritesmith>grunt-spritesmith</a></li></ul><h4 id=gulp-2>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-sprite>gulp-sprite</a></li></ul><h2 id=convert-images-to-webp>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 id=grunt-4>Grunt</h4><ul><li><a href=https://github.com/somerandomdude/grunt-webp>grunt-webp</a></li></ul><h4 id=gulp-3>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&thumbSize=200&ival=100&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 id=build-svg-sprites-with-support-for-various-browsers>Build SVG sprites with support for various browsers</h2><h3 id=grunt-5>Grunt</h3><ul><li><a href=https://github.com/filamentgroup/grunticon>grunticon</a></li></ul><h3 id=gulp-4>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 id=minify-css>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 id=grunt-6>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-cssmin>grunt-contrib-cssmin</a></li></ul><h4 id=gulp-5>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-cssmin>gulp-cssmin</a></li></ul><h2 id=remove-unused-css>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 id=grunt-7>Grunt</h4><ul><li><a href=https://github.com/addyosmani/grunt-uncss>grunt-uncss</a></li></ul><h4 id=gulp-6>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 id=inline-css>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 id=grunt-8>Grunt</h4><ul><li><a href=https://github.com/jgallen23/grunt-inline-css>grunt-inline-css</a></li></ul><h4 id=gulp-7>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-inline-css/ >gulp-inline-css</a></li></ul><h2 id=combine-media-queries>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 id=grunt-9>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-combine-media-queries>grunt-combine-media-queries</a></li></ul><h4 id=gulp-8>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-combine-media-queries>gulp-combine-media-queries</a></li></ul><h2 id=javascript>JavaScript</h2><h3 id=minify-compress-js>Minify, compress JS</h3><h4 id=grunt-10>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 id=gulp-9>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 id=requirejs-optimization-via-rjs>RequireJS (optimization via r.js)</h2><h4 id=grunt-11>Grunt</h4><ul><li><a href=https://github.com/asciidisco/grunt-requirejs>grunt-requirejs</a></li></ul><h4 id=gulp-10>Gulp</h4><ul><li><a href=http://requirejs.org>RequireJS</a></li></ul><h2 id=minify-html>Minify HTML</h2><h4 id=grunt-12>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-htmlmin>grunt-contrib-htmlmin</a></li></ul><h4 id=gulp-11>Gulp</h4><ul><li><a href=https://github.com/jonschlinkert/gulp-htmlmin>gulp-htmlmin</a></li></ul><h2 id=simple-concatenation>Simple concatenation</h2><h4 id=grunt-13>Grunt</h4><ul><li><a href=https://github.com/gruntjs/grunt-contrib-concat>grunt-contrib-concat</a></li></ul><h4 id=gulp-12>Gulp</h4><ul><li><a href=https://www.npmjs.com/package/gulp-concat>gulp-concat</a></li></ul><h2 id=general-compression-for-filesfolders>General compression for files/folders</h2><h4 id=grunt-14>Grunt</h4><ul><li><a href=https://www.npmjs.com/package/grunt-contrib-compress>grunt-contrib-compress</a></li></ul><h4 id=gulp-13>Gulp</h4><ul><li><a href=https://github.com/sindresorhus/gulp-zip>gulp-zip</a></li></ul><h2 id=zopfli-compression>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 id=grunt-15>Grunt</h4><ul><li><a href=https://github.com/mathiasbynens/grunt-zopfli>grunt-zopfli</a></li></ul><h4 id=gulp-14>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 id=inline-critical-path-css>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 id=asset-pipeline-auto-handle-all-optimizations>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 id=grunt-16>Grunt</h4><ul><li><a href=https://github.com/Munter/grunt-reduce>grunt-reduce</a></li></ul><h4 id=gulp-15>Gulp</h4><p>Gulp users should just use AssetGraph directly.</p><h2 id=benchmarking>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 id=framework-optimization>Framework Optimization</h2><h4 id=grunt-17>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 id=gulp-16>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 id=misch>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 id=conclusions>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>What's new in the Backbone generator2014-02-11T00:00:00+00:00https://yeoman.io/blog/whats-new-in-backbone-generator<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 id=custom-app-path>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 class=highlighter-rouge>--appPath</code> option.</p><div class="language-sh highlighter-rouge"><div class=highlight><pre class=highlight><code>yo backbone <span class=nt>--appPath</span><span class=o>=</span>public
</code></pre></div></div><p>This will create a folder named <code class=highlighter-rouge>public</code> instead of <code class=highlighter-rouge>app</code>. It will then put the scaffolded code into that folder. When you use a sub-generator, like <code class=highlighter-rouge>backbone:model</code>, the scaffold will use the <code class=highlighter-rouge>public</code> directory.</p><p><img src=/static/backbone-app-path.683bee1aac.png alt="app-path option"></p><h2 id=generating-mocha-tests>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 class=highlighter-rouge>yo backbone:model todo</code>, this will create <code class=highlighter-rouge>todo.spec.js</code> in your <code class=highlighter-rouge>test</code> folder.</p><p><img src=/static/yo-backbone-mocha.c506420472.png alt="Backbone mocha"></p><p>You can choose BDD/TDD when generating the new Backbone app with the <code class=highlighter-rouge>--ui</code> option.</p><div class="language-sh highlighter-rouge"><div class=highlight><pre class=highlight><code>yo backbone <span class=nt>--ui</span><span class=o>=</span>tdd
</code></pre></div></div><p>By default the generator is setup to use BDD with Mocha.</p><h2 id=added-coffeescript-support-for-requirejs>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 id=bootstrap-30>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 id=other-minor-updates>Other minor updates</h2><ul><li>Dropped support for node 0.8</li> <li><code class=highlighter-rouge>grunt server</code> task is now deprecated. <code class=highlighter-rouge>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>Updates to some of our generators2014-02-07T00:00:00+00:00https://yeoman.io/blog/generator-update-feb-0207<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=https://i.imgur.com/hSEppjX.gif></p><h2 id=scaffold-a-gruntfile>Scaffold a Gruntfile</h2><p>We released <code class=highlighter-rouge>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=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g generator-gruntfile
yo gruntfile
</code></pre></div></div><h2 id=scaffold-a-grunt-plugin>Scaffold a Grunt plugin</h2><p>We released <code class=highlighter-rouge>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=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g generator-gruntplugin
yo gruntplugin
</code></pre></div></div><h2 id=scaffold-a-new-node-module>Scaffold a new Node module</h2><p>We released <code class=highlighter-rouge>generator-node</code> <a href=https://github.com/yeoman/generator-node/releases/tag/v0.0.7>0.0.7</a> which scaffolds a Node.js module including Nodeunit unit tests. Useful if you need something a little more than <code class=highlighter-rouge>npm init</code>. Changes:</p><ul><li>Improvements to default values</li> <li>Updated dependencies</li> <li>Fixed peerDep issues</li> <li>Fixed test generation for libs with hypens</li></ul><p>Usage:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g generator-node
yo node
</code></pre></div></div><h2 id=scaffold-a-new-yo-generator>Scaffold a new yo generator</h2><p>We released <code class=highlighter-rouge>generator-generator</code> <a href=https://github.com/yeoman/generator-generator/releases/tag/v0.4.2>0.4.2</a> which scaffolds a new Yeoman generator with some sensible defaults. Changes:</p><ul><li>Updated inherits to extend within templated index files</li> <li>Update to the Yeoman-Generator 0.16 inheritance method</li> <li>Update test to use fileContent, update deprecated methods</li> <li>Hide JSHint warning for camel case</li> <li>Bump to latest versions of dependencies, improve package.json</li></ul><p>Usage:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g generator-generator
yo generator
</code></pre></div></div><h2 id=scaffold-a-project-using-bootstrap>Scaffold a project using Bootstrap</h2><p>We released <code class=highlighter-rouge>generator-bootstrap</code> <a href=https://github.com/yeoman/generator-bootstrap/releases/tag/v0.1.5>0.1.5</a> which prompts you for which flavour of Bootstrap you would like to use - Sass, Less, Stylus or just CSS. Changes:</p><ul><li>Switched to latest official version of bootstrap-sass</li> <li>Switched Less version to components-bootstrap</li></ul><p>Usage:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g generator-bootstrap
yo bootstrap
</code></pre></div></div><h2 id=backbone-and-ember-generator-updates>Backbone and Ember generator updates</h2><p>In the past few weeks, we’ve also released updates to:</p><ul><li><p><a href=https://github.com/yeoman/generator-backbone/releases>generator-backbone</a> - including scaffolding out your mocha tests while generating models/views/collections.</p></li><li><p><a href=https://github.com/yeoman/generator-ember/releases>generator-ember</a> - better Compass defaults, updates to Ember 1.3.1, Ember Data 1.0.0beta.</p></li><li><p><a href=https://github.com/yeoman/generator-polymer/releases>generator-polymer</a> - a more Polymerized index.html with further element granularity, updated deps.</p></li></ul><p>We hope you find these updates useful! Happy Friday!</p><p>~ Addy and the team.</p>Exploring A Generator For Gulp.js2014-02-03T00:00:00+00:00https://yeoman.io/blog/gulp-explore<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=https://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=highlighter-rouge><div class=highlight><pre class=highlight><code>var gulp = require('gulp');
// Load plugins
var $ = require('gulp-load-plugin')({camelize: true});
var server = $.tinyLr();
</code></pre></div></div><p>Styles:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.sass({
style: 'expanded',
loadPath: ['app/bower_components']
}))
.pipe($.livereload(server))
.pipe($.autoprefixer('last 1 version'))
.pipe($.csso())
.pipe(gulp.dest('dist/styles'))
.pipe($.size());
});
</code></pre></div></div><p>Scripts:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint('.jshintrc'))
.pipe($.jshint.reporter('default'))
.pipe($.concat('main.js'))
.pipe($.livereload(server))
.pipe($.uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe($.size());
});
</code></pre></div></div><p>Images:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.livereload(server))
.pipe($.cache($.imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});
</code></pre></div></div><p>Watch:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>gulp.task('watch', function () {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.error(err);
};
// Watch .html files
gulp.watch('app/*.html');
// Watch .scss files
gulp.watch('app/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('app/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('app/images/**/*', ['images']);
});
});
</code></pre></div></div><p>Clean:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>gulp.task('clean', function () {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}).pipe($.clean());
});
</code></pre></div></div><p>Build:</p><div class=highlighter-rouge><div class=highlight><pre class=highlight><code>// Build
gulp.task('build', ['html', 'styles', 'scripts', 'images']);
// Default task
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
</code></pre></div></div><p>At this time, we welcome community contributions which help us fill in the feature gap in our new generator. Feel free to watch the project repo. We’ll let you know as soon as it’s finished cooking.</p><h2 id=further-reading>Further reading</h2><p>The below are some of the recent articles on Gulp we’ve enjoyed reading:</p><ul><li><a href=http://ponyfoo.com/articles/my-first-gulp-adventure>My First Gulp Adventure</a></li> <li><a href=http://ponyfoo.com/articles/gulp-grunt-whatever>Gulp, Grunt, Whatever</a></li> <li><a href=https://travismaynard.com/writing/no-need-to-grunt-take-a-gulp-of-fresh-air>No Need To Grunt, Take A Gulp Of Fresh Air</a></li> <li><a href=http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/ >Grunt vs Gulp - Beyond the Numbers</a></li></ul>Generators New Year Cleanup!2014-01-21T00:00:00+00:00https://yeoman.io/blog/cleanup<p>A lots of changes and new features have been introduced in the Generator System (<code class=highlighter-rouge>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 id=generators-should-generate-a-yo-rcjson-file>Generators should generate a <code class=highlighter-rouge>.yo-rc.json</code> file</h3><p>The <code class=highlighter-rouge>.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 class=highlighter-rouge>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="language-javascript highlighter-rouge"><div class=highlight><pre class=highlight><code><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></div><p>Of course, if you’re using the config object to store datas, it’ll already be created. <a href=https://yeoman.github.io/generator/Storage.html>Read more on the config Storage in our API reference</a>.</p><h3 id=use-the-new-extend-method-instead-of-utilinherit>Use the new <code class=highlighter-rouge>.extend()</code> method instead of <code class=highlighter-rouge>util.inherit</code></h3><p>Until recently, you’d extend the Base generator this way:</p><div class="language-javascript highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=kd>var</span> <span class=nx>BlogGenerator</span> <span class=o>=</span> <span class=p>(</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=kr>arguments</span><span class=p>);</span>
<span class=c1>// ...</span>
<span class=p>});</span>
<span class=nx>util</span><span class=p>.</span><span class=nx>inherits</span><span class=p>(</span><span class=nx>BlogGenerator</span><span class=p>,</span> <span class=nx>generators</span><span class=p>.</span><span class=nx>Base</span><span class=p>);</span>
</code></pre></div></div><p>You can now do the same in a fashion similar to Backbone.js:</p><div class="language-javascript highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=kd>var</span> <span class=nx>BlogGenerator</span> <span class=o>=</span> <span class=p>(</span><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=cm>/* prototype methods goes here */</span>
<span class=p>}));</span>
</code></pre></div></div><p>As you may know, our next big milestone is to allow generator to be composed with each other. This mean you’ll be able to use external generators inside your own, and allow user to build their app using multiple generators (like, I want to build an app with Sailsjs and Angular, with Bootstrap and support for Jenkins tests). Using the <code class=highlighter-rouge>.extend</code> inheritance signature will make it easier to get your generator ready to integrate into the composable yeoman ecosystem.</p><p>Note that we extracted the <a href=https://github.com/SBoudrias/class-extend>inheritance logic into a small standalone NPM module</a>. It’ll be easy to add such functionnality into your own projects without any overhead!</p><h3 id=remove-use-of-deprecated-test-methods>Remove use of deprecated test methods</h3><p>In release <code class=highlighter-rouge>0.16.0</code>, we deprecated some tests methods and added some other. Deprecation are now logged to the console, so make sure you get rid of those!</p><p>Also, <a href=https://yeoman.github.io/generator/assert.html>helpers assertions methods</a> are now exposed on the <code class=highlighter-rouge>yeoman.assert</code> namespace.</p><h3 id=update-dependencies-in-the-generated-bowerjson-and-packagejson>Update dependencies in the generated bower.json and package.json</h3><p>As usual, update your deps. You may use <a href=https://github.com/alanshaw/david>david tool</a> for that.</p><h3 id=make-sure-packagejson-peerdependencies-do-not-use-tilde--versioning>Make sure package.json <code class=highlighter-rouge>peerDependencies</code> do not use tilde <code class=highlighter-rouge>~</code> versioning</h3><p>NPM <code class=highlighter-rouge>peerDependencies</code> are tricky to get right. As they’re installed in the global <code class=highlighter-rouge>node_modules</code> folder, they’re often the cause of installation errors due to incompatible version required between differents packages. Please, be a good citizen and don’t make the issue worse by using restrictive version requirement.</p><p>So, make it a rule to always defines <code class=highlighter-rouge>peerDependencies</code> version using a minimum range (<code class=highlighter-rouge>>=</code>), or using any available version (<code class=highlighter-rouge>*</code>).</p><div class="language-json highlighter-rouge"><div class=highlight><pre class=highlight><code><span class=p>{</span><span class=w>
</span><span class=s2>"peerDependencies"</span><span class=p>:</span><span class=w> </span><span class=p>{</span><span class=w>
</span><span class=err>//</span><span class=w> </span><span class=err>GOOD</span><span class=w>
</span><span class=s2>"grunt-cli"</span><span class=p>:</span><span class=w> </span><span class=s2>">= 0.1.0"</span><span class=p>,</span><span class=w>
</span><span class=err>//</span><span class=w> </span><span class=err>GOOD</span><span class=w>
</span><span class=s2>"gulp"</span><span class=p>:</span><span class=w> </span><span class=s2>"*"</span><span class=p>,</span><span class=w>
</span><span class=err>//</span><span class=w> </span><span class=err>BAD</span><span class=w> </span><span class=err>-</span><span class=w> </span><span class=err>don't</span><span class=w> </span><span class=err>ever</span><span class=w> </span><span class=err>do</span><span class=w> </span><span class=err>this</span><span class=w>
</span><span class=s2>"generator-karma"</span><span class=p>:</span><span class=w> </span><span class=s2>"~1.2.0"</span><span class=p>,</span><span class=w>
</span><span class=s2>"generator-commonjs"</span><span class=p>:</span><span class=w> </span><span class=s2>"1.2.0"</span><span class=w>
</span><span class=p>}</span><span class=w>
</span><span class=p>}</span><span class=w>
</span></code></pre></div></div><h3 id=on-that-good-luck>On that, good luck!</h3><p>That’s all folks! Good luck and keep on building awesome generators.</p><p>If you’re a generator author, you really should click the <a href=https://github.com/yeoman/generator><code class=highlighter-rouge>watch</code> button on the Generator system repo</a> - this way you’ll be kept up to date on our future plan and updates. Also make sure to check the <code class=highlighter-rouge>[Composability]</code> issues, this is our next big milestone and we need your feedback!</p>Release the Kraken! - Announcing Yeoman 1.02013-08-23T00:00:00+00:00https://yeoman.io/blog/hello-1.0<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=https://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=highlighter-rouge><div class=highlight><pre class=highlight><code>npm install -g yo
</code></pre></div></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=highlighter-rouge><div class=highlight><pre class=highlight><code>npm update -g yo
</code></pre></div></div><p><strong>Note:</strong> Remember, you’ll need to install a generator using <code class=highlighter-rouge>yo</code> or <code class=highlighter-rouge>yo</code> followed by a generator name like <code class=highlighter-rouge>yo angular</code> before you see the options below :)</p><h2 id=whats-new-in-10>What’s New In 1.0?</h2><p><img alt="A new `yo` helpful prompt system" src=https://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 class=highlighter-rouge>yo</code> from <code class=highlighter-rouge>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 class=highlighter-rouge>npm install generator-angular</code>.</p></li><li><p>A new <code class=highlighter-rouge>yo</code> <a href=https://github.com/yeoman/yo/pull/36>helpful prompt system</a>. Just running <code class=highlighter-rouge>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 id=why-yeoman>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 class=highlighter-rouge>yo ____</code> command. For help getting started, try out these resources:</p><ul><li><p>The Yeoman <a href=/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 id=whos-using-yeoman>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 id=whats-next-for-yeoman>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 class=highlighter-rouge>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 id=a-busy-year>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=https://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>