Hugo
Hugo 是最流行的开源静态网站生成器之一。凭借其惊人的速度和灵活性，Hugo 让构建网站再次变得有趣。
PurgeCSS 可通过 Hugo Pipes 资产处理与 Hugo 一起使用。
工具
编写统计信息
在 config.toml 文件中，添加以下内容
[build]
writeStats = true
或者，如果使用 config.yaml 文件，则添加以下内容
build:
writeStats: true
这告诉 Hugo 将一个 hugo_stats.json 文件作为构建的一部分写入项目根目录。它包含所有来自 *.html 模板的标签、类和 ID。
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，转到 Network 选项卡，然后记下 CSS 文件的大小。
现在，按 Control + C 停止它，然后以生产模式提供你的网站
hugo serve --environment production
请注意，CSS 文件现在的大小小得多。
环境
如果你不想传递 --environment production 选项，则可以设置此环境变量
HUGO_ENVIRONMENT=production