Hugo
Hugo 是最受歡迎的開源靜態網站產生器之一。Hugo 速度驚人且彈性十足，讓建立網站再次變得有趣。
PurgeCSS 可透過 Hugo Pipes 資產處理與 Hugo 搭配使用。
工具
寫入統計資料
在 config.toml 檔案中，新增以下內容
[build]
writeStats = true
或者，如果使用 config.yaml 檔案，新增以下內容
build:
writeStats: true
這會指示 Hugo 在建置時將 hugo_stats.json 檔案寫入專案根目錄。它包含所有來自 *.html 範本的標籤、類別和識別碼。
Node 套件
如果專案根目錄的 package.json 檔案尚未存在（用於追蹤所有 Node 相依性），請從專案根目錄執行此指令以建立檔案
npm init
你可以輸入任意多或少的資訊。建立檔案後，你可以繼續安裝套件。
從專案根目錄執行以下指令以安裝必要的套件
npm install postcss postcss-cli @fullhuman/postcss-purgecss --save
這些套件將安裝到一個名為 node_modules 的資料夾中，並也會新增到您的 package.json 檔案。
如果尚未存在，請將 node_modules/ 新增到您的 .gitignore 檔案。
PostCSS 設定檔
在專案根目錄建立一個 postcss.config.js 檔案，並輸入以下內容
const purgecss = require("@fullhuman/postcss-purgecss")({
content: ["./hugo_stats.json"],
defaultExtractor: (content) => {
const els = JSON.parse(content).htmlElements;
return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])];
},
safelist: [],
});
module.exports = {
plugins: [
...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
],
};
請參閱 PurgeCSS 設定文件 以了解每個選項的詳細資訊。
注意： safelist 目前是一個空陣列。請記住，只有從 HTML 範本中萃取的元素。因此，如果您的 JS 新增了元素，您需要將它們列入安全清單。
HTML 範本
在 <head> 的 HTML 範本中，新增以下內容
{{ $css := resources.Get "css/style.css" | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link
rel="stylesheet"
href="{{ $css.RelPermalink }}"
{{ if hugo.IsProduction -}}
integrity="{{ $css.Data.Integrity }}"
{{- end }}
/>
這假設
- 您的 CSS 檔案位於
assets/css/style.css - 您想要縮小並對此檔案的正式版本進行指紋辨識
如果這些假設不適用於您，請適當地修改程式碼。
使用它
太棒了，現在我們可以使用它了。
以開發模式提供您的網站，這是預設值
hugo serve
開啟瀏覽器 DevTools，前往「網路」標籤，然後記下 CSS 檔案的大小。
現在，按 Control + C 停止它，然後以正式模式提供您的網站
hugo serve --environment production
請注意，CSS 檔案現在的尺寸小很多。
環境
如果您不想傳遞 --environment production 選項，您可以設定這個環境變數
HUGO_ENVIRONMENT=production