最近看視頻學習了前端自動化的一些知識，確實讓我大開眼界。感覺前端越來越神器了。同時跟著視頻自己也嘗試運用了一些工具去構建前端項目，但是中間遇見了很多坑，磕磕絆絆的才實現了一點功能，所以打算記錄一下學習過程中的筆記。首先列舉一下關鍵詞：NodeJS、Git、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的功能，讓我這個前端小菜鳥看的眼花繚亂的。。。
到這裡前端自動化的第一步已經邁出去了，接著學著用他們了。
2016年1月7日
（明天繼續）
