How to use Base option properly with Extends, Block, Include and Import tags?

Please note: GitHub sources to reproduce this issue are available here.

Make sure to start form the "test-twig" branch.

Hi,

I'm trying to use Twig Extends tag in my Twig templates, but get Gulp log errors.

Here's how my files are organised within my project:

templates
|- layouts
|  |- default.twig
|- pages
|  |- index.twig
|- partials
   |- forms.twig (macro)
   |- partial.twig

Here's my template (templates/pages/index.twig):

{# index.twig #}
{% extends "default.twig" %}

{% set pageTitle = "Use Twig from the start!" %}
{% set benefits = ["Fast!", "Easy!", "Efficient!"] %}

{% block page %}
  <header>
    <h1>{{ pageTitle }}</h1>
  </header>
  <p>
    This page is generated by Twig.js using the gulp-twig gulp plugin.
  </p>
  <ul>
    {% for value in benefits %}
      <li>{{ value }}</li>
    {% endfor %}
  </ul>

  {% include "partial.twig" %}

  {% import "forms.twig" as forms %}
  <p>{{ forms.input('username') }}</p>
  <p>{{ forms.input('password', null, 'password') }}</p>
{% endblock %}

Here's my gulpfile.js:

// Compile Twig templates to HTML
function twig() {
  return gulp.src('src/templates/pages/*.twig')
    .pipe($.twig({base: 'src/templates/**', errorLogToConsole: true}))
    .pipe(gulp.dest(PATHS.dist))
    .pipe(browser.reload({ stream: true }));
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch('src/templates/pages/*.twig').on('all', gulp.series(twig, browser.reload));
}

As you see, I'm trying to use the Base option which allows you to sets the views base folder. That's because I want to avoid giving relative paths to the Extends tag within my Twig templates.

But here's the error I got in the logs:

Error parsing twig template /home/intlangf/sandbox/foundation-zurb-template/src/templates/pages/index.twig:
TwigException: Unable to find template file src/templates/**/default.twig
[10:11:15] gulp-twig TwigException: Unable to find template file src/templates/**/default.twig

If I don't use the Base option in the gulpfile, but give a relative path to the Extends tag, it works like a charm (templates/pages/index.twig):

{# index.twig #}
{% extends "../layouts/default.twig" %}

So my question is: am I doing something wrong when setting the Base option? My first guess is that it doesn't allow globbing. I've tried several solutions so far but with no success...

Subsidiary question: Documentation says "Extends can be loaded relative to this path". But would that also work when using Block, Include or Import tags?

Thanks!

simon-dt / gulp-twig

How to use Base option properly with Extends, Block, Include and Import tags? #54