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