通过创建构建流程，使您的 CSS 能够用于生产环境。

大家好👋 你们知道吗，我刚开始学CSS的时候，大部分时间都只是写一些简单的CSS代码，从来没想过接下来会发生什么！比如，我们怎样才能优化设计，让它兼容所有类型的浏览器，并且加载速度更快呢？那岂不是很棒吗？🤷‍♂️

🚩 简介

当然，那太棒了！😎 所以，这部分内容将着重于优化你的 CSS设计，从而提升页面加载速度🚀，并确保你的设计与所有浏览器兼容。💻 而且，务必让你的 CSS 达到生产就绪状态，以便充分发挥 CSS 的潜力。🎉

👀 我们需要什么？

我们将从 npm 安装几个包，所以你需要先安装 Node.js。如果还没有安装，请立即从这里安装。另外，如果你感到头晕，喝杯咖啡提提神，就没问题了。☕

📌 安装依赖项

让我们使用npm init --y（--y表示默认值）创建一个新项目。

我们将要安装的依赖项（作为开发依赖项）如下：

• node-sass（用于压缩我们的 CSS 文件，也可以在需要时将 .scss 文件编译为 css 文件）
• concat（用于连接多个文件）
• 自动前缀生成器（主要用于自动添加 CSS 标签前缀）
• postcss-cli（autoprefixer 是 postcss 的一个插件，因此也需要它）
• npm-run-all（一个用于并行或顺序运行多个 npm 脚本的 CLI 工具）

因此，请在终端运行此命令npm install node-sass concat autoprefixer postcss-cli npm-run-all --save-dev。现在让我们编写一些脚本package.json来执行我们的进程。

👨‍💻 编写执行脚本

我将在下方（package.json 文件中）展示 scripts 对象，稍后会逐一解释。如果有什么不明白的地方，可以参考这些解释。

    "scripts": {
        "compile:sass": "node-sass sass/main.scss css/style.comp.css",
        "concat:css": "concat -o css/style.concat.css css/style.comp.css css/any-other-file.css",
        "prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.comp.css -o css/style.prefix.css",
        "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
        "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
    }

在解释之前，我想先说明一下，我们的 Sass 代码位于sass/main.scss，它会被处理并存储在css/文件夹中。（如果您没有编写 Sass 代码，请创建两个文件夹：一个作为输入文件夹，用于存放您自己编写的 CSS 代码；另一个作为输出文件夹，用于存放程序执行后生成的 CSS 文件。）
附注：文件夹名称可以随意命名。

🙌 解释

您只需在终端npm run <your-command-name>中输入以下命令即可运行这些脚本。

☑ = 要输入的

文件 ✅ = 要输出的文件

1️⃣ compile:sass （可选）

只有当你使用 Sass 编写代码时才需要这一步，否则可以跳过。🏂 这会将你的 Sass 代码编译成浏览器可读的 CSS。

• node-sass：📌 包裹名称
• sass/main.scss：☑ 我们手动编写的 Sass 文件的地址
• css/style.comp.css✅ CSS 文件输出结果的存储地址

2️⃣ concat:css （可选）

如果你的 CSS 文件在多个文件中，那么你可能需要将它们合并到一个 CSS 文件中，这样对浏览器来说更好，因为浏览器只需要发出一个 HTTP 请求而不是两个。

• concat：📌 包裹名称
• -o/ --output：表示输出文件
• css/style.concat.css✅ 输出文件的地址，所有合并后的 CSS 文件将存储于此。
• css/style.comp.css：☑ 步骤 1 返回的文件
• css/any-other-file.css☑ 任何其他需要在最终版本中合并的 CSS 文件

PS：如果您只有一个文件，则此步骤没有意义。因此，请跳过此步骤，但请务必记录整个过程，即哪个文件是从哪个步骤返回的，哪个文件正在被放入。

3️⃣prefix:css

使用此命令，您的 CSS 将拥有类似 `<v1>` -webkit-、-moz`<v2> -ms-` 和-o-`<v3>` 这样的厂商前缀，否则您需要手动添加这些前缀。

厂商前缀是一种浏览器厂商在所有浏览器完全支持新的 CSS 功能之前，为其添加支持的方式。

为什么要在网站中使用 CSS 供应商前缀？以及应该如何操作？

• postcss：📌 包名（autoprefixer 是 postcss 的一部分）
• --use：可使用的 PostCSS 插件列表（例如autoprefixer，此处）
• autoprefixer：用于添加 CSS 前缀的包名
• -b：b 代表浏览器，因此我们可以指定要使我们的 CSS 与哪些浏览器兼容。
• "last 10 versions"：此操作会从caniuse.com获取所有主流浏览器的最新 10 个版本。
• css/style.concat.css：☑ 我们要放入的文件的地址
• -o：输出选项
• css/style.prefix.css✅ 输出文件地址

PS：在编写过程中last 10 versions我遇到了一个问题，这是因为双引号被包含在另一个双引号内，所以我们需要\在每个双引号内的双引号前使用转义符来转义它。

4️⃣compress:css

这将大大减小您的 CSS 文件大小，从而加快页面加载速度。

• node-sass：📌 包裹名称
• css/style.prefix.css：☑ 包含此命令输入的文件（未压缩的 CSS）
• css/style.css✅ 输出文件（压缩后的 CSS）的地址
• --output-style compressed：执行压缩的命令

PS：您可以选择将压缩后的 CSS 输出到另一个 CSS 文件中，这样style.min.css也可以，但是您需要在 HTML 中添加一个链接标签来包含它。

5️⃣️build:css

最后，你希望通过运行一个命令来完成所有这些操作。

• npm-run-all：📌 包裹名称
• compile:sass concat:css prefix:css compress:css命令列表，按执行顺序排列。

有趣的小知识： 😉 你可以--parallel在这里给包名加上 `--prod` 参数来同时运行所有进程，这在某些情况下很有用，但在这里却不适用。为什么呢？因为在这里，每个脚本都像一个函数，它接收一个文件作为输入，并且下一个函数/脚本需要使用其输出文件，如果它们同时运行，这就无法实现。

附注：所有输出文件将自动创建，因此我们无需单独创建它们。

🤝 结论

最后，我们已经设置好了构建流程，这意味着你的项目现在只需再执行一条命令即可部署🤘 npm-run-all build:css。简而言之🥜，这个过程是：

• 将你的所有 CSS 文件合并到一个文件中，以最大限度地减少你发出的 HTTP 请求数量。
• 它通过从caniuse.com获取数据，自动为各种浏览器 设置所需标签的前缀，无需手动操作。
• 使浏览器中使用的最终 CSS 文件压缩得更快，这意味着页面加载速度更快。

💖轮到你了

我热爱写作，也热爱学习新技术。然而，事实是，这条路从来都不是一帆风顺的。而这正是我写作的唯一原因，因为这些正是我作为初学者时曾经面临的问题，我希望能够帮助那些和我一样有这些疑问的人。

所以我很好奇，作为初学者，你曾经遇到过或正在遇到过哪些困难或问题？🤷‍♂️ 请在本帖回复，我们可以互相学习。