前端工程化開發之yeoman、bower、grunt

上兩遍文章介紹了前端模塊化開發（以seaJs為例）和前端自動化開發（以grunt為例）的流程，參見：

http://www.cnblogs.com/luozhihao/p/4818782.html （前端模塊化開發）

http://www.cnblogs.com/luozhihao/p/4848709.html （前端自動化開發）

今天咱們來談談前端工程化，

談到前端工程化，它的概念可能有些似懂非懂，什么是前端工程化？前端工程化又該如何實現呢？

下面我就結合自己的一些實踐經驗及總結，以yeoman、bower、grunt為例來介紹。

首先先介紹下前端工程化的概念，我個人認為前端工程化就是將前端無序、繁雜的操作組織起來，利用工具簡化、規范前端流程，實現項目構建、開發、維護的一體化。大致如下圖所示：

ok，下面我們進去第二個問題，如何實現前端工程化？

那么，這里我就要利用工具來介紹了，利用工具（yeoman、bower、grunt）來實現從一個項目的前端構建的流程，從資源配置到本地服務器的搭建運行。

關于這三個工具這里就不做介紹了，沒有用過的童鞋可以訪問各自的官網進行了解。

yeoman（腳手架工具）： http://yeoman.io/

bower（包管理工具）: http://bower.io/

grunt（構建工具）: http://www.gruntjs.net/

一、準備工作

（1）首先得安裝nodejs，從NodeJs官網下載安裝包  http://nodejs.org/ 直接進行安裝，相信很快就能完成安裝

（2） 安裝Yo、Grunt、Bower

打開終端輸入全局安裝命令并執行：npm install -g yo grunt-cli bower

安裝完成后便可以開始構建項目了。

二、項目構建

（1）在F盤下新建test文件夾，執行命令：md test

（2）生成項目目錄及文件，執行命令：yo webapp

在這一步的時候會出現自定義安裝的選項（bootstrap、Sass、Modernizr），如果項目需要則選上，按“空格”鍵切換選擇模式，按“回車”繼續，繼續安裝后會等待一段時間。

（3）安裝局部bower和npm，執行命令：npm install && bower install

耐心等待其安裝完成：

（4）利用bower安裝項目其他文件，如jquery等，執行命令：bower install jquery

至此整個項目的目錄如下所示：

（5）建立本地測試服務器，執行命令：grunt server

這時候瀏覽器會自動為我們打開項目首頁的頁面，記住不要關閉當前cmd窗口，grunt會自動檢測本地文件是否被修改，這樣我們一旦保存修改了的項目文件，瀏覽器便可以自動為我們刷新頁面，無需我們手動刷新頁面了。

三、總結

  當我們通過瀏覽器看到 'Allo, 'Allo!界面提示時說明我們的項目構建流程至此結束了，通過以上步驟可以看出我們并沒有手動建立任何文件夾及文件，同時也沒有去官網下載任何插件及 庫，如bootstrap、jquery等，所有的流程都是通過終端命令行實現的，大大簡化了前端的工作復雜度，前端工程化的思想也體現的淋漓盡致了。

當然通過yeoman,bower,grunt還可以做很多事情，比如我們不再需要去 yui compressor 上壓縮代碼，不再需要去tinypng.com上壓縮圖片，不再需要到jshint上校驗代碼，不再需要手動刷新頁面等......

那么關于前端工程化的思想就介紹到此，over~

原創文章，轉載請注明來自 一個蘿卜一個坑  -博客園[http://www.cnblogs.com/luozhihao]