后处理

resources.PostProcess RESOURCE

postpub.PostPublishedResource

用法

使用resources.PostProcess标记资源会将任何转换延迟到构建之后，通常是因为转换链中的一个或多个步骤依赖于构建的结果（例如，public中的文件）。

这方面的一个主要用例是使用 PostCSS 进行 CSS 清理。

目前，这有两个限制

1. 这仅适用于*.html模板（即生成 HTML 文件的模板）。

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

   {{ $css := resources.Get "css/main.css" }}
   {{ $css = $css | css.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 清理步骤”仅应用于生产构建。这意味着您需要在头部模板中执行以下操作来构建和包含您的 CSS

{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | css.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

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';