gulp-工作原理

前言

在本篇文章中主要是介绍，gulp的工作原理，希望可以帮助到大家，加深大家对gulp的理解

事先准备

安装依赖
gulp  yarn add gulp  stream 

核心概念

1、读取流
所谓读取流，本质上就是读取文件的内容

2、转换流
所谓写入流，本质上是就是内容进行相应的操作，例如取出空格，取出注释

3、写入流
所谓写入流，将文件内容，写入对应的文件

4、总结
读取流 => 转换流 => 写入流

代码演示

const fs = require('fs');

const { Transform } = require('stream');

exports.default = () => {

    //文件读取流  读取哪个文件
    const read = fs.createReadStream('add.css');

    //文件转换流 将要写入到哪个文件
    const write = fs.createWriteStream('add.min.css');

    //文件转换流 对文件内容进行相应的 coding something
    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;

    //读取流 => 转换流 => 写入流
}

谢谢观看，如有不足，敬请指教