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

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')