Yeoman,bower,Grunt的安裝

最近看視頻學習了前端自動化的一些知識，確實讓我大開眼界。感受前端愈來愈神器了。同時跟着視頻本身也嘗試運用了一些工具去構建前端項目，可是中間碰見了不少坑，磕磕絆絆的才實現了一點功能，因此打算記錄一下學習過程當中的筆記。

首先列舉一下關鍵詞：NodeJS、Git、Yeoman、bower、Grunt。 其中NodeJS做爲核心，在它的基礎上咱們能夠利用Yeoman、bower、Grunt這三個前端工具實現前端自動化，而Git，主要是用它自帶的 Git Bash命令行。爲啥要用Git自帶的命令行呢，這我就得吐槽一下了：網上的視頻、博客、資料、翻譯等等上面出現的有關Yeoman，Grunt這樣的例 子都特麼是用Mac OS X 下面實現的，我一個窮屌絲用windows系統的CMD跟着跟着就出問題了，換不了硬件設備，因此只能先用軟件彌補。。

下面進入主題：

第一步：下載Node並安裝。傳送門：Node官網，去上面下載適合你係統的版本，而後安裝就OK。安裝成功的驗證方式 ：cmd 中輸入 node -v ,若是輸出node版本號就說明沒有問題。

第二步：安裝Git。傳送門：下載Git ,去上面下載適合你係統的版本，而後安裝。安裝教程百度便可，可是須要注意一點，執行窗口仍是要選擇windows自帶的比較好

也就是最後一步配置要選擇 下面的選項。

這樣作只是爲了之後使用方便一點。具體方便在哪裏，不告訴大家，大家本身去試。。。。

安裝好Git 以後，桌面或者任意文件夾內點擊鼠標右鍵就會看到 Git Bash here,這樣的選項，點擊後就能夠看到咱們最主要的工具了。接下來就是安裝Yeoman、bower、Grunt這三個工具了。

這裏再提一點，由於國內的某些緣由，經過node安裝工具可能會很是慢，這裏須要咱們作一點修改，也就是使用淘寶npm鏡像。具體方法以下：

1.命令窗口（上面提到的Git Bash here ）執行：npm config set registry https://registry.npm.taobao.org

2繼續執行命令驗證：npm info underscore （若是上面配置正確這個命令會有字符串response）

切換淘寶鏡像的方法還有其餘的，感興趣的自行Google/百度。

安裝Yeoman的命令：npm install -g yo

驗證方式： yo -v 或者 yo --version 顯示版本號

安裝bower的命令 ：npm install -g bower

驗證方式： bower -v 顯示版本號

安裝grunt的命令 ：npm install -g grunt-cli

驗證方式： 輸入grunt 會有提示

到這裏基本的工具都已經安裝好了。

這裏再講一下Yeoman、bower、Grunt分別是幹什麼的。

Yeoman：我理解它的做用是生成前端項目的總體文件結構。經過Yeoman能夠生成一個簡單的可是很是完整的前端項目文件結構，這個生成的項目已是一個能夠運行的Demo,咱們能夠在這個結構上拓展和改造，實現想要的功能。

bower：它的官網上的解釋是： A package manager for the web，它就是一個依賴包管理工具，經過它咱們能夠在項目中自動生成咱們須要的依賴包例如：JQuery、angular等，不須要再去網上找到它們的文件，下載下來在複製進項目這樣繁瑣的工做。

grunt：grunt的功能就厲害了，它能夠對項目中的JS、CSS文件進行壓縮、合併、混淆等等操做，還能實現前端的自動化單元測試，各類牛X的功能，讓我這個前端小菜鳥看的眼花繚亂的。。。

到這裏前端自動化的第一步已經邁出去了，接着學着用他們了。