好多年沒有接觸前端，發現前端行業發生了巨大的變化，很多新鮮術語，比如node、git、grunt、less、sass、預編譯、自動化、模組化等等，看得讓人暈頭轉向，不要擔心，我會把這之前之後學習成果都記錄下來，方便想要入門的同學交流學習！本人水平有限，錯誤在所難免，希望各位看客指正。
如題，接下就是6個準備步驟，走完這6個步驟，你會不會手癢呢。。。反正我很興奮，前端工程化了！
1、安裝ruby
為什麼要安裝ruby：mac的包管理工具homebrew、前端自動化工具yeoman依賴與ruby；
怎麼安裝：mac系統一般自帶，如果沒有ruby，具體操作詳見——
2、安裝git
為什麼安裝git：方便本地與遠端伺服器之間的互動；
怎麼配置git：詳見——
關鍵是ssh-key的配置，建立本地與遠端之間的聯絡，詳見——
3、配置nodejs
4、配置前端自動化工具yeoman、bower、grunt
具體配置詳見——
5、配置本地服務
配置本地伺服器，詳細配置見——
主要是配置：/etc/apache2/httpd.conf、extra/httpd-vhosts.conf （指定本地站點位置）、hosts（指定本地可訪問的網域名稱）這三個檔案；
6、開始專案實踐
1）專案一般託管在coding或是github上，先登入；選擇要clone的專案，通過ssh-key複製專案的位址；
2）通過前端自動化工具新建自己的專案；
通過上述步驟，我們就踏上了高大上的前端之路啦！
前端自動化工具 gulp
gulp是乙個前端自動化構建工具，主要用來設定程式自動處理靜態資源的工作。使用gulp，可以輕鬆實現對html，css，js進行壓縮的目的。產品發布時，可以有效縮小 大小。gulp是nodejs的乙個工具，因此可以使用npm進行安裝。npm install gulp在前端專案的根目錄，通過編寫gul...
前端自動化工具plopjs
plop對於模板 的處理選擇了 handlebars 作為模板 通過自動化工具減少開發中重複 的書寫 新建一容器元件用於展示訊息列表，元件名為message 使用plop前 在專案的適當目錄下新建message index.js檔案，message index.less檔案。在message ind...
前端工程自動化構建總結
總的來說，需求就兩點，一是需要乙個http伺服器，來供手機訪問靜態資源，另乙個是監聽 的改動並自動重新整理瀏覽器。要滿足這兩個需求的第三方工具，應當不難找，事實上像fis,yeoman,vuecli這樣的工具應當都可以做到。可是我覺得它們都太複雜了，雖然我只用到其中一點點功能，但是我不得不仔細的通讀...