摘要：通常情況下我們不需要用到。為任務名請不要在名字中使用空格是當前定義的任務需要依賴的其他任務，為一個數組。為要監視的文件匹配模式，規則和用法與方法中的相同。

1.首先確保你已經正確安裝了nodejs環境。然后可以全局方式安裝gulp：

$ npm install -g gulp

我們可以檢查一下gulp版本

$ gulp -v

這樣就完成了對全局的安裝
2.如果想在安裝的時候把gulp寫進項目package.json文件的依賴中，則可以加上--save-dev：

$ npm install --save-dev gulp

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

這其實在composer安裝依賴包是一樣的 一個存在require一個存在require-dev

1.和其他的構建工具一樣gulpjs也需要一個相應的配置文件gulpfile.js 執行

$ touch gulpfile.js

2.首先是一個簡單的egulpfile.js內容:

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

3.運行gulp

$ gulp

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

這里默認的名為 default 的任務（task）將會被運行，但是這個任務并未做任何事情。
如果想要多帶帶執行特定的任務，請輸入

gulp  

gulp只有五個方法:task run watch src dest

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

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

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

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

當有多個匹配規則時 可以傳入數組 如:

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

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

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

gulp.src(["!a*.js",*.js]) //不會排除任何文件，因為排除模式不能出現在數組的第一個元素中

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

path為寫入文件的路徑

options為一個可選的參數對象，通常我們不需要用到

gulp的運行流程大致是這樣的:

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

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

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

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

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

即使我們給它傳入一個帶有文件名的路徑參數，然后它也會把這個文件名當做是目錄名，例如：

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()方法配置參數中的base屬性，我們可以更靈活的來改變gulp.dest()生成的文件路徑。
當我們沒有在gulp.src()方法中配置base屬性時，base的默認值為通配符開始出現之前那部分路徑，例如：

gulp.src("app/src/**/*.css") //此時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參數，此時base路徑為script
   //假設匹配到的文件為script/lib/jquery.js
   .pipe(gulp.dest("build")) //此時生成的文件路徑為 build/lib/jquery.js    

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

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

name 為任務名(請不要在名字中使用空格)

deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢后才開始執行。如果沒有依賴，則可省略這個參數

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

gulp中執行多個任務，我們的項目里肯定會有處理類似css js images fonts 這樣的靜態文件的幾個任務
可以通過任務依賴來實現。例如我想要執行one,two,three這三個任務，那我們就可以定義一個空的任務，然后把那三個任務當做這個空的任務的依賴就行了：

//只要執行default任務，就相當于把css,images,scripts這三個文件任務執行了
gulp.task("default",["css","images","scripts"]);

如果任務相互之間沒有依賴，任務會按你書寫的順序來執行，如果有依賴的話則會先執行依賴的任務。

在處理所依賴的任務是異步的這樣的應用場景也是有幾種解決方案的：

依賴任務異步執行

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

gulp.watch()用來監視文件的變化，當文件發生變化后，我們可以利用它來執行相應的任務，例如文件壓縮等。

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

opts 為一個可選的配置對象，通常不需要用到

tasks 為文件變化后要執行的任務，為一個數組

每當監視的文件發生變化時，就會調用這個函數,并且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性為變化的類型，可以是added,changed,deleted；path屬性為發生變化的文件的路徑

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.自動加載 gulp-load-plugins

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

在使用gulp插件時都需要require進來 而這個插件很好的解決了這個問題

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

因為gulp-load-plugins是通過你的package.json文件來加載插件的，所以必須要保證你需要自動加載的插件已經寫入到了package.json文件里，并且這些插件都是已經安裝好了的

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

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

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

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進行壓縮
    .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進行壓縮
    .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"));
});

當然還有其他非常有用插件 gulp 插件庫

gulp Api文檔

前端構建工具gulp