ASSET MANAGEMENT

PostProcess

用法

使用 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 目錄中。

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 清除步驟」將僅在生產環境中應用。這意味著您需要在頭部模板中進行如下操作來構建並包含您的 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" />

Hugo 環境變數在 PostCSS 中的應用

這些是 Hugo 傳遞給 PostCSS（和 Babel）的環境變數，允許您像這樣使用：process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : [] 及類似方式：

PWD
專案工作目錄的絕對路徑。
HUGO_ENVIRONMENT
由 hugo -e production 設定的值（預設為 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';
安全模型 Page collections