SASS 构建过程教程
SASS 构建过程教程
让我们看看我们如何使用 npm 脚本来设置 Sass 构建过程——并促进我们的开发工作流程。
什么是构建过程？
它本质上只是一系列自动执行的任务——我们在项目完成后运行。我们的生产文件已生成，然后可以部署到 Web 服务器。
构建过程
请注意：以下过程假设您已经启动并运行了一个 Sass 项目！如果没有请看文章 设置 Sass ，在这里我将介绍在本地服务器上设置 Sass 开发环境所涉及的步骤。
好的！那么我们要实现什么样的构建过程呢？
我们将编译、连接、添加前缀和压缩我们的样式表。
主文件 — 我们从我们的主 sass 文件开始，它执行 CSS 的编译。
接下来要看看串联。在此过程中，我们希望将所有 CSS 文件合并为一个。为了测试这个过程，我创建了一个名为 附加.css .
然后我们将研究使用 autoprefixer 进行前缀。前缀会自动将供应商前缀（-webkit、-moz 等）添加到我们的代码中，以帮助确保其在主要浏览器中的功能。
我们过程的最后一步是压缩。我们将压缩现阶段拥有的所有代码，以最大限度地提高性能。
让我们继续使用 NPM 脚本创建我们的构建过程。
创建构建过程
汇编
打开你的 package.json 文件。运行时生成的文件 npm 初始化 在你的 Sass 项目目录中。
添加以下脚本：
“脚本”：{
"watch-sass": "node-sass sass/main.scss css/style.css --watch",
“编译-sass”：“节点-sass sass/main.scss css/style.comp.css”
},
让我们确保编译工作正常。在终端中，打开您的 Sass 项目文件夹并运行：
npm 运行 compile-sass
它应该完成渲染并将 style.comp.css 文件输出到您的 CSS 文件夹。我们将在项目结束时运行此任务——完成我们的最终构建！
在我们开发项目时，我们使用以下命令运行 watch 任务：
npm 运行 watch-sass
这告诉编译器在每次保存 Sass 文件时观察源文件的更改，并自动重新编译为 CSS ——只要确保在工作时保持任务运行！
级联
下一步是添加脚本来连接我们现有的 CSS 文件。如前所述，我创建了 附加.css 文件用于我们的合并。在它里面有一些额外的样式。继续并在您的 CSS 文件夹中创建一个新的 CSS 文件。只需给它一些额外的样式 - 没关系。然后将以下行添加到我们的脚本中，如下所示：
“脚本”：{
"watch-sass": "node-sass sass/main.scss css/style.css --watch",
"compile-sass": "node-sass sass/main.scss css/style.comp.css",
“concat-css”：“concat -o css/style.concat.css css/additional.css css/style.comp.css”
},
连接css : 是我们的脚本名称。 连接 -o css/style.concat.css 是我们的包输出文件。 css/additional.css css/style.comp.css 是我们要连接的 CSS 文件。
我们需要安装 连接 npm 包，然后运行以下命令：
npm install concat --save-dev
安装完成后，您会看到它列在 “开发依赖” 你的 package.json。
现在运行 concat 以确保它正常工作。
npm 运行 concat-css
您现在将看到 样式.concat.css CSS 目录中的输出文件。打开它并查看你的 CSS，你会看到你的内容 附加.css 和你的 样式.comp.css 已合并为一。
前缀
我们现在继续在我们的构建中添加前缀。我们的脚本现在如下所示：
“脚本”：{
"watch-sass": "node-sass sass/main.scss css/style.css --watch",
"compile-sass": "node-sass sass/main.scss css/style.comp.css",
"concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
“prefix-css”：“postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css”
},
前缀 CSS : 是我们的脚本名称。 postcss --使用自动前缀 选择自动前缀。 -b '最近 5 个版本' 我们指定我们希望我们的自动前缀覆盖哪些浏览器版本。 css/style.concat.css 是我们的输入文件。 -o css/style.prefix.css 我们指定我们的输出文件。
我们正在使用 npm 自动前缀 包，需要通过运行来安装：
npm install autoprefixer --save-dev
我们还需要安装 后CSS （自动前缀是这个插件的一部分）。我们使用以下命令：
npm install postcss-cli --save-dev
然后运行脚本如下：
npm 运行前缀-css
它将生成我们的 css/style.prefix.css 文件。查看此文件中的代码，您会看到已为您添加了浏览器前缀。这很棒，因为我们现在可以忘记前缀并专注于编写干净的代码！
压缩
我们现在处于构建过程的最后一步。让我们将以下行添加到我们的脚本中：
“脚本”：{
"watch-sass": "node-sass sass/main.scss css/style.css --watch",
"compile-sass": "node-sass sass/main.scss css/style.comp.css",
"concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
“prefix-css”: “postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css”,
"compress-css": "node-sass css/style.prefix.css css/style.css --output-style 压缩"
},
这是一个很容易的。在这里，我们所做的就是告诉我们 css/style.prefix.css 输入文件，输出到 css/style.css .这 --输出风格压缩 选项将压缩代码。
让我们测试一下。
npm 运行压缩 css
现在看看你的 样式.css 文件。您会看到您的所有样式都压缩为一行代码！所有空白和评论已被删除。您可以比较您的文件大小 样式.前缀.css 新生成的输入文件 样式.css 文件，查看压缩文件的大小。通过这个简单的步骤，我们显着减少了页面负载！
建造
现在让我们编写一个最终脚本来一次运行所有内容！添加以下内容：
“脚本”：{
"watch-sass": "node-sass sass/main.scss css/style.css --watch",
"compile-sass": "node-sass sass/main.scss css/style.comp.css",
"concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
“prefix-css”: “postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css”,
"compress-css": "node-sass css/style.prefix.css css/style.css --output-style 压缩",
“build-css”：“npm-run-all compile-sass concat-css prefix-css compress-css”
},
在这里，我们简单地添加了所有任务 编译-sass , 连接css , 前缀 CSS & 压缩css 当我们执行我们的构建命令时运行。
我们使用 npm-运行-所有 包以确保它适用于所有平台。输入以下命令：
npm install npm-run-all --save-dev
让我们进行最终测试以确认一切正常。删除所有文件（除了 附加.css )，来自 CSS 文件夹。完成后，运行构建命令：
npm 运行 build-css
给你！你所有的 CSS 文件都是用这个命令生成的——强大的东西！
要在未来的项目中获得此构建设置，您需要做的就是复制 脚本 和 开发依赖 从此项目中，进入新项目的 package.json 并运行 npm 安装 .
概括
我们现在已经为我们的 Sass 项目创建了一个构建过程！我们可以使用单个命令编译、合并、添加前缀和压缩样式表。因此，我们显着改进了我们的开发工作流程。
结论
如果你喜欢这篇博文和这个 萨斯系列 ，跟着我 推特 我每天都会在这里发布有关技术相关的事情！
让我们联系
最初发表于 https://dev.to 2022 年 9 月 6 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
