前端自動化開發流程

安裝 Node.js 和 npm

自行百度吧，我 Node.js 安裝很久了, 最好仍是看官方文檔 。

安裝 Yeoman

我這裏不少時候都須要使用 sudo 身份運行 。

sudo npm install -g yo

檢查是否安裝成功 。

yo -v && bower -v && grunt --version

若是安裝成功，應該打印出四個版本號 。

安裝 angular 生成器

sudo npm install -g generator-angular

建立項目

mkdir myproject
cd myproject
sudo yo angular          // 以超級管理員的身份運行angular 生成器，避免用戶權限問題 
// 下面的內容根據自身須要選擇
No          // 不使用 Sass
Yes         // 使用 Bootstrap
enter       // 回車後等待它本身完成基本框架

過程如圖:

---

應用目錄：

啓動服務器

grunt serve

---

執行結果如圖：同時將打開瀏覽器。

---

在終端按 Ctrl+c 能夠退出。

測試項目

命令以下：

grunt test

執行結果如圖：

上線前的優化

如今建立一個上線版本。 咱們須要規範代碼、跑測試、壓縮JS和CSS代碼（減小網絡請求）、優化圖片還有編譯使用了預處理的代碼，讓咱們的應用盡量的精簡。
很是神奇的是，上面的工做咱們都能經過下面這行命令實現：

grunt

這行命令會遍歷Yeoman生成的Grunt任務和配置，而後建立出應用的過渡版本。過一會命令行中會顯示出應用的結構和生成這個應用總共花費的時間，以及完成每一項任務所花費的時間。

此時咱們應用的目錄下就多了一個 dist 的文件夾。

若是想在本地查看這個應用的話，運行下面這行命令：

grunt serve:dist

它會生成你的項目而且啓動本地的服務器。

參考資料

伯樂在線的翻譯文章：Yeoman官方教程：用Yeoman和AngularJS作Web應用