（20）自动化构建

一、什么是构建

如下图是构建的过程，就是将我们写的源代码进行转换成为生产代码。

二、为什么构建（构建内容）

• 一些代码需要编译（CSS，JS）， 保证浏览器的兼容性；

• 将 Less 或 Sass 转换成 CSS

• 将 ES6+ 的新语法转成 ES5

• 有些代码需要压缩（CSS，JS，HTML，图片等）；

• 压缩之后的代码体积更小，加载更快，节省带宽

• 有些代码需要做格式化校验，统一代码风格；

三、源代码转换成生产代码的过程

四、示例 

如下图我们书写的less文件，直接再浏览器中运行是无法实现的。

如下图是我们书写的less文件，通过构建编译后，再浏览器中就可以运行啦。

所谓构建编译就是将.less后缀结尾的文件，编译成浏览器认识的.css文件。 

实现步骤 

1.安装 less 插件（npm i less -g）

2.通过 lessc 命令转换 （lessc input.less output.css）

为什么使用less处理器？好处

1. 如果你写了一个文字颜色再网页中多次使用该颜色，使用了大量的color属性，取值是一样的，那么如果将来老板说这个颜色需要更换，那么你要更该所有的属性值，很麻烦，如果说使用less预处理自定义变量，直接将该变量的值修改，那么进行编译后的css文件中的所有使用该属性的color值都会直接发生更改。
2. less处理器支持选择器嵌套书写，普通css文件不支持。

五、自动化构建过程

如果不使用自动化构建，那么我们需要安装2个包，一个是less一个是minify，然后使用的时候呢，我们要先使用less转换成css，再将css压缩后，项目才能上线。需要敲写2个命令。那么我们使用后自动化构建的话，只需要一条命令，将多个任务直接完成，也就是转换和压缩通过一条命令就可以完成，成为生产代码上线。