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中非常常规的压缩代码的过程了，这个过程中有三个非常核心的点，分别是：
输入-读取流
加工-转换流
输出-写入流
这样的一个过程就完成了我们日常的构建工作
作者：是洋柿子啊
链接：https://juejin.cn/post/7035991678838112293
伪原创工具 SEO网站优化 https://www.237it.com/