Glup 是目前流行的自动化构建工具，它解决了Grunt中同类型文件多次执行不同任务时导致的内存消耗过大的情况。
入口文件 - gulpfile.js
与Grunt类似，也需要通过任务的形式来执行。
// 4.0以前
const gulp = require("gulp")
gulp.task("bar", done => {
console.log("bar")
done()
})
// 4.0以后
export.foo = done => {
console.log("foo")
done()
}
这里与Grunt类似的一点是， 运行的时候都可以指定任务名，而假如不接任务名就默认执行 default任务。不同的是，gulp默认是异步任务，所以每次执行完任务后需要调用一下函数回调，这里我们默认参数为done,需要调用一下这个方法。
组合任务
- series 组合串行任务
- parallel 组合并行任务
const {series, parallel} = require("gulp")
const task1 = done => {
setTimeout(() => {
console.log("task1")
done()
}, 1000)
}
const task2 = done => {
setTimeout(() => {
console.log("task2")
done()
},2000)
}
const task3 = done => {
setTimeout(() => {
console.log("task3")
done()
},1000)
}
exports.foo = series(task1, task2, task3)
exports.bar = parallel(task1, task2, task3)
异步任务
- 回调返回
我们上面说过gulp的任务执行都是异步的，调用done()本身就是一种解决方式
对于标记错误的方式只需要在done()传入错误参数。比如done(new Error("task error")) - Promise
我们还可以通过返回Promise的形式去处理异步任务
exports.promiseTask = () => {
console.log("promise task")
return Promise.resolve()
}
exports.promiseTask_error = () => {
console.log("promise error")
return Promise.reject(new Error("promise error task"))
}
- Async/Await
async 是promise 的语法糖，也可用来处理异步任务
const timeout = time => {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
exports.asyncTask = async () => {
await timeout(1000)
console.log("async task")
}
- stream
一种特殊的异步任务， 用于读写文件
exports.stream = () => {
const readStream = fs.createReadStream("package.json")
const writeStream = fs.createWriteStream("temp.txt")
readStream.pipe(writeStream)
return readStream //当完全pipe完之后返回
}
构建过程
读取流 -> 转换流 -> 写入流
模拟压缩css文件
const fs = require("fs")
const { Transform } = require("stream")
exports.default = () => {
//文件读取流
const read = fs.createReadStream("index.css")
//文件写入流
const write = fs.createWriteStream("index.min.css")
//文件转换流
const transform = new Transform({
transform: (chunk, encodeing, callback) => {
const input = chunk.toString() //chunk 是文件内容以字符数组的形式存在
const output = input.replace(/\s+/g, "").replace(/\/\*.+?\*\//g, "")
callback(null, output) // 回调错误，回调结果
}
})
read.pipe(transform).pipe(write)
return read
}
文件操作API
- src 读取流
- dest 写入流
- 其他文件操作api插件
const {src, dest} = require("gulp")
const cleanCss = require("gulp-clean-css")
const rename = require("gulp-rename")
exports.default = () => {
return src("*.css")
.pipe(cleanCss())
.pipe(rename({extname: ".min.css"}))
.pipe(dest("dist"))
}
根本的使用方式就是使用利用提供的插件以文件流转换的形式达到我们不同的目的。
后面我们将通过案例的方式去使用Gulp
