为何选择 Yeoman 及 Yeoman 的安装

今天向您介绍一个我刚接触到的比较新的网络前端开发工具： Yeoman 。

什么是Yeoman？

Yeoman是Google的团队和外部贡献者团队合做开发的一个项目。经过内部三个工具(yo,grunt,bower)的协

同工做，为开发者建立一个易用的工做流。它可让网络前端开发者快速打造一个漂亮的网络应用(web

applications) 。

Yeoman的目的不只是要为新项目创建工做流，同时仍是为了解决前端开发所面临的诸多严重问题，例如零

散的依赖关系。

Yeoman主要有三部分组成：yo、grunt、bower。这三个工具是分别独立开发的，可是须要配合使用，来实

现咱们高效的工做流模式。由于Yeoman实际上是三个工具的集合： YO 、 GRUNT 、 BOWER ，因此须要先解

释下这三个工具的用途。

    YO ：Yeoman核心工具，项目工程依赖目录和文件生成工具，项目生产环境和编译环境生成工具

    BOWER ：Web开发的包管理器，概念上相似npm，npm专一于nodeJs模块，而bower专一于CSS、

JavaScript、图像等前端相关内容的管理。须要注意的是，Bower的运行，依赖于版本控制工具git，从

github拉取以来信息。 如《Node.js介绍》所说，不少前端工具，都是由Node.js所编写的，Bower也不例

外。因此要想成功安装Yeoman,需先安装 Git。
    
    GRUNT ：前端构建工具，jquery就是使用这个工具打包的。


下面将我实际安装Yeoman的过程记录以下：

咱们如今就用Yeoman来建一个演示app,名字叫 My todos, 这个app的功能有添加todo、删除todo,用拖曳

功能重组你的todo,还有离线保存 todos。



先总览一下步骤：

步骤1：创建开发环境
步骤2：安装 Yeoman generator
步骤3: 用generator 构建你的app
步骤4: Yeoman 建立的文件目录结构一览
步骤5: 在浏览器中预览你的app
步骤6：开始写咱们的 AngularJS 应用
步骤7: 用 Bower 来安装包 (packages)
步骤8: 用 Karma 和Jasmine 测试
步骤9: 使 todo 与本地存储一致
步骤10: 准备发布你的app!

让咱们开始吧！

步骤1：创建开发环境

在安装Yeoman以前，你须要以下：
1. NodeJS v0.10.x+
2. npm v1.3.7+

最简单的方法是去 NodeJS website.网站，window 系统下载.msi, Mac系统下载.pkg, 安装后以上就全有了。
检查一下是否装好了(运行->cmd 进入Dos窗口写命令，这里不用写像下图中的"$"，图中用$是由于用的Cygwin)(另：本文中的图有的是Yeoman官网的，有的是我机器上的)：



安装Yeoman 工具包


检查一下是否都安装上了：


装好后会显示各工具版本：


步骤2：安装 Yeoman generator

敲入Yeoman 交互式命令：



用上下箭头选中 install a generator

这里咱们安装AngularJS generator


步骤3: 用generator 构建你的app

首先创建一个项目目录来存放你的 app


这时咱们已在C盘创建了一个文件夹：mytodo





咱们就默认全选module, 回车！等着瞧好了！神奇的事就要发生了！
Yeoman自动将app须要的全部文件都建造好啦！

步骤4: Yeoman 建立的文件目录结构一览



这是我装后的文件目录，下图是Yeoman网上的例子里的


我比它多了两个文件夹.git and .temp, 无论了，没少就行。刚开始装时，在app文件夹里总少一个bower_components 文件夹。在网上查了下，应该是Git没装全。把Git装好后，重走一次前面的步骤，就会好了。因此，切记，先安装好Git，再装Yeoman。

步骤5: 在浏览器中预览你的app

在命令行键入“grunt serve”，运行一个grunt task 以建立一个基于node的本地http服务器，localhost:9000 (有的为 127.0.0.1:9000 ）
   


而后浏览器就会出现你新作的App啦！




未完待续......
接上：

若想中止服务器，按 ctrl+C

让咱们来编辑一下首页文件：main.html，它在view 文件夹下。
用任何一个你喜好的文本编辑器打开main.html, 我用的是Sublime Text 2。每当你改动保存后，你会发现浏览器会自动刷新，省事儿吧？这就叫“实时载入” (live reloading),这真的很方便，能实时看到你编辑的结果。
这个功能是Gruntfile.js 实现的。

步骤6：开始写咱们的 AngularJS 应用

打开views/main.html  编辑，代码如今看起来以下：



如想copy 代码,请参见源代码出处： Yeoman

再打开 scripts/controllers/main.js ， 编辑以下：

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
    $scope.todos = ['Item 1', 'Item 2', 'Item 3'];
  });

保存，咱们的应用如今看起来是这样的：


添加一个 TODO

编辑main.html, 编辑好后以下：


保存，浏览器更新：


若是如今点 "Add",什么也不会发生，咱们下面来改变一下。
编辑main.js， 如今代码应该以下：

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
    $scope.todos = ['Item 1', 'Item 2', 'Item 3'];
    $scope.addTodo = function () {
      $scope.todos.push($scope.todo);
      $scope.todo = '';
    };
  });

保存，在浏览器第一个表单输入框中写点什么，点“Add', 它会立刻出如今你的 todo List 中！

注意：若是你连续两次输入空白内容，或连续两次输入相同内容，应用便会自动终止！

删除一个TODO

编辑main.html, 让咱们在每一个输入框后面添加一个button, 代码变成以下：


保存！看看你的浏览器，哇，你的 app 看起来好棒啊！


接下来咱们编辑main.js，以便删除功能好用， 编好后代码是这样了：

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
    $scope.todos = ['Item 1', 'Item 2', 'Item 3'];
    $scope.addTodo = function () {
      $scope.todos.push($scope.todo);
      $scope.todo = '';
    };
    $scope.removeTodo = function (index) {
      $scope.todos.splice(index, 1);
    };
  });

保存！回到浏览器，如今你能够按 X 去删除项目了，太神奇啦！
你可能注意到，咱们所作的修改并不能被保存，每当咱们刷新页面时，就回到了初始状态，不要紧，咱们会在第九步修正这个问题，不过咱们先获得下一步学学如何用bower 安装相应的packages。

步骤7: 用Bower 来安装包(packages)。

让咱们加上顺序，使咱们的 list 能够排序或分类，要实现这个，得用bower 安装 AngularUI Sortable module， 这个是Angular 的一个指令集。

咱们能够用下面的命令来看看咱们已经装了什么包

下面咱们安装它，一并安装jQuery UI


其中 --save 选项帮助你更新 bower.jason,省却你之后手动更新的麻烦。



或者用一个命令行安装：
bower install --save angular-ui-sortable jquery-ui

据个人机器运行来看，如今不用俩一块儿写，我只用了
bower list

你应该看到你已经装了angular-cookies, angular-resources, angular-route, 还有其它。




用如下命令来确认咱们要找的包是否存在：

bower search angular-ui-sortablebower install --save angular-ui-sortable
bower install --save jquery-uibower install --save angular-ui-sortable
这一个命令就同时把jquery-ui也装上了，应该是bower改进了，免得咱们麻烦了，呵呵^^

确认安装

咱们来看看 bower_components 文件夹以确保安装正确


这些新安装的包必须被列入index.html, 你能够手动将上述两项填入index.html, 可是Yeoman 将会为你自动填加。先使用ctrl+c 中止目前的命令行，再重启服务器，即再运行grunt serve。你将会看到 script 部分已填加上了 jquery-ui/ui/jquery-ui.js 和 angular-ui-sortable/sortable.js


同时在 scripts/app.js 文件里加上 ui.sortable代码，以下图：


最后，咱们该编辑main.html了，加上相应的代码后，整个 todo list部分代码以下：


回到浏览器，如今咱们能够随意拖动排序各项目啦。



太酷了！这么简单就能作出这么棒的应用？简直让人不敢相信！

步骤8: 用 Karma 和Jasmine 测试

Karma是JavaScript 的测试执行器(JavaScript test runner), Jasmine 是 Angular的一个测试框架。咱们在以前已经运行过 yo angular, 一个叫 test 的文件夹已经被部署在目录 mytodo 中，还产生了一个karma.conf 文件及Karma须要的 node 模块，咱们立刻就能够用 Jasmine来测试了，不过咱们得先看看怎么来运行测试。

运行单元测试
在命令窗口输入ctrl + C 中止grunt server。而后输入 grunt test, 你会看到浏览器打开又关闭，并有警告，不过不要紧，咱们来fix一下。

打开文件karma.conf.js 并用如下代码替换 files array :
 files: [
  'app/bower_components/jquery/jquery.js',
  'app/bower_components/jquery-ui/ui/jquery-ui.js',
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-ui-sortable/sortable.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/bower_components/angular-local-storage/angular-local-storage.js',
  'app/scripts*.js',
  'test/mock*.js',
  'test/spec*.js',
  'app/bower_components/angular-resource/angular-resource.js',
  'app/bower_components/angular-cookies/angular-cookies.js',
  'app/bower_components/angular-sanitize/angular-sanitize.js',
  'app/bower_components/angular-route/angular-route.js'
],

打开test/spec/controllers/main.js. 删掉下面语句：

it('should attach a list of awesomeThings to the scope', function () {
  expect(scope.awesomeThings.length).toBe(3);
});
替换成：
it('should have no items to start', function () {
    expect(scope.todos.length).toBe(0);
});
再次输入命令：
grunt test

到这步，个人机器并无像Yeoman网站教程上那样出现相应的信息，而是提示：

npm install karma-jasmine --save-dev

这回再输入命令：
grunt testWarning: No provider for "framework:jasmine"! (Resolving: framework:jasmine)use--force to c

到google上search了一下，找到了觖决办法：

输入命令：

又提示Can not load Chrome, it is not registered

解决办法：
用下面的命令填加 karma-chrome-launcher 到package.json文件中
npm install karma-chrome-launcher --save-dev

我机器上仍有错，先略过，按Yeoman 网站上的教程继续：

再运行grunt test, 这回应该pass



下面再多加些test:

你的 MainCtrl test script (test/spec/controllers/main.js)应该看起来是这样的:

'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('mytodoApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should have no items to start', function () {
    expect(scope.todos.length).toBe(0);
  });

  it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    expect(scope.todos.length).toBe(1);
  });

  it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    scope.removeTodo(0);
    expect(scope.todos.length).toBe(0);
  });

});

再次运行grunt test ：


你会看到三个测试项目都经过了，太棒啦！
当你的应用程序愈来愈庞大，以及有更多的开发人员加入时，进行单元测试，会使得找bug变得容易起来。而Yeoman 的自动搭建功能则会助你一臂之力。

步骤9: 使 todo 与本地存储一致

安装bower package
咱们须要另外一个Angular 的module  "angular-local-storage" , 使用下面的命令

bower install --save angular-local-storage



添加local storage
ctrl + C 退出当前命令，运行 grunt serve, 这时你会发现你的 index.html 文件底部已加了一句：

编辑 mytodoApp 应用模块 (scripts/app.js) 使它包含 LocalStorageModule ，最后代码以下:


还要编辑main.js, 代码最终以下：


这时你在浏览器里看到你的应用变成这样：

让咱们填加几项：
如今咱们刷新一下浏览器，后添加的几项仍然存在，太好啦！成功啦！

步骤10: 准备发布你的 app!

咱们来作一下发布前的优化工做：只要运行命令：
grunt

你的准备好发布的文件们如今就在dist文件夹里！你能够用 FTP 上传到你的服务器发布。

恭喜你！咱们的演示 app 终于完工啦！

想了解更多？请参阅 Yeoman 官网

 

http://blog.sina.com.cn/s/blog_761dcfc60101dii0.html