「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

Gulp构建过程核心工作原理

前言

在了解了Gulp当中定义任务的方式过后，接下来我们一起重点学一下这些任务中我们需要做的工作，这也就是所谓的构建过程

模拟实现

本次改造我们需要在gulpfile.js环境下进行，我们要模拟编译的时候，对css的编译过程

normalize.css

首先我们的测试用模板css

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

gulpfile.js

const fs = require('fs')

exports.default = () => {
  // 文件流读取
  const read = fs.createReadStream('normalize.css')
  // 文件写入流
  const write = fs.createWriteStream('normalize.min.css')
  // 把读取出来的文件流导入写入文件流
  read.pipe(write)

  return read
}

完成编写之后，我们运行

yarn gulp

运行完毕之后，我们可以看见目录中多出了normalize.min.css文件

我们查看完毕文件之后，确实 这个文件就是复制normalize.css文件，但是我们的需求是读取完毕文件之后，进行一遍的代码压缩而不是简单的代码读取，那我们可以用stream的Transform方法

改造

以用stream的Transform方法 进行改造

const { Transform } = require('stream')
 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) // 写入

测试

完成编写之后，我们运行

yarn gulp

运行完毕之后，我们查看normalize.min.css文件

html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}

完美，就是压缩之后的结果

小结

这就是gulp中非常常规的压缩代码的过程了，这个过程中有三个非常核心的点，分别是：

• 输入-读取流
• 加工-转换流
• 输出-写入流 这样的一个过程就完成了我们日常的构建工作