Export minification and fingerprint hashes/filenames

I am currently trying to extract minification and fingerprint details during the build process to be used in other platforms. For example I want to include the minified files, including the fingerprint in adjacent properties. I want to be able to export these details to a json file or some other file to be used when building other applications in a monorepo.

<link
  rel="stylesheet"
  href="/css/main2.min.3e5c9b5cc2ff2e10f72210c82a941ac5968c57e63ef53ace839d3ba01bc552cf.css"
  integrity="sha256-PlybXML/LhD3IhDIKpQaxZaMV+Y+9TrOg507oBvFUs8="
/>

And my template with pipes looks like this

{{ $css := resources.Get "css/main2.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
	{{ $css = $css | minify | resources.PostProcess | fingerprint "sha384" }}
{{ end }}

<link
  rel="stylesheet"
  href="{{ $css.Permalink }}"
  integrity="{{ $css.Data.Integrity }}"
/>

Is there a suggested way to do this? Do I need to make a custom pipe that can take the “$css” variable and extract them out?

Ideally I’d create a json file with a list of original files and their minify/fingerprint details. There are files like resources/_gen/assets/css/main2.css_....json but they include the minified url and fingerprint, but this is hard to extract programmatically as the filename includes hashed details in it.

Please provide an example of the desired JSON file.

Lets say something like this.

[{ "target": "css/main2.css", "hash": "3e5c9b5cc2ff2e10f72210c82a941ac5968c57e63ef53ace839d3ba01bc552cf", "integrity": "sha256-PlybXML/LhD3IhDIKpQaxZaMV+Y+9TrOg507oBvFUs8=" }]

In my resources/_gen I have files like main2.css_53d8db2e382030cdec351f02c8b70385.json but I have currently 5 different of these types of files (meaning the different hashes after the css filename).

{"Target":"css/main2.min.3e5c9b5cc2ff2e10f72210c82a941ac5968c57e63ef53ace839d3ba01bc552cf.css","MediaType":"text/css","Data":{"Integrity":"sha256-PlybXML/LhD3IhDIKpQaxZaMV+Y+9TrOg507oBvFUs8="}}

If I were to use a file like this, how do I know which one is the current one? It seems new ones are created but I am not sure when they are made, and if I need “older” ones of these files to continue to exist.

layouts/_default/baseof.html

{{/* Build the link element */}}
{{ $css := resources.Get "css/main2.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
  {{ $css = $css | minify | fingerprint "sha256" | resources.PostProcess }}
{{ end }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">

{{/* Create a json file in /public/export/stylesheet.json.html */}}
{{ $m := dict
  "Target" $css.RelPermalink
  "MediaType" "text/css"
  "Data" (dict
    "Integrity" $css.Data.Integrity
  )
}}
{{ (jsonify (dict "indent" "  ") $m | resources.FromString "export/stylesheet.json.html").Publish }}

public/export/stylesheet.json.html

{
  "Data": {
    "Integrity": "sha256-FcQqt3aNlV7AZnGV4zkQRVeCeJOxbMPnQSx258L803E="
  },
  "MediaType": "text/css",
  "Target": "/css/main2.min.15c42ab7768d955ec0667195e339104557827893b16cc3e7412c76e7c2fcd371.css"
}

If you try to remove the “html” extension from the exported filename, you’ll get what look like placeholders instead of data. Maybe a bug; not sure.

2 Likes

This looks great! Thanks for taking the time to help.

Ultimately went with this if anyone wants it. Composes all the css files in the slice together into the export with their target, file, and integrity.

{{- $cssFiles := slice "fonts/kalam/stylesheet.css" "fonts/plex/font.css" "css/main2.css" "css/main-nav-bar.css" -}}
{{- $exported := slice -}}
{{- range $cssFiles -}} 
	{{- $css := resources.Get . -}}
	{{- $css = $css | resources.PostCSS -}}
	{{- if hugo.IsProduction -}}
		{{- $css = $css | minify | fingerprint "sha384"| resources.PostProcess  -}}
	{{- end -}}

	{{- $m := dict
			"file" .
			"target" $css.RelPermalink
			"mediaType" "text/css"
			"integrity" $css.Data.Integrity
	-}}
      {{- $exported = $exported | append $m -}}

	<link
		rel="stylesheet"
		href="{{ $css.Permalink }}"
		integrity="{{ $css.Data.Integrity }}"
	/>
{{- end -}}

{{- (jsonify (dict "indent" "  ") $exported | resources.FromString "export/stylesheet.json.html").Publish -}}

Tried a few options for the export, along the lines of the .html thing you were saying. Going to make a bug report about it to figure out why that’s the case. I can work around the .html thing for now.

Thanks again.

Support PostProcess for other than HTML · Issue #10269 · gohugoio/hugo · GitHub bug reported and reportedly resolved.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.