gulp入門

         gulp是基於Nodejs的自動化任務工具，相似java中的ant，結合相關插件可方便的完成javascript/coffee/sass/less/html/image/css等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。很好的利用了Nodejs的Stream和pipe，前一級輸出直接爲後一級的輸入，操做很是方便。在前端主要有如下用途：

gulp API：task、src、dest、watch

gulp.task(name[, deps], fn)該方法用於定義一個gulp任務。 

name 任務名稱，不能包含空格 

deps 該任務依賴的任務，依賴任務的執行順序跟在deps中聲明的順序一致 

fn 該任務調用的插件操做 

gulp.src(globs[, options]) 方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件. 

globs 須要處理的源文件匹配符路徑 

options 有3個屬性buffer、read、base 

globs 的文件匹配說明：  

「src/a.js」：指定具體文件；

「*」：匹配全部文件 例：src/*.js(包含src下的全部js文件)；

「**」：匹配0個或多個子文件夾 例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；

「{}」：匹配多個屬性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的全部jpg/png/gif文件)；

「!」：排除文件 例：!src/a.js(不包含src下的a.js文件)；

options 的三個屬性說明：  

options.buffer ： 類型： Boolean 默認：true 設置爲false，將返回file.content的流而且不緩衝文件，處理大文件時很是有用； 

options.read ： 類型： Boolean 默認：true 設置false，將不執行讀取文件操做，返回null； 

options.base ： 類型： String 設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接 

gulp.dest(path[, options]) dest() 方法是指定處理完後文件輸出的路徑； 

path 指定文件輸出路徑，或者定義函數返回文件輸出路徑亦可 

options 有2個屬性cwd、mode 

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) watch() 方法是用於監聽文件變化，文件一修改就會執行指定的任務. 

glob 須要處理的源文件匹配符路徑 

opts 具體參看 https://github.com/shama/gaze ；  

tasks 須要執行的任務的名稱數組 

cb(event) 每一個文件變化執行的回調函數  每當監視的文件發生變化時，就會調用 cb 函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息: 

type :屬性爲變化的類型，能夠是 added , changed , deleted 

path :屬性爲發生變化的文件的路徑 

gulp的經常使用插件

gulp-uglify 使用gulp-uglify壓縮javascript文件，減少文件大小。

gulp-rename 用來重命名文件流中的文件。用 gulp.dest() 方法寫入文件時，文件名使用的是文件流中的文件名，若是要想改變文件名，那能夠在以前用 gulp-rename 插件來改變文件流中的文件名。 

gulp-minify-css 壓縮css文件時並給引用url添加版本號避免緩存:

gulp-htmlmin 使用gulp-htmlmin壓縮html，能夠壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操做。

gulp-concat 用來把多個文件合併爲一個文件,咱們能夠用它來合併js或css文件等，這樣就能減小頁面的http請求數了.

gulp-imagemin :壓縮圖片文件 

gulp-jshint :偵測javascript代碼中錯誤和潛在問題的工具 

gulp的問題和缺陷

問題很難定位，運行中間沒有辦法debug，console.log() 也不能很好的定位問題。

task串行執行有問題。

來自爲知筆記(Wiz)