Gulp的基本使用(gulp使用教程)
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
作者：是洋柿子啊
链接：https://juejin.cn/post/7035451512826363941