「这是我参与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