自动化构建

目录

• 背景
• 自动化构建体验
  • 案例
    • 缺点
    • 改进（NPM scripts）

背景

• 一切重复工作本应自动化，自动化构建是前端工程化非常重要的组成部分。

• 自动化：就是通过机器去代替手工完成一些工作。

• 构建：把一个东西转换成另一个东西。

• 自动化构建：将开发过程中的源代码自动化的转换成生产环境中可以运行的代码或程序。

  

• 构建转换那些不被支持的特性，比如 scss 和 ECMAScript 某些新语法在生产环境是不被支持的，但我们在开发过程中可以使用这些新特性，然后通过构建工具转换成生产环境能运行的代码，这样的好处能提高编码效率。

自动化构建体验

• 当我们直接编写 css 的方式去完成网页的样式，但是我们希望通过 sass 增强 css 编程性，具体实现方式是， 在开发的时候我们添加一个构建的环节，这样我们在开发环节通过 sass 编写样式，再通过工具将 scss 构建为 CSS。

案例

将 scss 文件构建成 css 文件

1. 下载 sass 第三方包

   yarn add sass
   

2. 安装完成后，我们可以在 node_modules/.bin 目录下查看有个 sass 命令文件，在命令行中通过路径可以找到这个命令

   .\node_modules\.bin\sass
   

3. 输出 sass 命令的帮助信息

   

4. 执行 scss 命令 => 构建

   .\node_modules\.bin\sass  scss/main.scss css/style.css
   

5. 生成对应的 css 文件

   

缺点

• 我们每次都需要重复去输入这些复杂的命令，而且在别人接手我们项目过后，他也不知道如何去运行这些构建的任务。

改进（NPM scripts）

• 我们需要做一些额外的事情去解决在项目开发阶段这些重复执行的命令，NPM scripts 就是解决这个问题的

• scripts 可以自动发现 node_modules 中的命令，所以我们不需要写完整的路径，直接使用命令的名称即可，命令定义完成后，我们即可通过 npm 或 yarn 来启动这个命令

  

• 启动命令

  npm run build 或 yarn build // yarn 命令可以省略 run
  

NPM Scripts 是实现自动化构建工作流的最简便方式

1. 安装 browser-sync 模块，用于启动测试服务器去运行我们的项目，它能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面

   yarn add browser-sync
   

2. 在 scripts 中添加一个 serve 命令，在这个命令中通过 browser-sync 把当前的目录运行起来（会首先指向当前目录的 index.html 文件）

   

   • 启动命令

   yarn serve
   

   

   

3. 如我们在 browser-sync 工作之前，并没有生成样式，此时 browser-sync 工作的时候就没有样式文件，那么我们需要启动 serve 命令之前让 build 任务先工作，可以借助 NPM Scripts 的钩子机制定义一个 preserve，它会在 serve 命令执行之前自动去执行，此时再执行 serve 命令之前，就会自动先执行 build 命令，再执行对应的 serve

   

   

4. 我们可以为 sass 命令添加一个 –watch 的参数，监听文件的变化，一旦文件中的代码发生改变，它就会自动被编译，但会一直阻塞在监听事件，不会去执行 browser-sync 命令

   

   

5. 我们需要同时执行多个命令，可以借助 npm-run -all 的模块实现

   yarn add npm-run-all
   

   

   run-p 的命令同时执行多个命令(build在前，serve在后)

   

6. 当我们修改 scss 文件的代码，通过 sass 命令构建生成的 css 文件中的代码也同步发生变化，说明 watch 已经生效了，但在浏览器中样式还没发生变化，说明浏览器中引用的还是旧的 css 文件，没有引用最新构建生成的 css 文件(需要手动刷新浏览器)

7. 在 browser-sync . 命令后面添加 –files参数，这个参数可以让 browser-sync 启动过后监听项目下的文件的变化，一旦文件发生变化后，browser-sync 会将这些文件的内容自动同步到浏览器，从而更新浏览器中的界面(不需要手动刷新浏览器)