前言
當項目達到一定規模時,相信每個人都在煩惱,目錄結構、各種包、依賴的安裝,這些是很影響效率的。所以呢,一個神奇的腳本架---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: 對文件進行監視
其他兩個: 測試