gulp初识 - 导出任务+异步类型

本篇是了解基础，照着官方文档按部就班的敲了几行代码而已，，当然学习了如何使用gulp的src、dest来生成dist，主要对gulp又一个基本的接触，下一篇才是重点哦。。。

• 任务（tasks）可以是 public（公开） 或 private（私有） 类型的。
  （1）公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。
  （2）私有任务（Private tasks） 被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分。

一、导出任务，明白gulp的运行机制

（1）创建gulpfile.js文件：

const { series, parallel } = require('gulp'); 

function cbA(cb) {
    console.log('iiii')
    cb();
}
function cbB(cb) {
    console.log('3333')
    cb();
}
exports.build = parallel(cbA, cbB);
exports.default = series(cbA, cbB);

（2）终端运行gulp:

运行结果
（3）查看task，运行gulp --tasks：
查看任务

二、异步执行类型

• 返回stream

（1）src以及dest的用法：

const { src, dest } = require('gulp');

function streamTask() {
    return src('*.json') // 匹配到以.json后缀结尾的文件
    .pipe(dest('333')) // pipe（传送）到333这个文件夹下（相当于复制）
    .pipe(dest('oooo'));
}
exports.default = streamTask;

（2）运行gulp后，结果如下：

pipe的结果

• 返回promise

恶补了一下promise机制。。。

• 返回event emitter

const { EventEmitter } = require('events');

function EventEmitterTask() {
    const emitter = new EventEmitter();
    console.log('888', emitter.emit);
    setTimeout(() => emitter.emit('finish'), 250);
    return emitter;
}
exports.default = EventEmitterTask;

运行及console打印如下：

• 返回 child process

const { exec } = require('child_process');

function childProcessTask() {
    console.log('888', exec);
    return exec('date');
}
exports.default = childProcessTask;

运行及console打印如下：

• 返回observable -------？？？？？

const { Observable } = require('rxjs');

function observableTask() {
    console.log('888', Observable);
    return Observable.of(1, 2, 3);
}
exports.default = observableTask;

安装rxjs后，运行有问题（原因是对rxjs的Observable不了解，后面需要进行学习rxjs的相关知识）：

Observable方法调用有问题

• 使用callback

如果任务（task）不返回任何内容，则必须使用callback来指示任务已完成。如下：

function callbackTask(cb) {
  // `cb()` should be called by some async work
  cb();
}

exports.default = callbackTask;

如需通过callback把任务（task）中的错误告知gulp，请将Error作为callback的唯一参数。

function callbackError(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kaboom'));
}

exports.default = callbackError;

运行结果报错，应该是正常的抛错：

抛错

检测cb打印会不会出错：

function callbackError(cb) {
    // `cb()` should be called by some async work
    cb(console.log('ppp'));
  }
  
  exports.default = callbackError;
  

正常打印，说明代码没问题

通常，是将此callback函数传递给另一个API，而不是自己调用执行它。

const fs = require('fs');

function callbackTask(cb) {
    console.log('fs', fs);
    fs.access('gulpfile.js', cb); // 判断 文件和目录是否存在
}
exports.default = callbackTask;

fs.acess

• 使用async/await

如果不使用前面提供的几种方式，还可以将任务（task）定义为一个async函数，它将利用promise对此任务进行包装。允许使用await处理promise，并使用其他同步代码。

const fs = require('fs');

async function asyncAwaitTask() {
  const { version } = fs.readFileSync('package.json', 'utf-8');
  console.log(fs.readFileSync('package.json', 'utf-8'));
  console.log('ppp', version);
  await Promise.resolve('some result');
}

exports.default = asyncAwaitTask;

运行结果如下：可能是由于同步的问题，打印出来的version为undefined。

运行gulp