Using resources.Concat with array from resources.Match

1

Thanks to @bep, I figured out how to use wildcards for gathering an array of CSS files using resources.Match. Now, I would like to concatenate these files into one mega CSS file.

This is the repository, with the config.yml and the code is in the head.html partial, line 10, where I append and then delimit 2 arrays:

{{ $appendage := append (resources.Match "*.css") (resources.Match "**/*.css") }}
{{ $delimiter := delimit $appendage " " }}

But whatever I try, I can’t seem to get resources.Concat working to create a single, unified CSS file (eg error calling Concat: slice template.HTML not supported in concat.

I have a hunch that it’s to do with how resources work, in relation to page bundles, as indicated in this question? But I’m a web designer & gardener by trade, so as much I enjoy working with Hugo, a lot of the inner workings are over my head.

Any help greatly appreciated, it’s the last step before I can get my Modular CSS workflow up and running :slightly_smiling_face:

2

You cannot/does not need to use delimit for this.

  {{ $resources := append (resources.Match "*.css") (resources.Match "**/*.css") }}
  {{ $css := resources.Concat $resources }}

I just typed the above, so there may be typos.

You may also want to read up on “globbing”: GitHub - gobwas/glob: Go glob

The above can be simplified with:

  {{ $css := resources.Concat (resources.Match "**.css")  }}
1 Like
3

I did try this combination but I get the error message

wrong number of args for Concat: want 2 got 1

which is why I tried delimit to turn the array into a string :man_shrugging:t5:

4

https://gohugo.io/hugo-pipes/bundling

Asset files of the same MIME type can be bundled into one resource using resources.Concat which takes two arguments, a target path and a slice of resource objects.

{{ $plugins := resources.Get "js/plugins.js" }}
{{ $global := resources.Get "js/global.js" }}
{{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}
1 Like
5

Yep, read that, it’s exactly what I want but using the results of the resources.Match rather than a slice of specified files!

Is my problem that the array from resources.Match isn’t an array of resource objects? I am waving about in the dark a bit…

6 
assets/
├── a.css
└── b.css

layouts/_default/baseof.html

{{ $css := resources.Match "*.css" }}
{{ $css = $css | resources.Concat "styles.css" }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
4 Likes
7

That works! Brilliant, thank you so much :smile:

Off to build some websites now

8

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