PostProcess

Syntax

resources.PostProcess RESOURCE

Returns

postpub.PostPublishedResource

使用方法

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

此功能的主要用例是使用 PostCSS 进行 CSS 清理。

目前有两个限制：

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

您无法操作资源方法返回的值。例如，此示例中的 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 下。

hugo.

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 | 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: 发布目录（ 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';