前端工程化工具的安裝和使用
前端近幾年發展比較快，出現各種前端自動化構建工具和腳手架工具。作為一名懵逼菜鳥，看著一大堆新穎名詞，感覺有點無從下手的感覺。為弄清楚各種工具的用法，自行上網瀏覽各大蝦的博客文章和上官網瀏覽官方的文檔說明。下面記錄小編個人學習的過程。
yeoman工作流，官方的解說是可以幫助你快速啟動一個新項目，提供最好的方案和工具來幫助你保持生產力。yeoman工作流包括了yo（腳手架工具）、構建工具 (Gulp, Grunt 等) 和包管理工具 (例如 npm 和 Bower)。-
yo 搭建一個新的運用, 配置你的構建設置 (例如 Gulpfile) 然后啟動相關的構建進程，管理你構建需要的依賴包（例如 npm）。
yo腳手架 -
構建系統 是用來構建，預覽，和測試你的項目。Gulp 和 Grunt 是兩個常見的選擇。
這里寫圖片描述 -
包管理工具 用來管理你的依賴，這樣你就不再需要手動下載和管理你的腳本了。 npm 和 Bower 是兩個常用的工具。
這里寫圖片描述 從官方的說明來看，小編依舊是一臉迷糊，為了弄懂各種工具的使用方法，決定從實踐出發。畢竟實踐出真知嘛。
-
要安裝yeoman工作流的工具，可能要用到npm第三方的包管理器，所以要安裝<a >Nodejs</a>(現在npm包管理器已經繼承到nodejs里面去了)，所以我們可以直接安裝nodejs就可以安裝到npm。建議選擇下載msi格式的安裝包。安裝過程很簡單，直接可以下一步就可以了。
這里寫圖片描述 -
安裝成功以后，我們進行檢驗一下。
window+R然后在彈出的窗口輸入cmd進入window的Dos命令窗口，輸入node --version && npm --version如果出現一下提示，則npm安裝成功。
這里寫圖片描述
-
接下來全局安裝yo腳手架工具，在Dos命令行工具下面運行
npm i -g yo，安裝成功以后可以直接運行yo --version檢驗yo是否安裝成功。小編安裝成功的是1.8.5的版本。
這里寫圖片描述 -
現在直接運行
yo命令，可以看到如下所示。Yeoman 它自己不能做任何操作。 每個操作都是由 generators 基本插件在 Yeoman 環境所完成的。 這里有 很多公共的 generators 并且它很容易 創建一個 generator 去匹配任何工作流。 Yeoman 總是可以為你需要的腳手架工具作出正確的選擇。小編已經安裝過了express-generator和mean-generator。如果你想安裝新的generator可以直接選擇install a generator.小編在這里不做演示，我就直接使用express的generator構建一個應用的骨架。
這里寫圖片描述 -
下面yo腳手架工具會詢問一系列問題，來構建你自己的應用。小編選的是ejs模板引擎，css編譯器是none，自動化構建工具是gulp。如下所示。
這里寫圖片描述 -
現在已經完全初始化一個express應用了，在Dos命令窗口中進入到應用項目目錄，運行
gulp，應用默認監聽3000端口，看，現在應用已經跑起來了。應用的目錄如下。
這里寫圖片描述
這里寫圖片描述 -
接下來我們在瀏覽狀態欄輸入
http://localhost：3000可以看到服務器返回的回饋信息。
這里寫圖片描述 -
對應用中的某一個文件進行修改，gulp自動重載。省下我們很多的殺死進程，重啟進程的工作。
這里寫圖片描述
- Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js是基于 Node.js構建的,利用 Node.js流的威力,你可以快速構建項目并減少頻繁的工作流。gulp與grunt相類似的東西。而bower包管理器主要是管理javascript、css、圖片等前端資源的，npm作為第三方包管理器主要是管理模塊化的后端javascript資源。
