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）。