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的方法，如果有更好的解决方案，请私信我一起分享~ 大家加油！