第十五gulp

什么是gulp

gulp:前端自动化项目管理工具
功能：自动化压缩js、css文件，自动压缩图片文件，自动合并文件，编译less,sass,es6转es5等

要使用gulp，需要安装node环境

安装：

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

API:
gulp.src() --全局匹配一个或多个文件
gulp.dest() --将文件写入目录
gulp.symlink() --与dest相似，但是使用软连接形式
gulp.task() --定义任务
gulp.parallel() --并行运行任务
gulp.series() --运行任务序列
gulp.watch() --当文件发生变化时做某些操作
gulp.lastRun() --获得上次成功运行的时间戳
gulp.tree() --获得任务书树
gulp.registry() --获得或注册任务

发布任务

安装好gulp后，可以在当前文件夹下开启命令行工具，然后输入gulp,结果如下

[19:48:29] No gulpfile found

结果告诉我们，在目录下找不到gulpfile。
注：gulpfile是一个js文件，我们需要在目录下创建一个gulpfile.js文件，将来的任务都在gulfile.js中执行。

目录下创建gulpfile.js文件,再次输入命令gulp,结果如下：

[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

结果提示，default任务没有定义，可以尝试运行gulp --tasks

gulpfile.js中使用task定义的default任务

const gulp = require("gulp");
gulp.task("default",function(){
    console.log("default任务执行了");
});

结果如下：

[20:11:00] Using gulpfile D:\个人\nodelearn\gulpDemo\gulpfile.js
[20:11:00] Starting 'default'...
default任务执行了
[20:11:00] The following tasks did not complete: default
[20:11:00] Did you forget to signal async completion?

说明：执行了default任务，但是并没有结束任务（如果结束？往下看）。

gulp.task("default",function(done){
    console.log("default任务执行了");
        done();
});

done();//结束任务

创建并行任务（多个任务同时执行）

const gulp = require("gulp");
//创建并行任务
gulp.task("default",gulp.parallel(taskA,taskB));
function taskA(){
  console.log("执行了A");
}
function taskB(){
  console.log("执行了B");
}

taskA,taskB任务同时执行

创建序列任务(任务执行完一个再一个)

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

没有调用done(),taskA没有执行完，则taskB不会执行

给任务添加别名，执行命令时需要使用： gulp+任务名

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

输入命令：gulp taskA;

布置一个任务：将src目录下的index.html文件复制到dest目录下

//布置一个任务：将src目录下的index.html文件复制到dest目录下
gulp.task("copyHtml",copyHtml);
function copyHtml(){
    return gulp.src("src/index.html").pipe(gulp.dest("dest"));
}

dest目录会自动生成
src()源文件路径读取文件是一个输出流
pipe()管道输送处理文件是一个输出流
dest()目标目录输入文件是一个输入流
return:结束任务，相当于done()。

布置一个任务：将lib目录下的所有js文件复制到js目录下

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

gulp.src("lib/*")与gulp.src("lib/*/**的区别")
lib/*：代表src下的所有一级目录的文件,不包含二级目录文件
lib/**：代表src下的所有文件，包含所有二级目录文件和多级目录文件
lib/*/**:代表src下的二级目录下的所有文件

匹配模式

单匹配模式

1.png
多匹配模式
1.类正则：

2.png

2.数组匹配：

布置一个任务：将不同目录下的文件复制到dest目录下

src参数可以是一个数组

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

gulp.watch()监听

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

ctrl+c结束监听

文件合并：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（优化等级）
                progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
                interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
                multipass: true,      //类型：Boolean 默认：false 多次优化svg直到完全优化
            }))
            .pipe(dest("dest/photo"));
})
//写法三
task("minImg",function(done){
    pump([
        src("images/*.{png,jpg,gif,ico}"),
        imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true,      //类型：Boolean 默认：false 多次优化svg直到完全优化
        }),
        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转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转es5 这里需要设置presets
        }))
        .pipe(dest("dest/e6te5"))
})