使用gulp助力前端自动化

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

前言

随着前端诸如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    

此时我们gulp便安装好了，接下来我们在根目录下创建gulpfile.js文件，当gulp执行的时候会自动寻找这个文件。

创建一个任务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)和并行(