自动化构建

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

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

开发行业当中的 自动化构建：把开发阶段中的源代码自动化的转化为生产环境中可运行的代码。这一转换的过程也被称为 自动化构建工作流，其作用是可以帮我们脱离运行环境兼容带来的问题，使用提高效率的语法、规范和标准。

ECMAScript Next：提高编码效率、质量；
Sass：增强 CSS 的可编程性；
模板引擎：抽象页面中重复的 HTML；

以上用法大都不被浏览器直接支持，自动化构建工具能帮助我们构建转换这些不被支持的特性；

自动化构建的初体验

通过 sass 增强 css 的编程性：

graph TD

编写css --> 运行于浏览器

转换为：

graph TD

编写scss --> 构建为css --> 运行于浏览器

项目初始化：

mkdir 01-my-web-app
cd .\01-my-web-app\

创建 scss 文件；
添加 sass 插件；

yarn add sass --dev

编写 NPM Scripts;

NPM Scripts 命令允许我们定义一些与这个项目开发过程有关的脚本命令，可以让命令跟着项目一起维护，便于在后期开发过程中使用；

运行 NPM Scripts；

yarn build

结果；运行完成后，会将指定路径中的 scss 文件转换成对应的 css 文件至指定的路径当中；

NPM Scripts

实现自动化构建流的最简单方式；

项目安装 browser-sync 模块:
```
yarn add browser-sync --dev
```
browser-sync 模块：用于启动测试服务器去运行我们的项目；

package.json 文件中的 scripts 字段中编写 NPM Scripts：

{
  "name": "01-my-web-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "syc",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/style.scss css/style.css",
    "serve": "browser-sync ."
  },
  "devDependencies": {
    "sass": "^1.52.3"
  }
}

运行 serve 命令：
```
yarn serve
```
browser-sync 模块虽然会唤起浏览器，运行我们当前网页，但如果在 browser-sync 工作前，我们修改过 sass 文件但并未执行 yarn build 命令来生成新的 css 文件时，那么我们 browser-sync 模块运行起来的网页的样式文件也不会更新。

借助 NPM Scripts 的钩子机制来完成 serve 命令前的 build 工作：

{
  "name": "01-my-web-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "syc",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/style.scss css/style.css",
    "preserve": "yarn build",
    "serve": "browser-sync ."
  },
  "devDependencies": {
    "sass": "^1.52.3"
  }
}

preserve：该命令会在执行 serve 命令前执行；

如此一来，我们就可以在启动 web 服务前自动构建我们的 sass 文件；

为 sass 命令添加 --watch 参数：

{
  "name": "01-my-web-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "syc",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/style.scss css/style.css --watch",
    "preserve": "yarn build",
    "serve": "browser-sync ."
  },
  "devDependencies": {
    "sass": "^1.52.3"
  }
}

--watch：配置此参数后，sass 插件会在工作中监听 sass 文件的变化，一但 sass 文件中的代码发生了变化，就会自动被编译；

添加 npm-run-all 模块用于实现多个任务同时执行：添加了 --watch 参数后，运行 serve 命令后会发生阻塞。此时，可添加 npm-run-all 模块实现多任务执行。
```
yarn add npm-run-all --dev
```

使用 npm-run-all 模块：

{
  "name": "01-my-web-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "syc",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/style.scss css/style.css --watch",
    "preserve": "yarn build",
    "serve": "browser-sync .",
    "start": "run-p build serve"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "sass": "^1.52.3"
  }
}

添加 start 命令，使用 npm-run-all 模块中的 run-p 命令同时取执行 build 和 serve 命令；

yarn start

此时，build 任务和 browser-sync 任务会被同时执行（如下图）：

打开 sass 文件进行修改是，可以发现 css 文件会被同步修改（如下图），则说明 --watch 参数也生效了：

为 browser-sync 命令添加 --files 参数，让 browser-sync 模块启动后可以监听项目下的指定文件的变化：

{
  "name": "01-my-web-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "syc",
  "license": "MIT",
  "scripts": {
    "build": "sass scss/style.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start": "run-p build serve"
  },
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "npm-run-all": "^4.1.5",
    "sass": "^1.52.3"
  }
}

--files：让 browser-sync 模块启动后可以监听项目下的指定文件的变化，并在监听到的变化自动同步到浏览器从而更新浏览器当中的界面，避免了代码修改后需要手动刷新浏览器页面的重复操作（如下图）：