入门

什么是构建流程？

构建流程通常是一系列自动化的任务，在你每次需要部署应用程序的新版本时都需要运行这些任务。cssnano 适合用在这样的构建流程中并作为一个 CSS 开发工具继而创建用于生产环境的压缩资源。最后将这些资源上传到你的生产服务器或 CDN 。

有许多不同的方式可用于组织一个构建流程。我们建议使用命令行方式，但是你可能仍需要考虑使用类似 gulp 这样的工具，尤其是需要应对对更复杂的系统的情况下。

cssnano 可以通过命令行工具来安装，例如npm。因此你需要使用一个类似功能的终端或 Windows 命令行工具。如果你还没有安装 Node.js，那么需要遵循以下说明来安装：

我们要求的最低版本是 Node.js 10.13.0，并且我们建议你安装 nvm 来管理你所安装的 Node.js 版本。

或者，你可以访问 Node.js 官网并按照官网的说明将 Node.js 安装到你的机器上。

cssnano 是一个 PostCSS 插件，因此要想运行 cssnano 的化就需要安装 PostCSS。安装 Node.js 和 npm 之后，你就可以进入你的项目目录运行如下命令来安装 cssnano 和 PostCSS 了：

npm install cssnano postcss --save-dev

注意，对于大多数典型的设置，我们建议你的开发过程中也对 CSS 进行压缩，以便在将 CSS 文件上传到你的服务器或 CDN 上时已经进行了优化。在大多数情况下，你无需在 web 服务器上安装 cssnano。

安装 cssnano 之后，你需要一个 PostCSS 运行器（runner）来执行 CSS 文件的压缩工作。我们推荐使用 PostCSS 的命令行模块（postcss-cli），但是你也可以使用下一节中列出的任何替代方法。

通过以下命令安装 PostCSS CLI：

npm install --save-dev postcss-cli

完成此操作后，需要在项目的根目录中创建一个 postcss.config.js 文件来配置 cssnano。这既包含了 cssnano 也包含任何需要用到项目中的其它插件，例如：

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

关于预设（preset）请参考预设（preset）指南。

现在就可以压缩你的 CSS 文件了！通过在你的项目目录下创建一个名为 input.css 的文件，并输入一些样式代码，然后执行：

npx postcss input.css > output.css

然后你就可以看到一个包含相同样式代码但是被压缩过的 output.css 文件了！

注意，你还可以在 GitHub 仓库中找到一个基本示例以供学习。

你还可以使用任何其它的 PostCSS 运行器（runner）来管理 CSS 的压缩工作，下面列出的这些比较常用。

将 cssnano 与 postcss-loader 一起使用。

cssnano 还能与 webpack 插件一同使用

请参阅 PostCSS 文档了解更多可用的执行器（runner）。