上兩遍文章介紹了前端模塊化開發（以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~