Gulp的基本使用「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」 Gulp Gulp作为

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」

Gulp

Gulp作为前端当下最流行的构建系统，其核心特点就是高效易用，使用Gulp的过程十分简单，就是先安装一个Gulp的安装依赖，然后我们在在项目根目录添加gulpfile的文件

安装依赖

我们先运行以下代码，初始化我们的项目

npm init or yarn init

接着我们需要安装我们的gulp依赖

npm add gulp or yarn add gulp

安装gulp的同时它会安装一个gulp-cli的模块

创建 `gulpfile.js`文件

我们在根目录中创建 gulpfile.js文件

然后我对其进行一些改造：

// gulp 的入口文件

exports.foo = () => {
  console.log('测试')
}

简单的测试

这里我们在运行一下

npm gulp foo or yarn gulp foo

这个命令表示我们要执行这个导出的方法

此时呢，我们的控制台中也出现了我的打印，但是出现了报错，报错信息大致意思是：

以下任务没有完成：foo
您是否忘记发出异步完成信号？我们需要对使用done方法，对任务进行标识，表示任务结束

// gulp 的入口文件

exports.foo = done => {
  console.log('测试')
  
  done() // 表示任务结束
}

改造完毕之后我们在此运行启动命令：

完美，没有报错

默认任务

上面演示的是以任务方式出现的函数，接下来我们用默认函数进行一下演示

exports.default = done => {
  console.log('测试-默认')

  done() // 表示任务结束
}

我们到命令行中运行以下命令

 yarn gulp

我们会发现直接这样进行运行，就进入到了 default的任务中

Gulp 创建组合任务

我们可以通过 series、parallel 创建串行或并行任务;当我们在进行css和js编译的时候，他们是互不干扰的，这样我们可以提高很多的效率，我们可以进行一些测试

测试代码：gulpfile.js

const { series, parallel } = require('gulp')
 
const task1 = (done) => {
  setTimeout(() => {
    console.log("task1 working");
    done(); // 表示任务结束
  }, 1000);
};
const task2 = (done) => {
  setTimeout(() => {
    console.log("task2 working");
    done(); // 表示任务结束
  }, 1000);
};
const task3 = (done) => {
  setTimeout(() => {
    console.log("task3 working");
    done(); // 表示任务结束
  }, 1000);
};

`series`

gulpfile.js中添加

exports.foo = series(task1, task2, task3)

然后执行

yarn gulp foo

我们会发现任务被依次执行了：

`parallel`

gulpfile.js中添加

exports.bar = parallel(task1, task2, task3)

然后执行

yarn gulp bar

我们会发现任务被同时启动执行了：

Gulp异步任务

异步任务的几种方式

通过回调方式进行统制

成功通知

exports.callback = done => {
    console.log("task working");
    done(); // 表示任务结束
};

失败通知

exports.callback_error = done => {
    console.log("task working");
    done(new Error('task failed')); // 表示任务结束
};

promise 方式

回调这么经典的怎么可能没有Promise呢？成功：

exports.promise = () => {
    console.log("task promise");
    return Promise.resolve()
};

失败：

exports.promise = () => {
    console.log("task promise");
    return Promise.reject(new Error('task failed'))
};

es7 async、await

async、await其实是promise的语法糖，它可以让我们的代码更容易理解，不过它受限与我们的node环境

const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
exports.async = async () => {
    await timeout(1000)
    console.log("task promise");
};

通过stream

const fs = require('fs') 
exports.stream = () => {
  // 读取文件
  const createReadStream = fs.createReadStream('package.json')
  // 写入文件
  const WriteStream = fs.createWriteStream('temp.txt')
  createReadStream.pipe(WriteStream)
  return createReadStream
}

运行这个模块之后我们发现，我们没有进行done的动作居然没有报错？这是为什么？

其实主要是Stream类createReadStream、createWriteStream中有一个end事件，会通知`gulp

Gulp的基本使用