什么是gulp

gulp:前端自動化項目管理工具
功能： 自動化壓縮js、css文件，自動壓縮圖片文件，自動合并文件，編譯less,sass,es6轉(zhuǎn)es5等

要使用gulp，需要安裝node環(huán)境

• 安裝：

$ npm install gulp -g
$ npm install gulp -D

• API:
  gulp.src() --全局匹配一個或多個文件
  gulp.dest() --將文件寫入目錄
  gulp.symlink() --與dest相似，但是使用軟連接形式
  gulp.task() --定義任務(wù)
  gulp.parallel() --并行運行任務(wù)
  gulp.series() --運行任務(wù)序列
  gulp.watch() --當文件發(fā)生變化時做某些操作
  gulp.lastRun() --獲得上次成功運行的時間戳
  gulp.tree() --獲得任務(wù)書樹
  gulp.registry() --獲得或注冊任務(wù)

發(fā)布任務(wù)

• 安裝好gulp后，可以在當前文件夾下開啟命令行工具，然后輸入gulp,結(jié)果如下

[19:48:29] No gulpfile found

結(jié)果告訴我們，在目錄下找不到gulpfile。
注：gulpfile是一個js文件，我們需要在目錄下創(chuàng)建一個gulpfile.js文件，將來的任務(wù)都在gulfile.js中執(zhí)行。

• 目錄下創(chuàng)建gulpfile.js文件,再次輸入命令gulp,結(jié)果如下 ：

[19:59:54] Using gulpfile D:\個人\nodelearn\gulpDemo\gulpfile.js
[19:59:54] Task never defined: default
[19:59:54] To list available tasks, try running: gulp --tasks

結(jié)果提示，default任務(wù)沒有定義，可以嘗試運行g(shù)ulp --tasks

• gulpfile.js中使用task定義的default任務(wù)

const gulp = require("gulp");
gulp.task("default",function(){
    console.log("default任務(wù)執(zhí)行了");
});

結(jié)果如下：

[20:11:00] Using gulpfile D:\個人\nodelearn\gulpDemo\gulpfile.js
[20:11:00] Starting 'default'...
default任務(wù)執(zhí)行了
[20:11:00] The following tasks did not complete: default
[20:11:00] Did you forget to signal async completion?

說明：執(zhí)行了default任務(wù)，但是并沒有結(jié)束任務(wù)（如果結(jié)束？往下看）。

gulp.task("default",function(done){
    console.log("default任務(wù)執(zhí)行了");
        done();
});

done();//結(jié)束任務(wù)

• 創(chuàng)建并行任務(wù)（多個任務(wù)同時執(zhí)行）

const gulp = require("gulp");
//創(chuàng)建并行任務(wù)
gulp.task("default",gulp.parallel(taskA,taskB));
function taskA(){
  console.log("執(zhí)行了A");
}
function taskB(){
  console.log("執(zhí)行了B");
}

taskA,taskB任務(wù)同時執(zhí)行

• 創(chuàng)建序列任務(wù)(任務(wù)執(zhí)行完一個再一個)

gulp.task("default",gulp.series(taskA,taskB));
function taskA(){
    console.log("執(zhí)行了A");
}
function taskB(){
    console.log("執(zhí)行了B");
}

沒有調(diào)用done(),taskA沒有執(zhí)行完，則taskB不會執(zhí)行

• 給任務(wù)添加別名，執(zhí)行命令時需要使用： gulp+任務(wù)名

gulp.task("taskA",taskA);
function taskA(){
    console.log("執(zhí)行了A");
}

輸入命令：gulp taskA;

布置一個任務(wù)：將src目錄下的index.html文件復(fù)制到dest目錄下

//布置一個任務(wù)：將src目錄下的index.html文件復(fù)制到dest目錄下
gulp.task("copyHtml",copyHtml);
function copyHtml(){
    return gulp.src("src/index.html").pipe(gulp.dest("dest"));
}

dest目錄會自動生成
src()源文件路徑 讀取文件 是一個輸出流
pipe()管道輸送 處理文件 是一個輸出流
dest()目標目錄 輸入文件 是一個輸入流
return:結(jié)束任務(wù)，相當于done()。

布置一個任務(wù)：將lib目錄下的所有js文件復(fù)制到j(luò)s目錄下

    gulp.src("lib/*.js").pipe( gulp.dest("js") );

• gulp.src("lib/*")與gulp.src("lib/*/**的區(qū)別")
  lib/*：代表src下的所有一級目錄的文件,不包含二級目錄文件
  lib/**：代表src下的所有文件，包含所有二級目錄文件和多級目錄文件
  lib/*/**:代表src下的二級目錄下的所有文件

匹配模式

• 單匹配模式
  
  1.png
• 多匹配模式
  1.類正則：
  
  2.png
  
  2.數(shù)組匹配：

布置一個任務(wù)：將不同目錄下的文件復(fù)制到dest目錄下

src參數(shù)可以是一個數(shù)組

gulp.task("copyCss",function(){
    return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
});

gulp.watch()監(jiān)聽

gulp.task("watchCss",function(){
    return gulp.watch(["src/*.css","lib/*.css"],()=>{
        return gulp.src(["src/*.css","lib/*.css"]).pipe( gulp.dest("dest") );
    });
})

ctrl+c結(jié)束監(jiān)聽

文件合并：npm install gulp-concat --save-dev

css文件壓縮：npm install gulp-cssmin --save-dev

文件重命名：npm install gulp-rename --save-dev

task("concatCss",function(done){
    return src(["src/*.css","lib/*.css"])
            .pipe(concat("concat.css"))
            .pipe(cssmin())
            .pipe(rename("concat.min.css"))
            .pipe(dest("dest"));
})

js文件壓縮：npm install gulp-uglify --save-dev

task("uglifyJs",function(done){
    return src("lib/*.js")
        .pipe(concat("concatJs.js"))
        .pipe(uglify())
        .pipe(rename("concatJs.min.js"))
        .pipe(dest("dest/js"))
})

圖片壓縮：npm install gulp-imagemin@4 --save-dev

//寫法一
task("minImg",function(done){
    return src("images/*.{png,jpg,gif,ico}")
            .pipe(imagemin())
            .pipe(dest("dest/photo"));
})
//寫法二
task("minImg",function(done){
    return src("images/*.{png,jpg,gif,ico}")
            .pipe(imagemin({
                optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優(yōu)化等級）
                progressive: true,    //類型：Boolean 默認：false 無損壓縮jpg圖片
                interlaced: true,     //類型：Boolean 默認：false 隔行掃描gif進行渲染
                multipass: true,      //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化
            }))
            .pipe(dest("dest/photo"));
})
//寫法三
task("minImg",function(done){
    pump([
        src("images/*.{png,jpg,gif,ico}"),
        imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優(yōu)化等級）
            progressive: true,    //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true,     //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true,      //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化
        }),
        dest("dest/images")
    ],done)
})
//寫法四
task("minImg",function(done){
    pump([
        src("images/*.{png,jpg,gif,ico}"),
        imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            }),
        ]),
        dest("dest/images")
    ],done)
})

es6轉(zhuǎn)es5 ：npm install gulp-babel @babel/core @babel/preset-env --save-dev

task("ES6ToES5",function(done){
    return src("lib/*.js")
        .pipe(babel({
            "presets":["@babel/env"] //es6轉(zhuǎn)es5 這里需要設(shè)置presets
        }))
        .pipe(dest("dest/e6te5"))
})