Export minification and fingerprint hashes/filenames

support
1

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.

2

Please provide an example of the desired JSON file.

3

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.

4

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
5

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

6

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.

8

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

9

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