js之自动化构建Gulp的基本使用

*最新的 Gulp取消了同步代码模式，每个任务必须是异步任务，调用回调函数标记任务完成

yarn add gulp --dev
code gulpfile.js

Gulp 4.0 之前需要 Gulp 模块的task 方法实现注册任务

const gulp = require('gulp')
gulp.task('bar', done => {
    console.log('bar task workding~')
    done()
})

新的注册任务的方式通过exports 导出

//默认任务
exports.default = done => {
    console.log('defalut task workding~')
    done() //标记任务完成
}

使用series 串行同步任务，使用parallel 并行异步任务

const { series, parallel } = require('gulp')

const task1 = done => setTimeout(done, 1000)
const task2 = done => setTimeout(done, 1000)
const task3 = done => setTimeout(done, 1000)

exports.awaitTask = series(task1, task2, task3) //串行同步任务
exports.asyncTask = parallel(task1, task2, task3) //并行异步任务

异步任务的几种方式

1. 回调函数 callback，并且错误优先

exports.callback = done => {
    console.log('callback')
    done()
}

exports.callback_error = done => {
    console.log('callback')
    done(new Error('task failed!'))
}

2.成功的状态修改是一个回调函数，可以使用Promise

exports.promise = () => {
    console.log('promise task workding')
    return Promise.resolve()
}
exports.promise_error = () => {
    console.log('promise task workding')
    return Promise.reject(new Error('task failed'))
}

3.任务本质就是一个异步方法，所以直接用async

const sleep = tick => new Promise(resolve => setTimeout(resolve, tick))

exports.async = async () => {
    await sleep(1000)
    console.log('async task workding')
}

4.处理stream 处理最常见，因为我们在自动化构建中，大多数情况都是在处理文件

const fs = require('fs')
exports.stream = done => {
    const readStream = fs.createReadStream('package.json') //创建读取文件流
    const writeStream = fs.createWriteStream('temp.json') //创建写入文件流
    readStream.pipe(writeStream) //复制文件
    //return readStream 
    readStream.on('end', done) //gulp 只是在stream 中注册了end 事件 在end 事件中标记任务执行成功
}