Asset bundling not picking up overrides?

support
1

Hi. I’m hope to have overlooked something very simple with JS asset bundling and minification.

I’m using the Hermit theme, and am overriding the layouts\_default\baseof.html as follows:

{{ $script := resources.Get "js/main.js" -}} <!-- from theme -->
{{ $ffoscript := resources.Get "js/fontfaceobserver.js" -}} <!-- mine -->
{{ $ffouser := resources.Get "js/ffo.js" -}} <!-- mine -->
{{ $js := slice $script $ffoscript $ffouser | resources.Concat "bundle.js" -}} <!-- this does not appear to work? -->
{{ $bundle := resources.Get "bundle.js" | minify | fingerprint -}}
<script src="{{ $bundle.Permalink }}" {{ printf "integrity=%q" $bundle.Data.Integrity | safeHTMLAttr }}></script>

This is because in the Hermit theme, while it does allow for adding custom JS files in extra_foot.html, those JS assets are not minimized.

The theme’s corresponding script section looks like this:

{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
{{- if templates.Exists "partials/extra-foot.html" -}}
{{ partial "extra-foot.html" . }}
{{- end }}

However, when running Hugo server, it outputs the following:

$hugo server -b http://hannagoodbar.app/ --disableFastRender --buildDrafts --buildFuture
Building sites … ERROR 2019/01/24 19:44:58 render of "page" failed: "/Users/hanna/documents/hannagoodbar.com/layouts/_default/baseof.html:39:24": execute of template failed: template: posts/single.html:39:24: executing "posts/single.html" at <resources.Get>: error calling Get: stat /Users/hanna/documents/hannagoodbar.com/themes/hermit/assets/bundle.js: no such file or directory
ERROR 2019/01/24 19:44:58 render of "page" failed: "/Users/hanna/documents/hannagoodbar.com/layouts/_default/baseof.html:39:24": execute of template failed: template: posts/single.html:39:24: executing "posts/single.html" at <resources.Get>: error calling Get: stat /Users/hanna/documents/hannagoodbar.com/themes/hermit/assets/bundle.js: no such file or directory
ERROR 2019/01/24 19:44:58 render of "page" failed: "/Users/hanna/documents/hannagoodbar.com/layouts/_default/baseof.html:39:24": execute of template failed: template: posts/single.html:39:24: executing "posts/single.html" at <resources.Get>: error calling Get: stat /Users/hanna/documents/hannagoodbar.com/themes/hermit/assets/bundle.js: no such file or directory
ERROR 2019/01/24 19:44:58 render of "page" failed: "/Users/hanna/documents/hannagoodbar.com/layouts/_default/baseof.html:39:24": execute of template failed: template: posts/single.html:39:24: executing "posts/single.html" at <resources.Get>: error calling Get: stat /Users/hanna/documents/hannagoodbar.com/themes/hermit/assets/bundle.js: no such file or directory
Total in 228 ms
Error: Error building site: failed to render pages: render of "page" failed: "/Users/hanna/documents/hannagoodbar.com/layouts/_default/baseof.html:39:24": execute of template failed: template: posts/single.html:39:24: executing "posts/single.html" at <resources.Get>: error calling Get: stat /Users/hanna/documents/hannagoodbar.com/themes/hermit/assets/bundle.js: no such file or directory

I have both an assets directory and resources directory under my project. These are in addition the the assets and resources directories in themes/hermit.

Am using Hugo 0.52 extended on Mac OS Mojave.

$hugo version
Hugo Static Site Generator v0.52/extended darwin/amd64 BuildDate: unknown

and

$hugo env
Hugo Static Site Generator v0.52/extended darwin/amd64 BuildDate: unknown
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.11.2"

The folder structure looks like this:

hannagoodbar.com
+ assets
   + js
      ffo.js
      fontfaceobserver.js
+ layouts
   + _default
      baseof.html
+ resources
   + _gen
      + assets
         + js
+ themes
   + hermit
      + assets
         + js
            main.js

Am I supposed to do something else before calling Hugo to bundle and minify the JS?

Thanks!

2 
{{ $js := slice $script $ffoscript $ffouser | resources.Concat "bundle.js" -}}
{{ $bundle := resources.Get "bundle.js" | minify | fingerprint -}}

Your bundle is already a resource, you don’t have to “.Get” it. By doing so you’re telling hugo to look at a js/bundle.js in your asset dir.

$js is your bundle, and you can use minify, fingerprint and eventually print its .Permalink.

1 Like
3

Ah, thank you! It wasn’t clear whether resources.Concat() would write the bundled file to the resources folder or not; so it just stores the entire bundle in the $js variable (in my case).

This updated snippet worked for me.

{{ $js := slice $script $ffoscript $ffouser | resources.Concat "js/bundle.js" | minify | fingerprint -}}
<script src="{{ $js.Permalink }}" {{ printf "integrity=%q" $js.Data.Integrity | safeHTMLAttr }}></script>

Thanks Regis for your help!

1 Like