入门

什么是构建过程？

构建过程是一系列任务，通常是自动化的，每次想要部署应用程序的新版本时都会运行这些任务。cssnano 作为构建过程中的一个工具，应该在开发 CSS 时运行，然后将创建压缩的生产资产。然后将这些资产上传到生产服务器或 CDN。

有许多不同的方法可以组成构建过程；我们建议使用命令行，但你可能还想考虑使用抽象，例如 gulp，特别是对于更复杂的系统。

cssnano 使用命令行安装，使用 npm；因此，你需要使用诸如终端或 Windows 命令提示符之类的应用程序。如果你尚未安装 Node.js，则需要安装它。

我们要求至少运行 Node.js 版本 10.13.0，我们建议你安装 nvm 来管理你的 Node.js 版本。

或者，你可以访问 Node.js 网站并按照那里的说明为你的机器安装它。

cssnano 是一个 PostCSS 插件，因此运行 cssnano 还需要安装 PostCSS。安装 Node.js 和 npm 后，你可以运行此命令将 cssnano 和 PostCSS 安装到你的项目中

npm install cssnano postcss --save-dev

请注意，对于大多数典型设置，我们建议你在部署步骤中压缩 CSS，以便在将其上传到服务器/CDN 时已对其进行优化。在大多数情况下，你不需要在 Web 服务器上安装 cssnano。

安装 cssnano 后，你需要一个 PostCSS 运行器才能使用它来压缩 CSS 文件。我们推荐 PostCSS 命令行模块，但你可以使用下一部分中列出的任何替代方案。

你可以使用此命令安装 PostCSS CLI

npm install --save-dev postcss-cli

完成此操作后，你需要通过在项目的根目录中创建一个 postcss.config.js 文件来配置 cssnano。这应该包含 cssnano 以及你可能希望用于项目的任何其他插件；例如

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

在我们的预设指南中阅读有关预设的更多信息。

现在，您可以压缩 CSS 文件！创建一个名为 input.css 的 CSS 文件，其中包含一些样式，然后运行，即可尝试一下

npx postcss input.css > output.css

然后，您应该会看到一个 output.css，其中包含相同的样式，但已压缩！

请注意，您还可以在我们的 GitHub 存储库中找到一个基本示例。

您还可以使用任何其他可用的 PostCSS 运行程序来管理 CSS 压缩；这些是最常见的。

您可以使用 postcss-loader 明确使用 cssnano。

您还可以将 cssnano 与 webpack 插件一起使用

请参阅 PostCSS 文档，了解其他可用的运行程序。

上次更新时间：2024 年 6 月 5 日星期三，上午 10:27:34（格林尼治标准时间）