前端工程化開發之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、準備工做

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

（2）安裝Yo、Grunt、Bower

 

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

　　

 

　　 安裝完成後即可以開始構建項目了。

 

2、項目構建

　　（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會自動檢測本地文件是否被修改，這樣咱們一旦保存修改了的項目文件，瀏覽器即可以自動爲咱們刷新頁面，無需咱們手動刷新頁面了。

　　

3、總結

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

　　固然經過yeoman,bower,grunt還能夠作不少事情，好比咱們再也不須要去yui compressor上壓縮代碼，再也不須要去tinypng.com上壓縮圖片，再也不須要到jshint上校驗代碼，再也不須要手動刷新頁面等......

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