Gulp入门学习

一、安装gulp

新建一个空项目，初始化项目yarn init --yes

安装gulp为开发依赖yarn add gulp --dev

安装gulp的同时会安装一个叫gulp-cli的模块，也就是说我们此时在node_modules文件下会出现一个gulp的命令，有了这个命令在后续的时候我们就可以通过gulp命令去构建我们的任务

新建一个gulpfile.js文件作为入口文件code gulpfile.js

// gulp的入口文件	gulpfile.js
exports.foo = () => {
    console.log('foo task working~');
} 

运行yarn gulp foo

可以看到我们的foo方法被执行了，但是有一个报错，报错的大概意思是foo任务执行没有完成，是否需要忘记它并去标识这个任务的结束。

这是因为在最新的gulp当中取消了同步代码模式，约定我们每一个任务都必须是一个异步的任务，当我们的任务执行完毕之后需要通过回调函数或者其他的方式去标记这个任务已经完成。

我们可以通过函数的形参得到回调：

exports.foo = done => {
    console.log('foo task working~');
	done()    
} 

默认任务default

exports.default = done => {
    console.log('default task working~');
    done() // 标识任务完成
} 
// yarn gulp 即可运行default任务

有一点需要注意，在gulp4.0之前，注册任务是需要借助gulp的一个task方法的

const gulp = require("gulp")
gulp.task("bar", done => {
    console.log("bar task working~");
    done()
})
// yarn gulp bar 任务也是能成功运行的，因为在gulp4.0以后还是保留了这个api，但不太推荐使用

二、gulp的组合任务series和parallel

我们可以通过gulp提供的series调用多个任务，series会依次调用被指定的任务。

const { series } = require("gulp")
const task1 = done => {
    setTimeout(() => {
        console.log("task1 task working~");
        done()
    },1000)
}
const task2 = done => {
    setTimeout(() => {
        console.log("task2 task working~");
        done()
    },1000)
}
const task3 = done => {
    setTimeout(() => {
        console.log("task3 task working~");
        done()
    },1000)
}
exports.s = series(task1, task2, task3)

打印结果为：

除了使用series创建串行任务结构，我们还可以创建并行任务结构，那就是通过parallel，同步执行指定任务。

const { parallel} = require("gulp")
const task1 = done => {
    setTimeout(() => {
        console.log("task1 task working~");
        done()
    },1000)
}
const task2 = done => {
    setTimeout(() => {
        console.log("task2 task working~");
        done()
    },1000)
}
const task3 = done => {
    setTimeout(() => {
        console.log("task3 task working~");
        done()
    },1000)
}
exports.p = parallel(task1, task2, task3)

打印结果为：

三、gulp异步任务的几种方式

第一种自然就是我们已经使用过的回调的方式

exports.foo = done => {
    console.log('foo task working~');
    done() // 标识任务完成
} 

当我们想在执行任务中报错一个错误，去阻止剩下的任务执行的时候，我们可以通过给回调指定一个错误参数就可以了。

exports.foo_err = done => {
    console.log('foo_err task working~');
    done(new Error("task failed")) // 标识任务失败，终止后续任务执行
} 

第二种，使用Promise

exports.promise = () => {
    console.log('promise task working~');
    return Promise.resolve() // 返回一个成功的Promise，意味着任务结束了
    // 需要注意的是，resolve()不需要返回任何的值，因为gulp当中会忽略掉这个值
} 

exports.promise_err = () => {
    console.log('promise_err task working~');
    return Promise.reject(new Error('promise error')) // 通过reject()可以抛出错误异常
} 

第三种，使用async
当node版本在8以上的时候，我们就可以使用async方式

const timeout = time =>{
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
exports.async = async () => {
    await timeout(1000)
    console.log("async task");
}

以上这几种方式都是我们在JavaScript中去处理异步的常见方式，这些方式在gulp当中都被支持，除了这几种外，gulp当中还支持另外几种方式，其中，通过stream的方式是最为常见的。
第四种，stream

const fs = require("fs")

exports.stream = () => {
	// 通过fs.createReadStream()方法去创建一个读取文件的文件流
    const readStream = fs.createReadStream("package.json") // readStream就是一个文件流对象
    const writeStream = fs.createWriteStream("temp.txt") // 创建一个写入文件的文件流，需要先创建一个temp.txt文件
    readStream.pipe(writeStream) // 将readStream通过pipe的方法导入到writeStream当中
    return readStream;
    // 我们发现这个任务也是可以正常开始和结束的，它结束的时机就是readStream触发end事件 的时候
    // 因为stream当中都有一个end事件，一旦当读取文件流读取结束的时候，就会触发end事件
    // 从而gulp就知道任务完成了
}

// 我们可以模拟一下gulp的操作
exports.stream = done => {
    const readStream = fs.createReadStream("package.json")
    const writeStream = fs.createWriteStream("temp.txt") 
    readStream.pipe(writeStream)
    readStream.on('end', () => {
        done()
    })
}
// 这种方式也能正常运行
// gulp就是注册了一个end事件，去监听任务的结束

四、gulp利用node底层api实现文件压缩转换

以下为一个实现css文件压缩转换的示例代码

const fs = require("fs")
const { Transform } = require("stream")

exports.default = () =>{
    console.log('default');
    // 读取文件流
    const read = fs.createReadStream("index.css")
    // 写入文件流
    const write = fs.createWriteStream("index.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
            callback(null, output)
        }
    })

    // 把读取的文件流导入写入文件流
    read
        .pipe(transform) // 转换
        .pipe(write) // 写入
    return read;
}