什么是构建
构建过程
![](https://i-blog.csdnimg.cn/blog_migrate/968aa969c5405656df8ec399bdc4f65c.png)
为什么构建(构建内容)
• 一些代码需要编译(
CSS,JS), 保证浏览器的兼容性;
• 将 Less 或 Sass 转换成 CSS
• 将 ES6+ 的新语法转成 ES5
• 有些代码需要压缩(
CSS,JS,HTML,图片等);
• 压缩之后的代码体积更小,加载更快,节省带宽
• 有些代码需要做格式化校验,统一代码风格;
![](https://i-blog.csdnimg.cn/blog_migrate/9a5750def0d509e80b24718c1951a87b.png)
构建初体验
将 less 转成 css
![](https://i-blog.csdnimg.cn/blog_migrate/3890d72669d917590c4a5e2c27db27b4.png)
步骤
• 安装 less 插件(
npm i less -g)
• 通过 lessc 命令转换 (lessc input.less
output.css)
什么是自动化构建
自动化构建是指将手动构建任务,通过命令自动执行的过程。
![](https://i-blog.csdnimg.cn/blog_migrate/5bec2b068c96406d0ba674e1ffef6099.png)