How shall we post process .js files?

[hashborgir]

This is how I consolidate many JavaScript resources into one on production:

I place everything in project_root/assets/

{{ $bs := resources.Get "bootstrap.js" | minify }}
{{ $owl := resources.Get "owl.js" }}
{{ $front := resources.Get "front.js" }}
{{ $pf := resources.Get "pagefind-ui.js" }}

{{ if hugo.IsProduction }}
    {{ $js := slice $bs $front $owl $pf | resources.Concat "js/js.js"}}
    <script async defer  src="{{ $js.Permalink }}"></script>
{{ else }}
    <script async defer src="{{ $bs.Permalink }}"></script>
    <script async defer src="{{ $owl.Permalink }}"></script>
    <script async defer src="{{ $front.Permalink }}"></script>
    <script async defer src="{{ $pf.Permalink }}"></script>
{{ end }}

However, loading the CSS and JS file through here seems to have no effect, and the front end plugin no longer functions.

This costs two extra requests to be made, adding some milliseconds. If we can serve the resources through Hugo, conslidate them into existing requests, that would be amazing.

Please advise.

[bglw]

Hmm, loading through there should work correctly if those assets exist. Typically they aren't created until pagefind runs after the build, but if copied into the assets directory things should function correctly. The one file that cannot be bundled is the pagefind.js file that is lazy-loaded — the UI will be attempting to load that file from /_pagefind/pagefind.js by default and I imagine this will be the issue.

If this file is in a different location, you can use PagefindUI's bundlePath option to point to that folder.

Let me know if that's on the right track — if it isn't, would you be willing to put together a reproduction repository that I can take a look at? That would be easier to provide advice on 🙂

[hashborgir]

I did not mark it as completed. I think I miss-clicked somewhere.

    {{ $base := resources.Get "base.css" }}
    {{ $custom := resources.Get "custom.css" }}
    {{ $pf := resources.Get "pagefind-ui.css" }}

    {{ if hugo.IsProduction }}
    {{ $css := slice $base $custom $pf | resources.Concat "css/style.css" | resources.Minify | resources.PostCSS | resources.PostProcess }}
    <link href="{{ $css.Permalink  }}" rel="stylesheet" />
    {{ else }}
        <link href="{{ $base.Permalink }}" rel="stylesheet" />
    <link href="{{ $custom.Permalink }}" rel="stylesheet" />
    <link href="{{ $pf.Permalink }}" rel="stylesheet" />
    {{ end }}

{{ $bs := resources.Get "bootstrap.js" | minify }}
{{ $owl := resources.Get "owl.js" }}
{{ $front := resources.Get "front.js" }}
{{ $pf := resources.Get "pagefind-ui.js" }}

{{ if hugo.IsProduction }}
    {{ $js := slice $bs $front $owl $pf | resources.Concat "js/js.js"}}
    <script async defer  src="{{ $js.Permalink }}"></script>
{{ else }}
    <script async defer src="{{ $bs.Permalink }}"></script>
    <script async defer src="{{ $pf.Permalink }}"></script>
    <script async defer src="{{ $owl.Permalink }}"></script>
    <script async defer src="{{ $front.Permalink }}"></script>
{{ end }}

Here's how I'm loading the resources from /assets

In console I see this:

js.js:266 Uncaught ReferenceError: bundlePath is not defined at js.js:266:39547 at js.js:266:40541 (index):36 Uncaught ReferenceError: PagefindUI is not defined at (index):36:715

I'm not trying to load pagefind.js just the frontend resources.

I can only share the repository link privately, and not on github publicly.

[bglw]

If you can share something with me on GitHub (bglw) or over email (liam <at> cloudcannon.com) I'll take a look 🙂

[bglw]

Hi @hashborgir 👋

An update — as of the next stable release the UI will also be distributed as an npm package as an alternative option to using the files output by the CLI, which will help with bundling/processing.

I did also track down the console error you referenced above to a bug, which will be fixed in the next release.

[hashborgir]

Hi, sorry I've been busy. Let me get something together for you to look over. I invited you to the Gitlab project as developer, by email. Please accept and take a look when you can.

Pagefind code would be in themes/hugo-universal-theme/layouts/partials/head.html and themes/hugo-universal-theme/layouts/partials/scripts.html for the Javascript bit, and /assets is where I've copied the files.

[hashborgir]

An update — as of the next stable release the UI will also be distributed as an npm package as an alternative option to using the files output by the CLI, which will help with bundling/processing.

What about users who don't use node? I don't use it. I don't want node on any of my systems. I absolutely hate doing anything in/with javascript. So there needs to be a clean way to load assets from Hugo. I cannot stress this enough. It has to not depend on anything external but just Hugo.

EDIT: I read your answer in the other post. Thanks!

[bglw]

Hi @hashborgir I haven't had a chance to look at the code directly yet, but release v0.11.0 should have fixed the console error which may have been the only issue at play here. Give this another go and let me know if that works out, if not I'll take a closer look.