爲何選擇 Yeoman 及 Yeoman 的安裝

轉載自http://blog.sina.com.cn/s/blog_761dcfc60101dii0.html

爲何選擇 Yeoman 及 Yeoman 的安裝

  (2014-05-12 20:30:56)

轉載▼

標籤：  yeoman   網絡前端   grunt   bower   安裝

分類： 學習

原創

今天向您介紹一個我剛接觸到的比較新的網絡前端開發工具： 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 官網