前端見微知著流程篇：前端開發流程總結

在以前的章節中咱們講解了前端的一些基本知識和工具的使用，包括Javascript，Angularjs，Grunt和Bower。可是在實際開發中，如何利用這些工具來進行開發呢？這節咱們就主要來說解如何利用這些工具來進行前端開發。

本篇文章參考：LET'S SCAFFOLD A WEB APP WITH YEOMAN

1.用Yeoman來創建簡單的APP項目

在這篇文章中，咱們將會創建以下的一個簡單的APP。在這個APP中，你能夠經過拖拽的方式來添加待辦事件，刪除待辦事件，管理待辦事件。

首先，在這裏，咱們須要明白一個Yeoman是幹什麼的。

Yeoman是Google提供的一個腳手架項目，其目的旨在於利用簡單的命令來管理前端開發的流程。你能夠用Yeoman方便的來預覽web項目，查看項目文件，編譯sass文件等等。它同時也可以進行單元測試，壓縮JS和圖片等等。

既然Yeoman被稱爲腳手架，那麼它通常不會單獨使用，而是和Grunt，Bower，Karma等前端工具結合使用。咱們分別來一一介紹一下：

yo：腳手架工具，用於提供各種的框架和生成器，以便於你可以更快的來搭建和開發你的web項目。

grunt：前端自動化工具，常常被用於構建，發佈和測試項目。

gulp：和Grunt相似的工具，可是更爲簡單的一種前端自動化工具。

bower：用於進行類庫依賴管理的工具，使用它，將會使您的類庫管理徹底自動化。

介紹完這幾個工具，那麼咱們就來安裝一個Yeoman generator。

2.安裝前的準備工做

在安裝Yeoman前，你須要確保如下工具已經被安裝到你的電腦中。

    Node.js v0.10.x版本及以上

    npm v2.1.0版本及以上

    git

當這些工具都安裝完畢之後，你可使用以下的命令來測試是否安裝成功：

若是你能看到如上的信息，那麼說明你的安裝就是成功的。

若是你如今的npm版本很老了，想升級到最新版本，你可使用以下的命令來進行升級：

3.安裝Yeoman工具

咱們用以下的命令，就能夠快速的將所須要的工具都安裝完畢，這裏咱們所須要的工具備：yo grunt bower，因此這裏咱們來進行安裝。安裝開始的時候，有一個橫線一直在轉圈，等三五分鐘之後，就能夠自動安裝完畢了。咱們看看安裝截圖：

從圖中咱們看到，全部的組件都被安裝到了 C:\Users\chaoyang.shi\AppData\Roaming 文件夾下，咱們須要找到這個文件夾，而後右擊文件夾的安全選項，添加一個EveryOne用戶來確保給予了充足的權限，這個是必需要作的，至少在個人機器上，由於這個沒有賦予全部權限，致使部分命令出錯。

安裝完畢以後咱們就可使用以下的命令來檢驗安裝以後的版本了：

4.安裝AngularJS generator

你能夠直接npm命令來進行安裝：

如上圖所示，安裝完畢就是這個樣子的。

前期準備工做都作好之後，下面咱們將開始真正的項目建立了。

5,建立項目

首先在你的電腦上找個地方建立一個webdemo的文件夾，我這裏爲了演示，我放到了E盤的根目錄下。

而後運行yo命令，來建立一個示例項目。

這裏首先提示咱們是否是須要安裝Angular，這裏我直接回車，代表確認安裝操做。確認以後彈出來詢問，問我需不須要用到Sass，這裏咱們用不到，因此這裏我輸入n並回車：

而後後面會繼續問我是否使用bootstrap，這裏咱們輸入Y。等所有完畢後，咱們就會看到屏幕在一直滾動輸出安裝信息了：

等到屏幕滾動到以下的位置的時候，就不會滾動了：

這時候咱們只要點擊一下回車鍵確認，而後會詢問咱們是否須要覆蓋package.json文件，咱們這裏輸入n就能夠了。

總共須要大概五分鐘左右的樣子，咱們的項目就完全的創建好了。而後咱們用sublimeText打開，就能夠清楚的見到項目結構了：

而後咱們打開Http服務器來瀏覽一番

（因爲在index.html中缺乏對BootStrap的引用，因此我這裏須要手動加一下：

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

）：

當服務器啓動之後，咱們的網站就會自動被打開，而後咱們就能看到咱們經過yo建立的項目示例了：

是否是很帶感呢？

接下來，咱們將會以這個示例項目爲主，一步一步的來打造咱們的項目。

6. 建立一個新的待辦事項模板

首先打開views文件夾下面的main.html模板，刪除其餘多餘內容，保留以下的div標籤便可。

而後打開scripts/controllers/main.js文件，修改其中內容以下：

修改完畢之後，在前臺進行綁定：

至於上面的ng-repeat,ng-model等語法，能夠參見我以前寫過的關於AngularJS的相關文章。

因爲這裏只是展現了todo集合，咱們能夠爲其添加一個新增todo項目的功能：

因爲是添加操做，因此咱們在controller裏面添加一個addTodo方法來出發添加任務的操做：

7.添加新的類庫包

因爲這裏咱們想讓當前的todo列表支持拖拽和排序操做，因此這裏咱們須要引入angular-ui-sortable包和jquery-ui包，咱們經過bower來添加，分別執行以下命令便可：

固然若是你嫌麻煩，你也能夠用前面介紹的方法，用雙&符號一次性安裝。

安裝完畢後，在bower_components文件夾中就多出來angular-ui-sortable文件夾和jquery-ui文件夾。

而後咱們從新運行grunt serve命令，在瀏覽器頁面咱們能夠看到新的angular-ui-sortable庫和jquery-ui庫的js文件已經被前臺頁面自動引用了：

爲了使用Sortable模塊，咱們還須要在scripts/app.js文件夾中對這個模塊進行注入：

如上圖所示，畫紅線的部分就是咱們注入的模塊。

而後再前臺，咱們須要更改部分html代碼以便於實現咱們的功能，更改後的html代碼以下：

到此爲止，咱們就擁有了一個能夠進行拖拽的列表顯示頁面了，運行起來的時候效果其實挺酷的。

8. 單元測試

咱們先中斷網頁瀏覽（ctrl+c），而後再命令行輸入grunt test命令，代表啓動單元測試。可是在當前的單元測試中，會有不少的warning，咱們稍後來fix掉他們，下面咱們一步一步的進行操做。

首先，打開karma.conf.js文件，咱們會發現，當咱們安裝完畢jquery-ui庫和angular-ui-sortable庫以後，bower會自動往這個文件中添加依賴：

確認了依賴存在之後，咱們打開test/spec/controllers/main.js文件，而後對其進行改造：

而後打開scripts/controllers/main.js文件，移除掉咱們早前添加的3個todo項：

而後再運行grunt test命令，能夠看到以下內容：

接下來咱們將會添加更多有意義的單元測試，來覆蓋咱們的代碼邏輯：

最後從新利用grunt test跑一遍，能夠看到4個單元測試均經過：

9.生成production項目

當咱們的開發測試都作好之後，咱們須要放到線上去，咱們能夠首先使用grunt命令來編譯和優化咱們的項目：

在肯定沒有任何錯誤之後，咱們使用grunt serve：dist命令來生成咱們的項目，同時會啓動本地服務器進行項目預覽。

而且在根目錄下面會生成一個dist文件夾，其內部的內容就是已經變異優化好的項目文件，其結構是這樣的：

咱們能夠看到，全部的css和js都已經被合併，並且被壓縮過了。

咱們在這裏只須要將其放到服務器上便可。

 

這個系列終於講完了。最後這個系列能夠說是對開頭連接的那篇文章進行的完整翻譯，可是加入了我本身的一些內容。這個系列我都是一步一步的親手敲代碼，敲配置等弄出來的，但願之後再遇到前端開發的任務時，可以輕鬆應對，同時也算是給本身的技能漲漲價吧。