resources.PostProcess
Syntax
resources.PostProcess RESOURCE
Returns
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 || []),
];
},
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_:文件名:命名的环境变量，其中:文件名:是全部大写，并用下划线替换句点。这允许你进行如下操作：
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 | resources.PostCSS | minify | fingerprint | resources.PostProcess }}
{{ $css.RelPermalink | strings.ToUpper }}