Hugo

Hugo 是最受欢迎的开源静态站点生成器之一。凭借其惊人的速度和灵活性，Hugo 让构建网站再次变得有趣。

可以通过 Hugo Pipes 资源处理在 Hugo 中使用 PurgeCSS。

工具准备

  1. 安装 Hugo
  2. 安装 Node.js

写入统计信息

在你的 config.toml 文件中，添加以下内容：

[build]
  [build.buildStats]
    enable = true

或者，如果使用 config.yaml 文件，添加：

build:
  buildStats:
    enable: true

这会告诉 Hugo 在项目根目录生成一个 hugo_stats.json 文件。它包含你的 *.html 模板中的所有标签、类和 ID。

你还应该将 hugo_stats.json 添加到 Hugo 的服务器监视器中：

[module]
  [module.hugoVersion]
    extended = false
    min      = "0.115.0"
  [[module.mounts]]
    source = "assets"
    target = "assets"
  [[module.mounts]]
    source = "hugo_stats.json"
    target = "assets/watching/hugo_stats.json"

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 文件，内容如下：

import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';

const purgecss = purgeCSSPlugin({
  content: ["./hugo_stats.json"],
  defaultExtractor: (content) => {
    const els = JSON.parse(content).htmlElements;
    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])];
  },
  safelist: [],
});

export default {
  plugins: [
    ...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
  ],
};

有关每个选项的详细信息，请参阅 PurgeCSS 配置文档。

注意： safelist 目前是一个空数组。请记住，只提取 HTML 模板中的元素。因此，如果 JS 添加了元素，你需要将它们添加到安全列表中。

HTML 模板

在 HTML 模板的 <head> 中添加：

{{ $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

打开浏览器开发者工具，转到网络选项卡，注意 CSS 文件的大小。

现在，按 Control + C 停止它，然后在生产模式下服务你的站点：

hugo serve --environment production

注意 CSS 文件现在的大小要小得多。

环境

如果你不想传递 --environment production 选项，可以设置此环境变量：

HUGO_ENVIRONMENT=production

参考资料