创建构建流程

我们将探讨如何使用 npm 脚本设置 Sass 构建流程，以提升开发工作流效率！

什么是构建流程？

构建流程本质上是一系列自动执行的任务序列——我们在项目完成后运行这些任务。通过构建流程，我们可以生成最终的生产文件，然后将其部署到 Web 服务器上。

构建流程

首先，我们来分解一下具体步骤。我们将对样式表进行 编译、合并、添加浏览器前缀 和 压缩。如下图所示：

在接下来的课程中，我们将逐一详细讲解每个步骤。

main.scss 是我们的主 Sass 文件，负责将 Sass 编译为 CSS。

接下来我们来看 合并 步骤。在此过程中，我们需要将所有 CSS 文件合并成一个文件。为了测试这一过程，我们将使用另一个名为 additional.css 的额外 CSS 文件。

然后我们将学习使用 autoprefixer 进行 浏览器前缀处理。

作为回顾：在编写 CSS 时，有时会使用非标准属性。浏览器厂商会为这些实验性属性添加前缀，以便在正式标准化之前就能使用。

当我们使用 autoprefixer 时，它会自动为我们的代码添加所需的各类浏览器前缀（如 -webkit、-moz 等），从而确保代码在主流浏览器中正常运行。

最后一步是 压缩，即对所有代码进行压缩，以最大程度提升性能。

现在，让我们开始使用 npm 脚本创建我们的构建流程！