[更新]函数式task使用(含gulp.watch处理方法) - gulp v4.0.2

gulp 4.0.2[更新]函数式task使用(含gulp.watch处理方法）

文章读完需要大约 15 min

---

目前npm上gulp更新到4.0.2，“点此进入 gulp npm页”

作者最近在学习node 使用gulp模块构建项目，在gulp官方中文文档 [创建任务(task)页] 发现官方推荐使用function写法创建task，可使用gulp.series() 、 gulp.parallel() 处理多task，使用分别如下

目标 1
创建 task, 执行 将 src 下两级内所有 .less 文件打包到 build 文件夹

    // 创建任务
    const gulp = require('gulp'); // 可使用解构语法直接提取src dest

    function func1() {
        // return  stream、promise、event emitter、child process...(可返回的很多，本文以stream为例)
        return gulp.src('src/**/*.less')    // 读取src下的.less文件
            .pipe(gulp.dest('build'));     // 将读取到的流输出到 build 文件夹(没有则先生成再输出)
    }

    // 导出任务(文档中公开任务和私有任务之分，这里导出为私有任务)
    exports.default = func1;


// 到此，在项目进程页执行命令 **npm run gulp**  cmd窗口显示如下
[17:51:13] Starting 'defaultTask'...
[17:51:13] Finished 'defaultTask' after 236 μs


//项目目录会增加 build 文件夹
- building // 项目名
    * build(新增)
    * src
        + index1.less
        + camp
            * index2.less 
    * gulpfile.js  // 上边的代码写在这个文件里

目标 2
处理多任务
func1 -> console.log('start !')
func2 -> 打包 .less 到 build 文件夹
func3 -> console.log('done!')
文档task异步执行页

    // 处理多任务 
    //API: gulp.series(func1, func2, func3)
    //API: gulp.parallel(func1, func2, func3)
    const gulp = require('gulp'); // 可使用解构语法直接提取src dest series parallel
    // gulp的事件必须return指定类型，具体指定类型请点击 目标2 中链接查看
    // 这里想return console.log()不是指定形式 这里使用async-await方案
    async function func1() { 
        await console.log('start!');
    }

    function func2() {
        // 此处return  stream
        return gulp.src('src/**/*.less')    // 读取src下的.less文件
            .pipe(gulp.dest('build'));     // 将读取到的流输出到 build 文件夹(没有则先生成再输出)
    }

    async function func3() {
        await console.log('done!');
    }
    
    exports.default = gulp.series(func1, func2, func3); // gulp.series 接受的任务顺序执行
    // gulp.parallel()接收的任务同时执行，不适合实现 目标2，在目标3 中有使用
    
    // 到此，在项目进程页执行命令 **npm run gulp**  cmd窗口显示如下
    [17:51:13] Starting 'defaultTask'...
    [17:51:13] Finished 'defaultTask' after 236 μs

    
    //项目目录会增加 build 文件夹
    - building // 项目名
        * build(新增)
            + index1.less(新增)
            + camp(新增)
                * index2.less(新增)
        * src
            + index1.less
            + camp
                * index2.less 
        * gulpfile.js // 上边的代码写在这个文件里

目标 3 实战环节(包含 gulp.watch() 在函数式task的使用)
function delPreBuild() -> 若已存在build文件夹，同步删除(del模块)
function lessTask -> 读取.less文件，转为.css(gulp-less模块)，自动检测运行浏览器补全前缀(gulp-autoprefixer模块)，压缩.css(gulp-clean-css模块)
function defaultTask() -> 在任务链中最后执行，打印 “done!‘
function watch() -> 该task为实现gulp-watch功能，即监测文件每次有更改，重新执行指定任务 具体分析请往下看

    const gulp = require('gulp'); // 也可使用es6解构语法获取下面使用的api
    const less = require('gulp-less');
    const del = require('del');
    const autoprefixer = require('gulp-autoprefixer');
    const cleanCSS = require('gulp-clean-css');
    
    async function delPreBuild() { // 同步删除之前构建的build文件夹
        await del.sync('build');
    }
    
    function lessTask() {
        return gulp.src('src/**/*.less')
            .pipe(less()) // 转换.less -> .css
            .pipe(autoprefixer({ // 自动补全前缀
                browsers: ['last 5 versions', 'Firefox > 20'],
                cascade: false
            }))
            .pipe(cleanCSS()) // 压缩.css
            .pipe(gulp.dest('build')); // 输出到build文件夹
    }
    
    
    async function defaultTask() {
        await console.log('done!');
    }
    
    // 创建顺序task链 dePreBuild -> lessTask -> defaultTask
    let taskSeries = gulp.series(delPreBuild, lessTask, defaultTask);

    // 创建gulp-watch task
    function watch () {
        // gulp.watch 检测src/下两级内所有文件变化， 有变化则执行taskSeries任务链
        const watcher = gulp.watch('src/**/*', taskSeries); 
        watcher.on('change', event => {
            console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
    }
    
    // 同步执行两个task 第一个为watch task，第二条为taskSeries任务链
    taskSeries = gulp.parallel(watch, taskSeries);
    
    // 作者使用 创建 -> 重组 任务链的方式完成watch 在 函数式 task的使用
    exports.default = taskSeries;


    // 到此，在项目进程页执行命令 **npm run gulp**  cmd窗口显示如下
    [20:19:29] Using gulpfile E:\codes\node\building-nodejs\gulpfile.js
    [20:19:29] Starting 'default'...
    [20:19:29] Starting 'watch'...
    [20:19:29] Starting 'delPreBuild'...
    [20:19:29] Finished 'delPreBuild' after 6.17 ms
    [20:19:29] Starting 'lessTask'...
    [20:19:29] Finished 'lessTask' after 106 ms
    [20:19:29] Starting 'defaultTask'...
    done!
    [20:19:29] Finished 'defaultTask' after 329 μs
    // ** 可以看到watch任务 Starting后没有Finished, 修改watch监测的文件后，cmd显示同上**
    // taskSeries 执行顺序正常

    
    //项目目录会增加 build 文件夹
    - building // 项目名
        * build(新增)
            + index1.css(新增)
            + camp(新增)
                * index2.css(新增)
        * src
            + index1.less
            + camp
                * index2.less 
        * gulpfile.js // 上边的代码写在这个文件里
    

截至目前作者没有找到更好的 将watch加入到函数式task的方法，如果有更好的解决方案，请私信我一起分享~ 大家加油！