摘要：通常情況下我們不需要用到。為任務(wù)名請(qǐng)不要在名字中使用空格是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。為要監(jiān)視的文件匹配模式，規(guī)則和用法與方法中的相同。

1.首先確保你已經(jīng)正確安裝了nodejs環(huán)境。然后可以全局方式安裝gulp：

$ npm install -g gulp

我們可以檢查一下gulp版本

$ gulp -v

這樣就完成了對(duì)全局的安裝
2.如果想在安裝的時(shí)候把gulp寫進(jìn)項(xiàng)目package.json文件的依賴中，則可以加上--save-dev：

$ npm install --save-dev gulp

其中--save-dev和--save的區(qū)別這里也有清楚的解釋

這其實(shí)在composer安裝依賴包是一樣的 一個(gè)存在require一個(gè)存在require-dev

1.和其他的構(gòu)建工具一樣gulpjs也需要一個(gè)相應(yīng)的配置文件gulpfile.js 執(zhí)行

$ touch gulpfile.js

2.首先是一個(gè)簡單的egulpfile.js內(nèi)容:

var gulp = require("gulp");
gulp.task("default",function(){
    // 將你的默認(rèn)的任務(wù)代碼放在這
});

3.運(yùn)行gulp

$ gulp

要運(yùn)行gulp任務(wù)，只需切換到存放gulpfile.js文件的目錄，然后在命令行中執(zhí)行gulp命令就行了，gulp后面可以加上要執(zhí)行的任務(wù)名，例如gulp task1，如果沒有指定任務(wù)名，則會(huì)執(zhí)行任務(wù)名為default的默認(rèn)任務(wù)

這里默認(rèn)的名為 default 的任務(wù)（task）將會(huì)被運(yùn)行，但是這個(gè)任務(wù)并未做任何事情。
如果想要多帶帶執(zhí)行特定的任務(wù)，請(qǐng)輸入

gulp  

gulp只有五個(gè)方法:task run watch src dest

1.gulp.src(globs[, options])

globs參數(shù)是文件匹配模式(類似正則表達(dá)式),他的類型是String或Array,用來匹配文件路徑(包括文件名)，當(dāng)然這里也可以直接指定某個(gè)具體的文件路徑。當(dāng)有多個(gè)匹配模式時(shí)，該參數(shù)可以為一個(gè)數(shù)組。

options為可選參數(shù)。通常情況下我們不需要用到。

我們這里簡單可以理解為這個(gè)方法就是讀取你需要操作的文件的

當(dāng)有多個(gè)匹配規(guī)則時(shí) 可以傳入數(shù)組 如:

//使用數(shù)組的方式來匹配多種文件
gulp.src(["js/*.js","css/*.css","*.html"])

除此之外 數(shù)組還可以進(jìn)行排除的匹配(ps:數(shù)組的第一個(gè)元素不能進(jìn)行排除模式)

gulp.src([*.js,"!a*.js"]) //    匹配所有js文件，但排除掉以a開頭的js文件

gulp.src(["!a*.js",*.js]) //不會(huì)排除任何文件，因?yàn)榕懦Ｊ讲荒艹霈F(xiàn)在數(shù)組的第一個(gè)元素中

2.gulp.dest(path[, options])
簡單的說gulp.dest()是用來寫文件的

path為寫入文件的路徑

options為一個(gè)可選的參數(shù)對(duì)象，通常我們不需要用到

gulp的運(yùn)行流程大致是這樣的:

gulp的使用流程一般是這樣子的：首先通過gulp.src()方法獲取到我們想要處理的文件流，

然后把文件流通過pipe方法導(dǎo)入到gulp的插件中，最后把經(jīng)過插件處理后的流再通過pipe方法導(dǎo)入到gulp.dest()中，

gulp.dest()方法則把流中的內(nèi)容寫入到文件中，這里首先需要弄清楚的一點(diǎn)是，

我們給gulp.dest()傳入的路徑參數(shù)，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，

它生成文件的文件名使用的是導(dǎo)入到它的文件流自身的文件名，所以生成的文件名是由導(dǎo)入到它的文件流決定的，

即使我們給它傳入一個(gè)帶有文件名的路徑參數(shù)，然后它也會(huì)把這個(gè)文件名當(dāng)做是目錄名，例如：

var gulp = require("gulp");
gulp.src("script/jquery.js")
    .pipe(gulp.dest("dist/foo.js"));
//最終生成的文件路徑為 dist/foo.js/jquery.js,而不是dist/foo.js

通過指定gulp.src()方法配置參數(shù)中的base屬性，我們可以更靈活的來改變gulp.dest()生成的文件路徑。
當(dāng)我們沒有在gulp.src()方法中配置base屬性時(shí)，base的默認(rèn)值為通配符開始出現(xiàn)之前那部分路徑，例如：

gulp.src("app/src/**/*.css") //此時(shí)base的值為 app/src

gulp.src()的bade屬性可以在options里指定

gulp.src("client/js/**/*.js", { base: "client" })
  .pipe(minify())
  .pipe(gulp.dest("build"));  // 寫入 "build/js/somedir/somefile.js"
  
gulp.src(script/lib/*.js, {base:"script"}) //配置了base參數(shù)，此時(shí)base路徑為script
   //假設(shè)匹配到的文件為script/lib/jquery.js
   .pipe(gulp.dest("build")) //此時(shí)生成的文件路徑為 build/lib/jquery.js    

我們可以這樣理解:
上面我們說的gulp.dest()所生成的文件路徑的規(guī)則，其實(shí)也可以理解成，用我們給gulp.dest()傳入的路徑替換掉gulp.src()中的base路徑，最終得到生成文件的路徑。

3.gulp.task(name[, deps], fn)

name 為任務(wù)名(請(qǐng)不要在名字中使用空格)

deps 是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。當(dāng)前定義的任務(wù)會(huì)在所有依賴的任務(wù)執(zhí)行完畢后才開始執(zhí)行。如果沒有依賴，則可省略這個(gè)參數(shù)

fn 為任務(wù)函數(shù)，我們把任務(wù)要執(zhí)行的代碼都寫在里面。該參數(shù)也是可選的。

gulp中執(zhí)行多個(gè)任務(wù)，我們的項(xiàng)目里肯定會(huì)有處理類似css js images fonts 這樣的靜態(tài)文件的幾個(gè)任務(wù)
可以通過任務(wù)依賴來實(shí)現(xiàn)。例如我想要執(zhí)行one,two,three這三個(gè)任務(wù)，那我們就可以定義一個(gè)空的任務(wù)，然后把那三個(gè)任務(wù)當(dāng)做這個(gè)空的任務(wù)的依賴就行了：

//只要執(zhí)行default任務(wù)，就相當(dāng)于把css,images,scripts這三個(gè)文件任務(wù)執(zhí)行了
gulp.task("default",["css","images","scripts"]);

如果任務(wù)相互之間沒有依賴，任務(wù)會(huì)按你書寫的順序來執(zhí)行，如果有依賴的話則會(huì)先執(zhí)行依賴的任務(wù)。

在處理所依賴的任務(wù)是異步的這樣的應(yīng)用場景也是有幾種解決方案的：

依賴任務(wù)異步執(zhí)行

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

gulp.watch()用來監(jiān)視文件的變化，當(dāng)文件發(fā)生變化后，我們可以利用它來執(zhí)行相應(yīng)的任務(wù)，例如文件壓縮等。

glob 為要監(jiān)視的文件匹配模式，規(guī)則和用法與gulp.src()方法中的glob相同。

opts 為一個(gè)可選的配置對(duì)象，通常不需要用到

tasks 為文件變化后要執(zhí)行的任務(wù)，為一個(gè)數(shù)組

每當(dāng)監(jiān)視的文件發(fā)生變化時(shí)，就會(huì)調(diào)用這個(gè)函數(shù),并且會(huì)給它傳入一個(gè)對(duì)象，該對(duì)象包含了文件變化的一些信息，type屬性為變化的類型，可以是added,changed,deleted；path屬性為發(fā)生變化的文件的路徑

gulp.watch("js/**/*.js", function(event){
    console.log(event.type); //變化類型 added為新增,deleted為刪除，changed為改變 
    console.log(event.path); //變化的文件的路徑
}); 

gulp.watch("js/**/*.js", function(event) {
  console.log("File " + event.path + " was " + event.type);
});

gulp 插件庫

1.自動(dòng)加載 gulp-load-plugins

安裝: npm install --save-dev gulp-load-plugins

在使用gulp插件時(shí)都需要require進(jìn)來 而這個(gè)插件很好的解決了這個(gè)問題

gulp-load-plugins并不會(huì)一開始就加載所有package.json里的gulp插件，而是在我們需要用到某個(gè)插件的時(shí)候，才去加載那個(gè)插件。

因?yàn)?strong>gulp-load-plugins是通過你的package.json文件來加載插件的，所以必須要保證你需要自動(dòng)加載的插件已經(jīng)寫入到了package.json文件里，并且這些插件都是已經(jīng)安裝好了的

下面這是一段一段很方便使用其他插件的load-plugins代碼(其實(shí)就是匹配到package.json里的插件):

var plugins = require("gulp-load-plugins")({
  pattern: ["gulp-*", "gulp.*"],
  replaceString: /gulp[-.]/
});

這樣就可以通過 plugins.name()來使用我們的插件 舉一個(gè)簡單的使用gulp-rename這個(gè)插件的例子

gulp.task("one",function () {
    gulp.src(paths.styles.src+"/one.css")
        .pipe(plugins.rename("new.css")) //而不用聲明類似var rename = require("gulp-rename")
        .pipe(gulp.dest(paths.styles.dest));
});

2.重命名gulp-rename

安裝：npm install --save-dev gulp-rename

var rename = require("gulp-rename");
//最后將src/styles/one.css 生成到 assets/styles/new.css
gulp.task("one",function () {
    gulp.src("src/styles/one.css")
        .pipe(rename("new.css"))
        .pipe(gulp.dest("asstes/styles"));
});

3.js文件壓縮 gulp-uglify

安裝：npm install --save-dev gulp-uglify

var gulp = require("gulp"),
    uglify = require("gulp-uglify");
 
gulp.task("minify-js", function () {
    gulp.src("src/scripts/*.js") // 要壓縮的js文件
    .pipe(uglify())  //使用uglify進(jìn)行壓縮
    .pipe(gulp.dest("assets/js")); //壓縮后的路徑
});

4.文件合并 gulp-concat

安裝：npm install --save-dev gulp-concat

var gulp = require("gulp"),
    concat = require("gulp-concat")
    uglify = require("gulp-uglify");
 
//如果src/scripts下有one.js two.js three.js  那么最后合并到assets/js/all.js
gulp.task("concat", function () {
    gulp.src("src/scripts/*.js")  //要合并的文件
    .pipe(uglify())  //使用uglify進(jìn)行壓縮
    .pipe(concat("all.js"))  // 合并匹配到的js文件并命名為 "all.js"
    .pipe(gulp.dest("assets/js"));
});

5.less和sass的編譯

安裝：npm install --save-dev gulp-less npm install --save-dev gulp-sass

var gulp = require("gulp"),
    less = require("gulp-less");
 
gulp.task("compile-less", function () {
    gulp.src("src/less/*.less")
    .pipe(less())
    .pipe(gulp.dest("assets/css"));
});

當(dāng)然還有其他非常有用插件 gulp 插件庫

gulp Api文檔

前端構(gòu)建工具gulp