index.html

---
layout: default
---
<article>
  <header>
    <div class="strikethrough strikethrough-image">
      <h1><img src="assets/img/yeoman-header.png"></h1>
    </div>
  </header>
  <section>
    <h1><span hidden>Yeoman: </span>Modern Workflows for Modern Webapps</h1>
    <p><a href="http://github.com/yeoman/yeoman">Yeoman</a> is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.</p>
    <h2 class="hero-title">My features</h2>
    <div class="row features">
      <ul class="span5">
        <li>
          <i class="icon-star"></i> <strong>Lightning-fast scaffolding</strong> — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.<p></p>
        </li>
        <li>
          <i class="icon-refresh"></i> <strong>Automatically compile CoffeeScript &amp; Compass</strong> — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.<p></p>
        </li>
        <li>
          <i class="icon-cog"></i> <strong>Automatically lint your scripts</strong> — All your scripts are automatically run against jshint to ensure they're following language best-practices.<p></p>
        </li>
        <li>
          <i class="icon-upload"></i> <strong>Built-in preview server</strong> — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.<p></p>
        </li>
        <li>
          <i class="icon-picture"></i> <strong>Awesome Image Optimization</strong> — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.<p></p>
        </li>
        <li>
          <i class="icon-wrench"></i> <strong>AppCache manifest generation</strong> — I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.<p></p>
        </li>
        <li>
          <i class="icon-tasks"></i> <strong>Killer build process</strong> — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to.<p></p>
        </li>
        <li>
          <i class="icon-inbox"></i> <strong>Integrated package management</strong> — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser.<p></p>
        </li>
        <li>
          <i class="icon-chevron-right"></i> <strong>Support for ES6 module syntax</strong> — Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.<p></p>
        </li>
        <li>
          <i class="icon-ok"></i> <strong>PhantomJS Unit Testing</strong> — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.<p></p>
        </li>
      </ul>
    </div>
  </section>
  <hr>
  <section>
    <h2>Can I help you get started?</h2>
    <h2><span class="step">Step 1:</span> Install me</h2>
    Open up a terminal and enter in the following:
    <pre class="prettyprint">
    $ curl -L get.yeoman.io | bash
    </pre>
    <p>This will check your system to see what's already installed. You'll need a few things to use Yeoman effectively like NodeJS, Compass, Grunt, and PhantomJS. This script will suggest how to handle installing these dependencies. <a href="https://github.com/yeoman/yeoman/wiki/Manual-Install">More descriptive yeoman install instructions</a> are available as well. </p>
    <p>Note: Yeoman requires <a href="http://nodejs.org/download/">Node 0.8.x </a> currently. </p>
    <h2><span class="step">Step 2:</span> Create a new project</h2>
    <p>Next, enter in `yeoman init` in the directory you would like to scaffold your application in.</p>
    <pre class="prettyprint">
    $ yeoman init
    </pre>
    <h2><span class="step">Step 3:</span> Profit</h2>
    <p>We'll then ask you some questions to help scaffold your project out. Simple!</p>
  </section>
  <section>
    <h2>There's more!</h2>
    <p>Psst..would you like to learn how to scaffold out Backbone, Ember or Chrome Apps? Read our
    <a href="commandline.html">Command Line</a> docs for more info.</p>
    <div class="video-container">
      <iframe width="700" height="394" src="http://www.youtube.com/embed/vFacaBinGZ0?hd=1" frameborder="0" allowfullscreen></iframe>
    </div>
    <img src="assets/img/yeoman-008.png" class="character">
  </section>
  <section>
    <ul class='quick-links'>
      <li class="google-follow">
        Follow +Yeoman on
        <a href="https://plus.google.com/101063139999404044459?prsrc=3" rel="publisher" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:20px;height:20px;"/></a>
      </li>
      <li style="width: 120px; height: 25px;">
        <g:plusone size="medium" annotation="inline" width="120" href="http://yeoman.io"></g:plusone>
      </li>
      <li style="width: 220px; height: 25px;">
        <a href="https://twitter.com/yeoman" class="twitter-follow-button" data-show-count="true">Follow @yeoman</a>
      </li>
      <li style="width: 107px; height: 25px;">
        <a href="https://twitter.com/share" class="twitter-share-button"
           data-url="http://yeoman.io" data-text="Yeoman - Modern Workflows For Modern Web Apps">Tweet</a>
      </li>
    </ul>
  </section>
  <section>
    <h2>About</h2>
    <p class="credits">Yeoman is a project developed by <a href="http://github.com/paulirish">Paul Irish</a>, <a href="http://github.com/addyosmani">Addy Osmani</a>, <a href="http://github.com/sindresorhus">Sindre Sorhus</a>, <a href="http://github.com/mklabs">Mickael Daniel</a>, <a href="http://github.com/ebidel">Eric Bidelman</a>, and the <a href="http://github.com/yeoman/yeoman">Yeoman Community</a>.</p>
    <p>It's built upon <a href="https://github.com/yeoman/yeoman/wiki/Tools-Used">many projects</a> including Ben Alman's awesome work on <a href="http://gruntjs.com">Grunt</a> and Mickael's work on the HTML5 Boilerplate <a href="https://github.com/h5bp/node-build-script">Node Build Script</a>.</p>
  </section>
</article>