摘要：前提前端工程化是如今前端團(tuán)隊規(guī)范化管理項目和代碼的概念，而前端工程化中往往是離不開前端自動化或打包工具這兩種工具。參數(shù)介紹可以理解成一種類似于正則表達(dá)式的匹配模式，其值可以為匹配形式，文件路徑，或者文件路徑數(shù)組。

前提：前端工程化是如今前端團(tuán)隊規(guī)范化管理項目和代碼的概念，而前端工程化中往往是離不開前端自動化或打包工具這兩種工具。本文將詳細(xì)介紹其中一種常用的前端自動化工具---gulp.js

- 入門：

安裝方式：

  全局安裝： npm install --g gulp
  局部（項目安裝）： npm install --save-dev gulp

gulp配置文件：

在項目根目錄下創(chuàng)建一個gulpfile.js文件，其中default任務(wù)為主任務(wù)，其他為功能任務(wù)；
語法：

var gulp = require("gulp");
gulp.task("default",function(){...});

運行方式：

在命令行中直接輸入gulp運行，或者在webstorm中在對應(yīng)的gulpfile.js點中，然后右鍵，選擇show gulp task方式就能運行；

- gulp的API：

一）gulp.src方法：

定義：該方法會匹配對應(yīng)的文件，并以虛擬文件流（包含路徑，文件名，內(nèi)容）的形式返回；

語法：gulp.src(globs [,option])

特點：因為返回的文件流是類似于Readable Streams的形式，所以可以利用pipe管道的方式傳輸，處理文件流。

參數(shù)介紹：

a）globs：可以理解成一種類似于正則表達(dá)式的匹配模式，其值可以為匹配形式，文件路徑，或者文件路徑數(shù)組。
*：匹配任何字符串但不識別路徑分隔符（‘/’）

eg： gulp.src("./build/*.js")   匹配build文件中所有js文件

**：匹配任何字符串包括‘/’

eg：gulp.src("**.js")  匹配任何路徑下的js文件

[...] ： 枚舉

eg:  gulp.src("[abc].js")     匹配a.js或者b.js或者c.js

[!...] : 枚舉中括號中以外的一切字符串

eg：gulp.src("[!abc].js")    匹配d.js等等js文件

? : 職匹配一個字符串

eg：gulp.src("?.js")   匹配a.js等等js文件

b）option：里面有buffer，read，base配置項，其中base項是關(guān)于文件流保存的路徑相關(guān)（具體放在dest方式中闡述）

二）gulp.dest方法：

定義：將文件流寫入到指定的路徑文件中，并繼續(xù)輸出該文件流；
語法：gulp.dest(path [,option])
注意事項：
a)文件流寫入的文件名只能由流入的文件流定義；
b）path是路徑，不能是文件名；
c）src中base項默認(rèn)是匹配符之前的字符串路徑，但也可以人為設(shè)置，例子闡述：

gulp.src("a/b/*/[ab].js")
    .pipe(gulp.dest("./build"))

解釋：默認(rèn)base為a/b，塞進(jìn)文件流的文件名為*/[ab].js，所以新建的文件的路徑為./build/*/[ab].js

gulp.src("a/b/*/c/d.js",{base:"a"})
    .pipe(gulp.dest("./build"))

解釋：base現(xiàn)是a，塞進(jìn)文件流的文件名為b/*/c/d.js,所以新建的文件路徑為./build/b/*/c/d.js

d）dest方法輸出的文件流也可以被pipe傳輸；

三）gulp.task方法：

定義： 在gulp中定義一個任務(wù)，其中主任務(wù)為default；
語法： gulp.task(name [,deps] ,fn)
參數(shù)：

  name是任務(wù)名；
  deps是依賴的任務(wù)數(shù)組，是在當(dāng)前任務(wù)之前執(zhí)行的；
  fn：當(dāng)前任務(wù)內(nèi)容；

情景：
a) gulp.task("default",function(){...})：最簡單模式；
b）gulp.task("default",["A1","A2"]):default是由A1,A2兩個任務(wù)組成的；
c）gulp.task("default", ["A1","A2"],function(){...}):先執(zhí)行完A1,A2，再執(zhí)行default任務(wù)；

question： 若任務(wù)列表A1,A2中，A1存在異步操作，則執(zhí)行A2時，A1還很可能未執(zhí)行完；
resolve：
A) fn任務(wù)函數(shù)可以引進(jìn)一個回調(diào)函數(shù)參數(shù)，該參數(shù)可以告訴外界該任務(wù)是否執(zhí)行完；

eg：   gulp.task("A1",function(cb){
           setTime(function(){
           console.log(1);
           cb();
           },2000);
        })
        gulp.task("A2",function(){console.log(2);})
        gulp.task("default",["A1","A2"],function(){
             console.log(3)
        })
        輸出結(jié)果為：2 1 3

B）任務(wù)函數(shù)返回一個流對象，適用于gulp.src方法；

gulp.task("A",function(){
             return gulp.src("./a.js")
                        .pipe(插件)
          })
gulp.task("deafult",["A"],function(){...})

C)返回一個Promise對象；

gulp.task("A",function(){
            return new Promise( (res,rej) => {
            })
          })
gulp.task("default",["A"]);

四）gulp.watch方法：

定義：該方法是用來監(jiān)聽文件的變化；
語法一：gulp.watch(glob [,opts] , tasks)
語法二：gulp.watch(glob [,opts] , function(event){...})
event是一個事件對象；
event.type為added（添加類型）；changed（改變類型）；deleted（刪除類型）
event.path:變化的文件路徑；

- 常用gulp插件：

gulp有很多插件，而本文列舉出一些常用的插件

gulp-uglify插件

用途：用來壓縮js文件
用法：

var uglify = require("gulp-uglify");
gulp.task("uglifyJS",function(cb){
    gulp.src("./demo/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("build"));
    cb();
});

gulp-minify-css插件

用途：用來壓縮css文件
用法：

var minifyCss = require("gulp-minify-css");
gulp.task("minifyCss",function(cb){
    gulp.src("./demo/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest("./build"));
    cb();
});

gulp-minify-html插件

用途：合并html文件
用法：

var miniHtml = require("gulp-minify-html");
gulp.task("miniHtml",function(cb){
    gulp.src("./src/*.html")
        .pipe(miniHtml())
        .pipe(gulp.dest("./build"));
});

gulp-connect插件

用途：自動刷新頁面
用法：

var connect = require("gulp-connect");
gulp.task("connect",function(){
    connect.server({
        root:"src",
        livereload:true,
    })
});
gulp.task("watchHtml",function(){
    gulp.watch("./src/*.html",function(){
        gulp.src("./src/*.html")
            .pipe(connect.reload());
    })
});

gulp-jshint插件

用途：用來檢查js語法
用法：

var jshint = require("gulp-jshint");
gulp.task("checkJs",()=>{
    gulp.src("./src/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter())
});

gulp-concat插件

用途：合并多個js或者css文件
用法：

var concat = require("gulp-concat");
gulp.task("concat",()=>{
    gulp.src("./*/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./build"));
});

gulp-rename:

定義;將文件改名；
語法：
a）rename（filename）:將文件直接改為指定文件名；
b）rename（{dirname："A" ,basename："B" ,prefix："C-",suffix："-D", extname：".txt"}）:將文件名改為A/C-B-D.txt；
C）rename（function（path）{}）:path為一個對象，包含B）中所有屬性；

var rename =require("gulp-rename");   
gulp.task("rename",()=>{              
    gulp.src("./demo/*.css")          
        .pipe(rename({                
            suffix:".min",            
            extname:".less"           
        }))                           
        .pipe(gulp.dest("./build"));  
})                                    

參考文檔：
gulp文檔