后处理

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 清理步骤”仅应用于生产构建。这意味着你需要像这样在你的 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';