Support file globs?

[ryanscherler]

Thanks Ben for this great plugin! Any chance it could support globs rather than explicit file paths? e.g. something like the following?

mix.twigToHtml({
    files: ['src/templates/pages/**/*.{twig|html}'],
    fileBase: 'src/templates/pages',
    twigOptions: { data: {} },
    enabled: true,
  })

[ben-rogerson]

Hey Ryan, I'm glad you're enjoying it. Globbing the paths is a good idea so I'll add support for it in the next release.

In the meantime, my other package get-files-in will help grab those twig/html files. If you have any files you don't want included you just need to prefix the folder with an underscore (eg: _pages). For your example you'd use it like this:

const templateFiles = getFilesIn('src/templates/pages', ['twig', 'html'], true)

mix.twigToHtml({
    files: templateFiles,
    fileBase: 'src/templates/pages',
    twigOptions: { data: {} },
    enabled: true,
  })

[ben-rogerson]

Hey @ryanscherler I've just released v1.2.0 which adds the functionality you're after. Enjoy!

[ben-rogerson]

ps: the code snippit you provided just needs a small update to use a comma instead of pipe for the filetype matching:

files: ['src/templates/pages/**/*.{twig,html}'],

[ryanscherler]

Awesome Ben! Thanks so much for updating to use globs! Stoked to try this out and integrate into our 'starter' setup

[ryanscherler]

Quick question - the plugin also seems to inject the CSS / JS into the page? - is it possible to suppress this? e.g. we use Stimulus / Turbolinks and they need to be loaded into the head rather than prepended to the body.

[ben-rogerson]

That all seems possible and looks like it's a two-step process.

First step: Disable injections. You can do this by setting your file config like this:

const mix = require('laravel-mix');

require('laravel-mix-twig-to-html');

const files = [
    {
        template: 'src/templates/pages/**/*.{twig,html}',
        inject: false, // disable asset tag injection
    }
]

mix.twigToHtml({
    files: files,
    fileBase: 'src/templates',
});

Then you need to specify the headTag and bodyTag positions in your twig base template(s) and add a filter where necessary:

<%= htmlWebpackPlugin
  .tags
  .headTags
  .filter((tag) => tag.tagName === 'meta')
  .join('') 
%>

The injections should be fully customisable - take a look at this example

Alternatively, instead of inject: false you could try setting inject: 'head' or inject: 'body'.

Hope that helps!

[ryanscherler]

Oh thats great! I'll close my PR which addressed this with a fileOptions config param.

[ben-rogerson]

thanks Ryan!