Best Practice to Minification and Bundling Assets

support
1

Hi

I’m using 3 css for every page section, and one of them is unique, it will be based on page section or content

  • bulma.css
  • base.css
  • xxx.css (this will be different for every section or content)

my workflow is to minification and then bundling into one single css.

here’s my workaround

<!-- get base.css -->
{{ $base := resources.Get "css/base.css" }}
{{ $baseMini := $base | resources.Minify }}
<!-- get bulma.min.css -->
{{ $bulma := resources.Get "css/bulma.min.css" }}

<!-- css for the homepage -->
{{ if .IsHome }}	
	<!-- get front.css -->
	{{ $front := resources.Get "css/homepage/front.css" }}
	{{ $frontMini := $front | resources.Minify }}
	<!-- bundling the CSS -->
	{{ $bundlingFront := slice $bulma $baseMini $frontMini | resources.Concat "css/front.min.css" }}
	<!-- bundled CSS -->
	<link rel="stylesheet" type="text/css" href="{{ $bundlingFront.Permalink }}">
	<!-- some inline CSS -->
	<style type="text/css">
		{{ $headless := .Site.GetPage "page" "homepage" -}}
		{{- $reusablePages := $headless.Resources.Match "social*" -}}
		{{- range $reusablePages -}}
		.social-i::before {
			background-image: url({{ .Params.icon }});
		}
		{{- end }}

		{{ $headless := .Site.GetPage "page" "homepage" -}}
		{{- $reusablePages := $headless.Resources.Match "education*" -}}
		{{- range $reusablePages -}}
		.edu-i::before {
			background-image: url({{ .Params.icon }});
		}
		{{- end }}
	</style>
{{ end }}

<!-- css for the blog section -->
{{ if eq .Section "blog" }}
	<!-- get blog.css -->
	{{ $blog := resources.Get "css/blog/blog.css" }}
	{{ $blogMini := $blog | resources.Minify }}
	<!-- bundling the CSS -->
	{{ $bundlingBlog := slice $bulma $baseMini $blogMini | resources.Concat "css/blog.min.css" }}
	<!-- bundled CSS -->
	<link rel="stylesheet" type="text/css" href="{{ $bundlingBlog.Permalink }}">
{{ end }}

<!-- custom css for content about -->
{{ if $.Scratch.Get "about" }}
	<!-- get about.css -->
	{{ $about := resources.Get "css/custom/about.css" }}
	{{ $aboutMini := $about | resources.Minify }}
	<!-- bundling the CSS -->
	{{ $bundlingAbout := slice $bulma $baseMini $aboutMini | resources.Concat "css/about.min.css" }}
	<!-- bundled CSS -->
	<link rel="stylesheet" type="text/css" href="{{ $bundlingAbout.Permalink }}">
{{ end }}

<!-- css for pages  section -->
{{ if $.Scratch.Get "pages" }}
	<!-- get about.css -->
	{{ $pages := resources.Get "css/pages/pages.css" }}
	{{ $pagesMini := $pages | resources.Minify }}
	<!-- bundling the CSS -->
	{{ $bundlingPages := slice $bulma $baseMini $pagesMini | resources.Concat "css/page.min.css" }}
	<!-- bundled CSS -->
	<link rel="stylesheet" type="text/css" href="{{ $bundlingPages.Permalink }}">
{{ end }}

at first glance the code is working and Hugo create all the assets above without any error but when I stop the local server and run Hugo serve again the problem occurs. In this case in the pages section. It seems that Hugo did not include one of the css above (base.css) into the bundling css.

if I edit the css via text editor Hugo rebundling again all the assets like it used to be but the problem occurs again if I restart the local server again

Anyone here have a better aproach to using minification and bundling assets?

2

I would guess that this is a timing issue with your “{{ if $.Scratch.Get “about” }}” construcs.

3

You are right :clap: minification and bundling works fine after chage the .Scratch with something like ..Type plus .Params conditional

but I’m curious why and how {{ if $.Scratch.Get "" }} can cause timing issue?

thank you

4

Hard for me to say. Where do you set the “about” Scratch value?

5

in this case is on the layouts/pages/about.html

{{ define "id" }}
	{{ $.Scratch.Set "about" true }}
{{ end }}

by the way I use this .Scratch to mark each section, with the intention of making it easier for me to make logical conditions with if

6

Again, I’m not seeing the full picture, but the Set is obviously performed after the Get, and that will obviously not work as expected.