PostProcess

resources.PostProcess 资源

postpub.PostPublishedResource

用法

使用 resources.PostProcess 标记资源可以将转换推迟到构建之后，通常是因为转换链中的一个或多个步骤取决于构建结果（例如 public 文件夹中的文件）。

其中一个主要用例是使用 PostCSS 进行 CSS 清理（#CSS purging with PostCSS）。

目前有两个限制：

1. 仅在 *.html 模板中有效（即生成 HTML 文件的模板）。

2. 无法操作资源方法返回的值。例如，此示例中的 upper 不会按预期工作：

   {{ $css := resources.Get "css/main.css" }}
   {{ $css = $css | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
   {{ $css.RelPermalink | upper }}
   

使用 PostCSS 进行 CSS 清理

以下配置将在构建过程中将hugo_stats.json 文件写入到项目根目录。如果仅在生产构建中使用此配置，建议将其放置在 config/production 之下。

build:
  buildStats:
    enable: true

[build]
  [build.buildStats]
    enable = true

{
   "build": {
      "buildStats": {
         "enable": true
      }
   }
}

有关详细信息和选项，请参见配置构建 文档。

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [ './hugo_stats.json' ],
    defaultExtractor: (content) => {
        let els = JSON.parse(content).htmlElements;
        return els.tags.concat(els.classes, els.ids);
    }
});

module.exports = {
     plugins: [
         ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
     ]
 };

请注意，在上面的示例中，“CSS 清理步骤”仅适用于生产构建。这意味着您需要在 head 模板中执行类似以下操作来构建和包含 CSS：

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $css.RelPermalink }}" rel="stylesheet" />

PostCSS 中可用的 Hugo 环境变量

这些是 Hugo 传递给 PostCSS（和 Babel）的环境变量，允许您执行 process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [] 等操作：

PWD

项目工作目录的绝对路径。

HUGO_ENVIRONMENT

使用 hugo -e production 设置的值（hugo 默认为 production，hugo server 默认为 development）。

HUGO_PUBLISHDIR

New in v0.109.0 发布目录（public 目录）的绝对路径。请注意，即使在内存模式下运行 hugo server，该值仍将指向文件系统中的目录。如果在运行服务器时从 PostCSS 写入此文件夹，可以使用以下标志运行服务器：

hugo server --renderToDisk
hugo server --renderStaticToDisk

此外，Hugo 将为所有挂载在 assets/_jsconfig 目录下的文件添加环境变量。将通过以下正则表达式在项目根目录中设置默认挂载点：(babel|postcss|tailwind)\.config\.js。

这些环境变量的名称形式为 HUGO_FILE_:filename: ，其中 :filename: 全大写，点号替换为下划线。这样，您可以执行以下操作和类似操作：

let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';