開始使用

什麼是建置流程？

建置流程是一系列通常自動化的任務，每次您要部署應用程式的新版本時都會執行。 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 時它已經過最佳化。在大多數情況下，您不需要在您的網路伺服器上安裝 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。

您也可以使用 webpack plugin 搭配 cssnano

請參閱 PostCSS 文件以了解其他可用的運行器。

最後更新時間：2024 年 6 月 5 日星期三 10:27:34 GMT