前言
當項目達到一定規模時，相信每個人都在煩惱，目錄結構、各種包、依賴的安裝，這些是很影響效率的。所以呢，一個神奇的腳本架---Yeoman出現了。那什么是腳本架呢，官網解釋是這樣的
Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive
簡單來說，就是一切幫你自動達好框架，你只要按著他的生成器教程來編寫代碼就可以了，Yeoman官網
安裝Yeoman
準備
在安裝Yeoman之前應該先搭好環境，應該是什么環境呢，當然是Node了，這個就不多解釋了，Node安裝
安裝 Yo
很簡單，把他安裝到全局里，命令如下
npm install -g yo
安裝生成器（Generators）
安裝好yo 之后呢，我們需要在安裝我們需要的生成器，什么是生成器呢？其實就是項目模板，而Yo只是創建這模板的指揮員而已
所以，我們需要選擇我們復合需求的生成器，官網里已經有很多已經搭建好的生成器，詳情
而命令也很簡單，以我后面會詳細講的gulp-Angular為例
在這之前，先安裝依賴的gulp和bower
npm install -g yo gulp bower
然后，安裝生成器
npm install -g generator-gulp-angular
運行生成器
安裝完成后，我們先創建一個我們的項目目錄，并進入目錄
mkdir my-new-project && cd $_
然后運行我們的生成器
yo gulp-angular
之后只要按提示選擇我們需要安裝的包就可以了
Gulp-Angular生成器簡單解析
配置選擇：angular,ui-router,bootstrap,jq,es6,resource
生成目錄
當以上都執行完以后，應該會呈現如下目錄
如果沒有bower_componets或者node_modules目錄，那就需要手動安裝了,執行
npm install // 生成node_modules
bower install // 生成bower_componets
bower_componets: bower.json中的依賴包目錄
e2e: 測試目錄
gulp: gulp配置目錄
node_modules: package.json里面依賴包目錄
src: 源文件目錄（也就是我們主要編碼，處理過的）
.bowerrc: bower配置文件，可以設置安裝位置
.gitignore: 配置Git上傳時忽略文件名
bower.json: bower 安裝的依賴配置
gulpfile.js: gulp 運行的入口文件，和makefile同理
karma.conf.js: karma 測試文件
package.json: npm 安裝的配置
protractor.conf.js: Angular 專門的測試框架
接著，在項目根目錄執行
gulp
會多出.tmp和dist目錄
.tmp: 處理過程的臨時文件
-
dist: 進行各種注射，壓縮等處理后的項目文件
此處輸入圖片的描述
Gulp 運行
其實腳本架之所以能高效率的幫助我們完成項目的構建，這完全歸功于這神奇的Gulp，用自動化構建工具增強你的工作流程
當運行Gulp時，其實里面發生了很多事情，現在我就開始簡單歸納一下流程
通過src/app 下的index.module.js和index.scss文件作為src下其他js和scss文件的接入口，全部導入到這兩個文件中
將index.module.js進行各種處理后，輸出到./tmp/serve/app目錄下的index.module.js文件
將index.scss各種scss文件的注入后，輸出到./tmp/serve/app目錄下的index.scss文件
把.tmp/serve/app和bower_componets下的css與js文件通過link與script注射到src目錄下的index.html文件里，然后輸出到.tmp/serve下的index.html文件
將.tmp/serve下的index.html所有script標簽的js文件合并壓縮輸出到dist/scripts目錄下。其中,app..js為用戶自己編寫代碼的輸出文件，vendor..js為所有js**依賴的輸出文件
將.tmp/serve下的index.html所有link標簽的css文件合并壓縮輸出到dist/styles目錄下。其中,app..css為用戶自己編寫代碼的輸出文件，vendor..css為所有css**依賴的輸出文件
bower_componets目錄中的字體文件輸出到dist/fonts目錄中
最后將其他文件原樣輸出到dist目錄中，并對src目錄下所有html與scss文件以及項目根目錄下的bower.json文件進行監視
Gulp 文件
conf.js: 提供一些全局變量
-
build.js: 作為第一個最主要的任務，將其他任務結合構建起來，關鍵模塊如下
- useref: 通過``等標志，將在其中的標簽標示的文件輸出成一個文件和一個標簽
-
inject.js: 負責將js和css文件注射進html文件，關鍵模塊如下
inject: 通過``等標志將指定的源文件文件注入
wiredep: 通過``等標志將bower.json依賴的文件注入
styles.js: 將src下和bower的scss文件注入到index.scss中，并編譯后輸出到./tmp/serve/app目錄下的index.scss文件
scripts.js: 將index.module.js進行各種處理后，輸出到./tmp/serve/app目錄下的index.module.js文件
server.js: 處理一些
gulp command和服務的開啟watch.js: 對文件進行監視
其他兩個: 測試
