爲什麼選擇 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。

爲什麼選擇 <wbr>Yeoman <wbr>及 <wbr>Yeoman <wbr>的安裝

先總覽一下步驟：

步驟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 的一個指令集。

我們可以用下面的命令來看看我們已經裝了什麼包

bower list

你應該看到你已經裝了angular-cookies, angular-resources, angular-route, 還有其它。




用以下命令來確認我們要找的包是否存在：

bower search angular-ui-sortable


下面我們安裝它，一併安裝jQuery UI
bower install --save angular-ui-sortable
bower install --save jquery-ui

其中 --save 選項幫助你更新 bower.jason,省卻你以後手動更新的麻煩。



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

據我的機器運行來看，現在不用倆一起寫，我只用了
bower 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網站教程上那樣出現相應的信息，而是提示：

Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine)use--force to c

到google上search了一下，找到了觖決辦法：

輸入命令：

npm install karma-jasmine --save-dev

這回再輸入命令：
grunt test

又提示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 終於完工啦！

yu_meiguang

發佈了47 篇原創文章 · 獲贊 4 · 訪問量 4萬+

私信關注

爲什麼選擇 Yeoman 及 Yeoman 的安裝

yeoman

網絡前端

grunt

bower

安裝

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

現代西班牙語第一冊單詞表

struts2 實現文件的上傳和下載

android實現對圖片的放大縮小旋轉等操作

MyBitis OR ibatis 簡單快速入門

spring包之間的依賴

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結