入门

什么是构建流程?

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

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

安装 Node.js 和 npm

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

我们要求的最低版本是 Node.js 6.9.0 版本和 npm 3.10.8 版本,并且我们 建议你安装 nvm 来管理 你所安装的 Node.js 版本。

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

安装 Node.js 和 npm 之后,你就可以进入你的项目目录运行如下命令来安装 cssnano 了:

npm install cssnano --save-dev

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

使用 PostCSS 命令行工具(CLI)

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

通过以下命令安装 PostCSS CLI

npm install postcss-cli --global

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

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

关于预设(preset)请参考 预设(preset)指南

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

postcss input.css > output.css

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

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

命令行工具(CLI)的替代方案

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

Grunt

使用 grunt-postcss

Gulp

使用 gulp-postcss

Webpack

将 cssnano 与 postcss-loader 一起使用。

其它

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

接下来是

优化