resources.PostProcess
语法
resources.PostProcess RESOURCE
返回值
postpub.PostPublishedResource
{{ with resources.Get "css/main.css" }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }}
{{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
{{ end }}
使用 resources.PostProcess 标记资源会将转换推迟到构建完成后。
当转换链中的一个或多个步骤依赖于构建结果时，调用 resources.PostProcess。
一个主要用例是使用 PostCSS Node.js 包的 PurgeCSS 插件清除未使用的 CSS 规则。
CSS 清除
- 步骤 1
- 安装 Node.js。
- 步骤 2
- 在项目的根目录中安装所需的 Node.js 包
npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
- 步骤 3
- 在项目的根目录中创建一个 PostCSS 配置文件。你必须将此文件命名为
postcss.config.js或其他 支持的文件名。例如
const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./hugo_stats.json'],
defaultExtractor: content => {
const els = JSON.parse(content).htmlElements;
return [
...(els.tags || []),
...(els.classes || []),
...(els.ids || []),
];
},
// https://purgecss.node.org.cn/safelisting.html
safelist: []
});
module.exports = {
plugins: [
autoprefixer,
process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
]
};
- 步骤 4
- 在构建站点时启用
hugo_stats.json文件的创建。如果你仅将此用于生产构建，请考虑将其放置在config/production下方。
hugo.
build:
buildStats:
enable: true
[build]
[build.buildStats]
enable = true
{
"build": {
"buildStats": {
"enable": true
}
}
}
有关详细信息和选项，请参阅配置构建文档。
- 步骤 5
- 将你的 CSS 文件放置在
assets/css目录中。 - 步骤 6
- 如果当前环境不是
development，则使用 PostCSS 处理资源
{{ with resources.Get "css/main.css" }}
{{ if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ else }}
{{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ end }}
{{ end }}
环境变量
Hugo 将这些环境变量传递给 PostCSS，这允许你执行以下操作
process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []
- PWD
- 项目工作目录的绝对路径。
- HUGO_ENVIRONMENT
- 当前的 Hugo 环境，使用
--environment命令行标志设置。对于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';
限制
运行 Hugo 的内置开发服务器时，请勿使用 resources.PostProcess。上面的示例通过验证当前环境不是“development”来专门阻止这种情况。
resources.PostProcess 函数仅在生成 HTML 文件的模板中有效。
你不能操作从资源的方法返回的值。例如，此示例中的 strings.ToUpper 函数将无法按预期工作
{{ $css := resources.Get "css/main.css" }}
{{ $css = $css | css.PostCSS | minify | fingerprint | resources.PostProcess }}
{{ $css.RelPermalink | strings.ToUpper }}