前端工程化中的自动化构建是指可以让机器自动完成开发阶段中,把编写的源代码自动编译成生产环境可以运行的代码,这个转换可以也称为自动化构建工作流。
自动化构建的目的是为了让编码可以脱离运行环境兼容性的问题,开发阶段可以使用更加高效、规范的语法
例如用EMSrcipt新的特性、sass编写样式、模板引擎来渲染页面,这些不能被浏览器直接支持,需要用自动化构建工具把代码转换成可以执行的代码。这样就可以在编码时可以用更加高效方式,提高编码效率
NPM Script
NPM Script是实现自动化构建最简单的方式,可以将需要执行的命令,在package.json的script里面添加对应的命令,让自动化构建命令跟随项目更新
自动化构建的核心
代码构建的过程是将原来代码里的文件读取,然后经过对应的处理(语法转换、代码压缩),再将处理后的结果写入对应的位置
```
const fs = require('fs')const { Transform } = require('stream')const read = fs.createReadStream('main.css')const write = fs.createWriteStream('tmp.css')// 文件转换const transform = new Transform({ transform: (chunk, encoding, callback) => { // 转换核心 const input = chunk.toString() // 替换空白字符 和 换行符 const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '') callback(null, output) }})// 读取 => 转换 => 写入read.pipe(transform).pipe(write)
```