http://blog.sina.com.cn/s/blog_12ce411a90102w7ie.html
前段時間找到的實習公司中在使用grunt，聽說是前端自動化工具，不過具體是什麼意思我真的完全不懂，就像當初不知道css是什麼，一模一樣。接下來這段時間要逐漸瞭解一下grunt以及所謂的自動化工具。不可能在短時間內非常熟悉，知道使用它們的大致流程就可以了。
1.什麼是前端集成解決方案？
前端集成解決方案是一套穩健強壯的工作流，包含框架和工具，便於開發者快速構建美麗實用的Web應用程序。
2.目前主流的前端集成解決方案
Yeoman，bower，grunt
3.Yeoman
在web項目的立項階段，用它來生成項目的文件結構和代碼結構。Yeoman自動將最佳實踐和工具整合進來，大大方便了我們後續的開發。WebApp的腳手架。
安裝Yeoman，一個標準的npm包。如果安裝的時候沒有-g參數，則會在當前目錄中生成一個node_modules的目錄，並且將相關的node程序安裝在這個目錄中。如果只輸入npm install，沒有包名，那麼npm會在當前目錄中尋找package.json文件，找到了，就按照這個文件中的聲明去進行安裝，主要看的就是dependencies，沒找到就報錯。
下圖是安裝Yeoman的命令，安裝完成之後執行yo -v是不能出來版本號的，只是提供了一些操作選項讓我們進行選擇。
Yeoman，bower，grunt
4.Bower，web站點的包管理器。一個web站點由很多部分組成，比如框架，庫，公共部分等，Bower就是用來跟蹤管理這些東西的。安裝和檢驗是否安裝成功，使用
npm install -g bower和bower -v，跟前面的Yeoman是完全一樣的。
5.grunt，構建工具。完成壓縮，編譯，代碼校驗，單元測試等重複且無業務關聯的工作。實際上，用下面這條命令安裝的並不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就可以使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。但是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具本身。安裝完成之後執行命令grunt，看到這個錯誤提示就證明安裝成功了。
Yeoman，bower，grunt
Yeoman，bower，grunt
cli是如何工作的？
每次運行grunt 時，cli利用node提供的require()系統查找本地安裝的 Grunt。正是由於這一機制，我們可以在項目的任意子目錄中運行grunt 。如果找到一份本地安裝的 Grunt，cli就將其加載，並傳遞Gruntfile中的配置信息，然後執行其中指定的任務。
6.使用Yeoman之前，還需要按項目的需要安裝生成器generator。使用的方式如下面第二張圖所示，在合適的文件路徑下執行第二張圖所示的命令，然後有一些互動的選項讓我們選擇，完全選擇好之後就可以生成項目目錄了。這裏要說一句，生成整個項目還是需要耗費一些時間的，下載下來的文件也很多，教程中忽略了這個過程，我還以爲是我的電腦出了問題……
Yeoman，bower，grunt
Yeoman，bower，grunt
7.使用Yeoman生成的項目是基於node構建的，所以必不可少的會有package.json配置文件。下圖中左側是生成項目的目錄結構。
打開package.json文件，dependencies用來聲明項目在生產環境中需要的依賴，而devDependencies用於聲明項目在開發過程中要依賴的node包。key是包名，value是版本號。尖括號表示只限制主版本號。在我們執行npm install的時候，如果有新的可用版本，則會自動更新新版本。可以看到，圖中要求rimraf的版本號是2.4.0，那麼直到rimraf的主版本號升級到3之前，一直會自動更新。如果把^換成~，則表示比較嚴格的版本顯示，也就是版本號的最後一位，這是如果rimraf發佈了2.4.1版本，就不會自動更新了。
Yeoman，bower，gruntYeoman，bower，grunt
8.engines指定當前項目所需的node版本。scripts，可以直接使用npm運行的腳本命令，test的意思是，如果我們在項目目錄下運行npm test，實際上執行的是
grunt test。gruntfile.js是grunt的配置文件，bower.json，bower的配置文件，指定要去網上拉取哪些相應的前端框架和組件。jshintrc是jshint的配置文件，也就是檢查代碼寫的是否合格的標準。enditconfig是有關編輯器的配置。bowerrc是bower的本身的配置文件，比如說規定拉取到的內容存放到哪裏。test目錄中的文件用來執行項目的自動化測試。bower_components就是用來存放bower從線上拉取下來的前端框架。
app目錄是最重要的，存放整個項目的源文件，相當於wamp中的www目錄。
Yeoman，bower，gruntYeoman，bower，grunt
9.下面是bower的使用，進入到一個合適路徑的文件夾中，執行下面的命令
Yeoman，bower，grunt
安裝成功之後，項目目錄下會有一個bower_components的目錄，進入到這個目錄之後，就能看到剛纔下載好的jquery了。如果我們需要的文件比較小衆，沒有在bower註冊，還可以通過其他方式安裝。
<1>github的短寫，也就是github項目主頁左上角的用戶名/倉庫名。
<2>項目完整的github地址，相當於克隆的那種形式。
<3>如果需要使用的框架或者組件沒有在github上，還可以直接通過url進行安裝。
Yeoman，bower，gruntYeoman，bower，grunt
10.通過bower init命令，我們可以自己生成bower.json文件，這個過程中會有一些選項讓我們進行選擇，全部按照對應的需要選擇即可。在我的windows系統中，需要用原生的cmd來進行這個操作，使用git bash不支持交互的輸入，會報錯。
11.使用vim自己生成一個bowerrc文件，並進行必要的配置。這些東西我目前不需要，就截取了視頻教程中的演示代碼。bower下載下來的組件，我們在項目中還是需要手動引入到頁面中的，所以bower還需要與grunt結合起來，在使用的時候也變得方便和快捷。
Yeoman，bower，grunt
12.使用Yeoman生成一個項目，打開其中的gruntfile.js，進行分析。
use strict表示文件中的代碼全部遵守es5的嚴格模式，嚴格模式體現了JS更合理，更安全，更嚴謹的發展方向。
Yeoman，bower，grunt
每一個gruntfile和grunt的插件都有下面這樣一個最外層的基本結構，所有的grunt配置以及邏輯代碼都要放在這個函數中才能生效。
Yeoman，bower，grunt
grunt把代碼壓縮，目錄清除，創建目錄等操作稱爲task，在initconfig中，我們配置的是一個又一個的單元task，每一個task都可以單獨存在和執行。
Yeoman，bower，grunt
如下圖所示的config和watch，它們的區別在於，我們有一個真實存在的task叫做grunt-contrib-watch，這個task在運行的時候，會嘗試讀取initConfig中的同名屬性，也就是watch這個配置項，然後按照這個配置項的設定來運行。但是並沒有哪一個task叫做config，也就意味着並沒有哪個task會讀取這裏config這個配置項。
對於像config這種不針對任何task的屬性，grunt會把它的值作爲一個常量儲備起來，以便我們通過尖括號百分號，百分號尖括號的方式，對常量加以引用。
Yeoman，bower，grunt
有一種常用的寫法是這樣的，意思是把package.json文件中的信息讀取進來，用作配置項常量存儲起來。
Yeoman，bower，grunt
如何指定grunt去加載指定的task？
Yeoman，bower，grunt
如果我們想加載多個task，有一個npm組件，只需要引用它，就可以將所有package.json文件中聲明的grunt-開頭的依賴項全部加載進來。
Yeoman，bower，grunt
grunt的task是任務，在task下面，我們認爲除了options之外的任意命名的屬性都是target，而options屬性對應的，是我們爲這個task，或者說這個task下的某一個target設定的配置項。
task的運行方式，就是grunt task名字。默認情況下，grunt會運行task下面所有的target，如果只想運行其中的一個，則使用task:target這種方式。
如何組合多個task同時運行？如下圖，指定一個組合後的task的名字叫serve，後面可以跟一個函數或者數組。如果是函數，則通過grunt.task.run指定一個又一個task，如果是數組的形式，則在後邊直接跟要運行的task。而組合後的task可以被再次組合。
Yeoman，bower，grunt Yeoman，bower，grunt
組合task和單個task的運行方式相同，都是grunt task名字。如果直接執行grunt，後面什麼都不跟，則會執行default這個task。
Yeoman，bower，grunt
13.從無到有構建grunt項目。
<1>在文件夾根目錄下執行npm init命令，生成一個基本的package.json文件，根據系統提出的交互問題一一設置即可。
<2>引入grunt，在根目錄下執行下面的命令，後面的選項是爲了在安裝的同時添加到package.json文件中的devdependencies。如果安裝的時候，後面跟的只是save，則會把依賴項添加到dependencies中。
Yeoman，bower，grunt
<3>再安裝兩個插件
Yeoman，bower，grunt
Yeoman，bower，grunt
<4>新建一個Gruntfile.js文件並編寫它。還要安裝兩個官方提供的task，文件拷貝和文件刪除。
Yeoman，bower，grunt
Yeoman，bower，grunt
<5>配置Gruntfile.js成這個樣子，然後運行grunt copy命令即可複製文件，把app目錄下的index.html複製到dist目錄下的index.html。
Yeoman，bower，grunt
<6>配置task下面的target可以有多種格式，最終的效果都是一樣的。注意第三種方式，它的key是目標目錄文件，value是原文件，value還可以是數組形式，但是這種形式不支持額外參數。
Yeoman，bower，grunt
Yeoman，bower，grunt
Yeoman，bower，grunt
<7>額外的參數，flatten爲true的情況下會直接把中間的各層目錄去掉。
Yeoman，bower，grunt
14.開源許可證。MIT > BSD>ISC >Apache > GPL。
Yeoman，bower，grunt
15.組合任務serve。使用webapp生成器來生成一個測試項目，運行grunt serve，會直接打開默認瀏覽器，並且定位到localhost:9000端口，頁面內容是Yeoman自動生成的項目站點。這個組合任務可以讓我們實時預覽本地項目在瀏覽器中的渲染情況，當我們修改項目文件的時候，瀏覽器會自動刷新，還是比較神奇的！
這時還不能通過本機的IP地址訪問到項目站點，需要執行下面這條命令纔可以。並且只要能連通本機的設備，都能訪問站點。
Yeoman，bower，grunt
16.組合任務serve會運行一系列的task
<1>clean:server，清空.tmp目錄。
<2>wiredep，通過bower.json這個文件中的配置找到components依賴，並引入到指定的html或者css文件中。通過src指定我們要處理的文件，ignorePath指定我們在插入引用文件的時候，排除掉filePath中的哪一部分。exclude指定在插入的過程中要排除的待插入文件。
<3>concurrent:server，默認情況下grunt的task都是串行的，一個執行完了另一個才繼續執行，這對於那些沒有先後依賴關係的task來說，完全沒有必要，這個target可以讓它們並行執行。
<4>autoprefixer，自動添加css瀏覽器前綴。
<5>watch。files用於指定監聽的文件，tasks用來指定當被監聽的文件發生改變的時候要執行的task。
17.組合任務test的使用
<1>判斷target是否爲watch，如果不是watch，則執行三個前置task。
Yeoman，bower，grunt
<2>接下來是connect:test。
<3>運行mocha這個task。mocha是一個js的測試框架，可以跑在nodejs或者瀏覽器中。urls指定訪問哪個web server頁面內容來執行測試用例。nodejs的尋路規則是，先聲明，先尋路，一旦命中，不再繼續尋找。
Yeoman，bower，grunt
18.組合任務build的使用。逐個執行以下task，全部瞭解這些東西對於我現在的水平來說是很困難的，因爲其中每個任務對應的知識點並不僅僅是知識點本身，還涉及到許多相關知識。
Yeoman，bower，grunt
19.
20.