gulp常用插件之cssnano使用

更多gulp常用插件使用请访问：gulp常用插件汇总

---

cssnano这是一款将你的 CSS 文件做 多方面的的优化，以确保最终生成的文件 对生产环境来说体积是最小的插件。

更多使用文档请点击访问chai工具官网。

安装

一键安装不多解释

npm install --save-dev 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）。