calendar

HugoでJavaScriptやCSSを圧縮する方法

category Hugo
tag Hugo tag 設定 tag Minify
toc目次

はじめに

HugoでJavaScriptやCSSを圧縮する方法のメモです。

Hugoでは、組み込み関数のresources.Minifyを使用することでJavaScriptやCSSを圧縮する事ができます。

JavaScriptやCSSを圧縮する手順

アセットディレクトリの作成

resources関数で扱うアセットはアセットディレクトリ（/assets）に保存する必要があります。

アセットディレクトリはデフォルトでは作成されないため、Hugoプロジェクトのルートディレクトリにassetsフォルダーを作成します。

Hugoプロジェクト/
  ├── archetypes/
  │   └── default.md
  ├── assets/
  ├── content/
  ├── data/
  ├── layouts/
  ├── public/
  ├── static/
  ├── themes/
  └── hugo.toml

JavaScript、CSSの配置

assetsフォルダーに圧縮したいJavaScriptファイルやCSSファイルを配置します。
（assetsフォルダー内にサブフォルダーを作成して配置しても問題有りません。）

assets/
  └── css/
       └── sample.css

上記はassetsフォルダー内にcssフォルダーを作成して、sample.cssを配置しています。

テンプレート修正

Hugoのテンプレートファイル（layouts\_default\baseof.html）の<head>タグ内にコードを追加します。

{{- with resources.Get "css/sample.css" }}
  {{- with . | minify  }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- end }}
{{- end }}

上記はresources.Getでグローバルリソース（sample.css）を取得し、minifyで圧縮しています。

hugo serverコマンドでHTMLを出力すると、CSSファイルが圧縮され、sample.min.cssという名前でリンクが作成されます。

<link rel="stylesheet" href="/css/sample.min.css">

参考