gulp使用

前言

随着前端诸如webpack，rollup，vite的发展，gulp感觉似乎好像被取代了。其实并没有，只不过它从台前退居到了幕后。我们仍然可以在很多项目中看到它的身影，比如elementplus、vant等。现在gulp更多的是做流程化的控制。

比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进冰箱->关上冰箱门，这就是一个简单的流程，使用gulp就可以规定这些流程，将这个流程自动化。

所以我们可以使用它在项目开发过程中自动执行常见任务。比如打包一个组件库，我们可能要移除文件、copy文件，打包样式、打包组件、执行一些命令还有一键打包多个package等等都可以由gulp进行自定义流程的控制，非常的方便。

本文将主要介绍gulp的一些常用功能

安装gulp

首先全局安装gulp的脚手架

npm install --global gulp-cli

然后我们新建文件夹gulpdemo，然后执行 npm init -y,然后在这个项目下安装本地依赖gulp

npm install gulp -D    

创建一个任务Task

每个gulp任务（task）都是一个异步的JavaScript函数，此函数是一个可以接收callback作为参数的函数，或者返回一个Promise等异步操作对象，比如创建一个任务可以这样写

exports.default = (cb) => {
  console.log("my task");
  cb();
};

或者这样写

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

然后终端输入gulp就会执行我们这个任务

串行(series)和并行(parallel)

这两个其实很好理解，串行就是任务一个一个执行，并行就是所有任务一起执行。下面先看串行演示

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

const task1 = () => {
  console.log("task1");
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 5000);
  });
};
const task2 = () => {
  console.log("task2");
  return Promise.resolve();
};

exports.default = series(task1, task2);