Gulp的简单使用
1. Gulp 的简单介绍
Gulp 是一款比较主流的前端构建工具，它相比于 Grunt 的构建速度会更快一些，因为 Gulp 是基于内存去实现的，相对于磁盘读写，它的速度肯定会更快。而且它默认支持同时执行多个任务，所以效率会大大提高，而且它的使用方式相对于 Grunt 会更加简单一些，配置文件的结构也比较简单易懂，所以现在也是比较受欢迎的前端构建工具，很多大型项目会将 Gulp 和 Webpack 混合使用，去处理一些比较复杂的情况。
2. Gulp 的基本使用
我们创建一个文件，然后初始化 package.json，将 gulp 作为一个开发依赖添加
yarn init -y
yarn add gulp -D
然后在根目录创建一个 gulpfile.js 的文件, gulpfile.js 就是 gulp 的入口文件
- （1）我们可以在 gulpfile.js 做出一些配置，然后用 gulp 来帮助我们构建项目
exports.foo = (done) => {
console.log('foo task working')
done() // 任务完成
}
然后我们执行下面的命令
yarn gulp foo // 输出 foo task working
- （2）默认任务
我们导出一个 default 的成员
exports.default = (done) => {
console.log('default task working')
done() // 任务完成
}
然后我们执行下面的命令
yarn gulp // 输出 default task working
- （3）gulp4.0之前的任务执行
在 gulp4.0 之前，我们执行任务，是需要引入 gulp 模块的
const gulp = require('gulp')
gulp.task('bar', done => {
console.log('bar task working')
done()
})
然后我们执行下面的命令
yarn gulp bar // bar task working
可以看到，我们还是能正常执行这个任务，只是因为 gulp4.0 之后保留了这个 api，但是现在已经不被推荐使用了，更推荐我们使用导出成员的方式去配置项目，所以我们只需要了解就好了。
3. Gulp 的组合任务
gulp 为我们提供了 series（串行） 和 parallel（并行） 这两个 api 来处理串行任务和并行任务
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)
}
exports.foo = series(task1, task2, task3)
exports.bar = parallel(task1, task2, task3)
我们先来执行 foo 任务
// 分别输出 task1 working task2 working task3 working，每次输出间隔一秒
yarn gulp foo
我们再来执行 bar 任务
// 一秒后，同时输出 task1 working task2 working task3 working
yarn gulp bar
这两个任务在实际开发中非常有用，例如我们在编译 css、js、html 的时候，它们之间是没有依赖的，因此我们就可以使用 parallel 同时编译；而像我们构建时，我们需要先编译，然后再构建，所以就可以使用 series 来串行执行这两个任务
4. Gulp 中的异步任务
Gulp 中的任务都是异步任务，其实就是通过异步函数去执行。那么 Gulp 是如何判断异步任务是否完成了呢，主要有下面三种方案
- （1）通过回调的方式
exports.callback = done => {
console.log('callback task')
done()
}
gulp 中的回调和 node 中的回调都是采用错误优先的方式，也就是说我们可以在函数中传入一个错误，就可以阻止接下来的任务的执行
exports.callback_error = done => {
console.log('callback task')
done(new Error('task failed'))
}
- （2）Promise
exports.promise = () => {
console.log('promise task')
return Promise.resolve()
}
exports.promise_error = () => {
console.log('promise task')
return Promise.reject(new Error('task failed'))
}
只要 resolve 或者 reject 后，就相当于停止了这个任务
既然我们能使用 promise，那么我们同样也能使用 async 和 await 这个语法糖
const timeout = time => {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
exports.async = async () => {
await timeout(1000)
console.log('async task')
}
- （3）stream 方式
const fs = require('fs')
exports.stream = () => {
const readStream = fs.createReadStream('package.json')
const writeStream = fs.createWriteStream('temp.txt')
readStream.pipe(writeStream)
return readStream
}
我们也可以使用 readStream 的 end 事件模拟上面的过程
exports.stream = (done) => {
const readStream = fs.createReadStream('package.json')
const writeStream = fs.createWriteStream('temp.txt')
readStream.pipe(writeStream)
readStream.on('end', () => {
done()
})
}
5. Gulp 构建过程核心工作原理
Gulp 的构建过程一般都是将文件读出来，然后通过插件进行一些转换，然后写入到另一个位置。假如我们没有这样的构建工具，我们一般就是手动将一些代码通过某个压缩工具压缩过后，然后粘贴到一个新的文件中。
下面我们通过底层 node 的 api 去显示这样一个过程
我们先再根目录创建这样的 css 文件 /css/normialize.css
我们在 gulpfile.js 中写入下面的代码
const fs = require('fs')
const { Transform } = require('stream')
exports.default = () =>{
// 文件读取流
const read = fs.createReadStream('./css/normialize.css')
// 文件写入流
const write = fs.createWriteStream('./css/normalize.min.css')
// 文件转换流
const transform = new Transform({
transform: (chunk, encoding, callback) => {
// 核心转换过程
// chunk => 读取流中读取到的内容（Buffer）
const input = chunk.toString()
const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
callback(null, output)
}
})
// 把读出来的文件流导入写入文件流
read
.pipe(transform)
.pipe(write)
return read
}
之后我们执行下面的命令
yarn gulp
这样我们就能得到一个 normalize.min.css 的文件，里面就是被压缩之后的代码，上面的代码可以简化为下面的这张图
Gulp 就是基于流的构建系统，Gulp 希望实现一个构建管道的概念，这样后续再做扩展插件的时候，就会有一个很统一的方式
6. Gulp 文件操作 API
在 Gulp 中也提供了很多强大的插件
例如我们想要将 .css 文件都压缩为 .min.css
我们可以先安装两个插件
yarn add gulp-clean-css -D
yarn add gulp-rename -D
然后我们在 gulpfile.js 文件中做出一些配置
const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')
exports.default = () => {
return src('src/*.css') // 创建读取流
.pipe(cleanCss()) // 压缩文件
.pipe(rename({extname: '.min.css'})) // 重命名文件
.pipe(dest('dist')) // 创建写入流
}