Total Pageviews

Monday 25 November 2013

基于nodejs的创建web apps的工具-yeoman

Yeoman 1.0

Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.
Our workflow is comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).
  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
All three of these 3 tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Getting started

Installation

A complete getting started guide is available but for those looking to get up and running quickly, make sure you have installed Node.js, Git and optionally, Ruby and Compass (if you plan to use Compass).
Then install the required tools globally by running:
npm install -g yo
This will install Grunt and Bower automatically.
yo can generate several types of applications, but it needs help from plug-ins, or "generators" to get the job done. To scaffold a web application, you'll need to grab the web app generator:
npm install -g generator-webapp
Note: Many generators no longer require this installation step and will automatically install yo, grunt and bower just by installing the generator directly.
You can install additional generators with npm. For example, to install the AngularJS generator: npm install -g generator-angular. Run yo for more information.

Usage

A complete workflow might look like this:
yo webapp                      # scaffold out a skeleton web app project
bower install underscore       # install a dependency for your project from Bower
grunt                          # build the application for deployment
Or with the AngularJS generator:
npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt server                      # preview your app
grunt                             # build the application for deployment

Migrating from earlier versions

If you were previously using Yeoman 0.9.x, you may have noticed a few things have changed. A migration guide is available to help you move over to 1.0. We've also written up some of the reasons behind our move.

from http://yeoman.io/
---------------------------------

Getting started with Yeoman

The Yeoman workflow is comprised of three core tools for improving your productivity and satisfaction when building a web app. These tools are:
  • yo - the scaffolding tool from Yeoman
  • bower - the package management tool
  • grunt - the build tool
Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective. Let’s walk through what these binaries can do.

yo

Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. You typically install yo and any generators you think you might use via npm.

Installing yo and some generators

First, you'll need to install yo and other required tools:
npm install -g yo
npm is the package manager for Node.js and comes bundled with it.
If you are using npm 1.2.10 or above, this will also automatically install grunt and bower for you. If you're on an older version of npm, you will need to install them manually:
# For npm versions < 1.2.10.
npm install -g grunt-cli bower
If you have installed Grunt globally in the past, you will need to remove it first: npm uninstall -g grunt
On Windows, we suggest you use an improved command line tool such as Console2 or PowerShell to improve the experience.

Basic scaffolding

To scaffold a web application, you'll need to install the generator-webapp generator:
npm install -g generator-webapp
This is the default web application generator that will scaffold out a project containing HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap. You'll have a choice during the interactive prompts to not include many of these.
Now that the generator is installed, create a directory for your new project
mkdir my-yo-project
cd my-yo-project
and then run:
yo webapp 
(运行以上命令后,遇到提示:
Easy with the "sudo"; Yeoman is the master around here.
Since yo is a user command, there is no need to execute it with superuser
permissions. If you're having permission errors when using yo without sudo,
please spend a few minutes learning more about how your system should work
and make any necessary repairs.

http://www.joyent.com/blog/installing-node-and-npm
https://gist.github.com/isaacs/579814 
还没搞明白如何解决问题

Each project created with yo will also pull in relevant Grunt tasks which the community feels is needed or useful for your workflow.
The webapp generator is considered the simplest possible start for a web app. We also provide some framework generators which can be used to scaffold out a project and later views, models, controllers and so on.

Example: Scaffolding an AngularJS app

As always, before using a new generator, you must install it from npm first:
npm install -g generator-angular
After that, create a new directory for your application, then run:
yo angular
Many generators allow you to customize your application by using flags from the initial command. As an example, with generator-angular, you can enter:
yo angular --minsafe
Here, we are first generating the file structure for a basic web application and then writing a number of boilerplate files for a new AngularJS application on top of it. This includes boilerplate directives and controllers as well as scaffolded Karma unit tests.
Scaffolding out your Angular app’s pieces
Some generators can also be used to scaffold further pieces of your application - we call these sub-generators.
In the AngularJS framework, for example, your application is made up of a number of pieces including controllers, directives and filters. You can actually scaffold out any of these pieces (and more) during your development workflow as shown below:
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService
Each framework generator has further documentation available noting what sub-generators it supports.

Creating your own generators

See Generators.

Bower

Bower is a package manager for the web which allows you to easily manage dependencies for your projects. This includes assets such as JavaScript, images and CSS. It is maintained by Twitter and the open-source community.
Managing packages using Bower can be done using the following commands:
# Search for a dependency in the Bower registry.
bower search <dep>

# Install one or more dependencies.
bower install <dep>..<depN>

# List out the dependencies you have installed for a project.
bower list

# Update a dependency to the latest version available.
bower update <dep>

Using Bower with a project scaffolded using yo

To create a basic web app with a dependency on a jQuery plug-in:
# Scaffold a new application.
yo webapp

# Search Bower's registry for the plug-in we want.
bower search jquery-pjax

# Install it and save it to bower.json
bower install jquery-pjax --save

# If you're using RequireJS...
grunt bower
> Injects your Bower dependencies into your RequireJS configuration.

# If you're not using RequireJS...
grunt bower-install
> Injects your dependencies into your index.html file.
It’s as simple as that.
Your chosen generator may not include the grunt tasks "bower" and "bower-install". You can read more about how to install and use these at grunt-bower-requirejs and grunt-bower-install.

Grunt

Grunt is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow. Many of these commands utilize Grunt tasks under the hood which are maintained by the Yeoman team.

Grunt commands

# Preview an app you have generated (with Livereload).
grunt serve

# Run the unit tests for an app.
grunt test

# Build an optimized, production-ready version of your app.
grunt
These commands can be used together with the yo binary for a seamless development workflow:
yo webapp
grunt serve
grunt test
grunt 
 
from https://github.com/yeoman/yeoman/wiki/Getting-Started