simon-dt / gulp-twig Goto Github PK

Hi,
I'm trying to use {{ dump() }} all variables from the context but it doesn't work.
Kills my gulp and doesn't render the template. If i use {{ dump(var) }} it works but i'd have to test for all variables.

<--- Last few GCs --->

[86493:0x103000000] 62599 ms: Mark-sweep 1416.1 (1469.3) -> 1415.9 (1453.3) MB, 7077.9 / 0.0 ms (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 7078 ms) last resort
[86493:0x103000000] 73959 ms: Mark-sweep 1415.9 (1453.3) -> 1415.9 (1453.3) MB, 11359.6 / 0.0 ms last resort

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x1e412631ba79 
2: dumpVar [/Users/sleblanc/www/sagrada/node_modules/twig/twig.js:~4075] [pc=0x35f88057778c](this=0x3e4f3fa8a1e1 ,variable=0x2c6a47e90b9 <a Stats with map 0x373335157449>)
3: displayVar [/Users/sleblanc/www/sagrada/node_modules/twig/twig.js:~4061] [pc=0x35f880576c4d](this=0x3e4f3fa8a1e1 ,variable=0x2c6a47e90b9 <a Stats with map 0x373335157449>)
4:...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/local/bin/node]
2: node::FatalException(v8::Isolate*, v8::Localv8::Value, v8::Localv8::Message) [/usr/local/bin/node]
3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
4: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
5: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
6: 0x35f87ec840bd

This gulp task does not allow us to pipe in files where we have changed the template in a previous gulp task. For example, we have templates with front matter that we remove (check out the example in the gulp-data repo), but the front matter is still rendered.

Passing the file contents as the data property to twigOpts. twig.js will use the string in file.data when you call Twig.twig(twigOpts). Check out the twig.js source where it renders a template from params.data: https://github.com/twigjs/twig.js/blob/master/src/twig.exports.js#L41-L48

This would allow gulp tasks to, in effect, change templates before rendering them. It would also speed up rendering because it will use buffered data, avoiding an expensive call to Twig.loadRemoteContent() fetching templates from the filesystem.

      var Twig = require('twig'),
            twig = Twig.twig,
            twigOpts = {
                path: file.path,
                async: false
            },
            template;

        if (!!useFileContents) {
            twigOpts.data = String(file.contents);
        }

e.g.

{{ entry.eventUrl ?? 'cake' }}

This is available elsewhere in 'Twig land'.

Currently, if I include a partial that contains one of these then the entire partial is skipped.

It would be great if this project too could support such tags. I'm sorry I don't understand the relationship between gulp-twig and what is happening upstream. Obviously feature-parity would be super excellent happy.

Hello, I'm trying to use the verbatim tag in the simpliest way possible :

{% verbatim %}
    hello world
{% endverbatim %}

the terminal can not compile it and output this :

TwigException: Unable to parse 'verbatim'

But it seems that twig.js does support the tag. How could I use the feature ? Do I must switch it on ? Is it not supported ?

Thanks ;)

I saw atpl.js mentioned in the readme, but Is it currently possible to use this plugin with atpl.js?

as I see, Twig has a good function named "source" : https://twig.symfony.com/doc/1.x/functions/source.html
But I can't use it in gulp-twig.
{{ source(file_path) }} --> all I see is a message like this "Template "file_path" is not defined."

this function is very usefull to me, Tks for ur reading.

Why did you do that?
Why can't pass twig options directly as a basic object?
https://github.com/zimmen/gulp-twig/blob/56f060de3f1c8e3582de59c85fb23e951978b66a/index.js#L49-L60

How can I set strict_variables: true option for twig??

Hi,
This is related to #50 because i found the root cause of the problem.
This plugin does not return valid json by creating a circular reference to the file in it's data.
If i console.log(JSON.stringify(data)); i get:

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at modifyContents (/Users/mrleblanc/GitHub/project-starter/node_modules/gulp-twig/index.js:40:20)
    at wrappedMapper (/Users/mrleblanc/GitHub/project-starter/node_modules/map-stream/index.js:84:19)
    at Stream.stream.write (/Users/mrleblanc/GitHub/project-starter/node_modules/map-stream/index.js:96:21)
    at DestroyableTransform.ondata (/Users/mrleblanc/GitHub/project-starter/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at emitOne (events.js:115:13)
    at DestroyableTransform.emit (events.js:210:7)
    at addChunk (/Users/mrleblanc/GitHub/project-starter/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:291:12)
    at readableAddChunk (/Users/mrleblanc/GitHub/project-starter/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:278:11)
    at DestroyableTransform.Readable.push (/Users/mrleblanc/GitHub/project-starter/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:245:10)

This is because of the _file and _target data which are added.
Here's the original data intended to be passed to twig:

{  
   "Webpack":"4",
   "Gulp":"4",
   "description":"Gulp project",
   "title":"Gulp",
   "test":"test variable"
}

Here's the data twig receive after gulp-twig:

{
    "Webpack": "4",
    "Gulp": "4",
    "description": "Gulp project",
    "title": "Gulp",
    "test": "test variable",
    "_file": < File "index.twig" < Buffer 0 a 7 b 25 20 65 78 74 65 6e 64 73 20 27 2e 2e 2 f 62 61 73 65 2e 74 77 69 67 27 20 25 7 d 0 a 0 a 7 b 25 20 62 6 c 6 f 63 6 b 20 63 6 f 6e 74 65 6e 74 20 25 7 d... >> ,
    "_target": {
        path: '/Users/mrleblanc/GitHub/project-starter/src/templates/views/index.html',
        relative: 'index.html'
    }
}

If someone could check and approve #51

#32 (which simply updates the twigjs dependency to ^1.10.4) fails 3 of 4 tests https://travis-ci.org/zimmen/gulp-twig/builds/207691030, while twigjs 1.10.4 itself passes https://travis-ci.org/twigjs/twig.js/builds/206913329

I noticed line breaks inside the parameters object will break the embed function.

Will work:

{% embed 'skeletons/sidebarBox.twig' with { 'class': 'relatedContents' } %}
…
{% endembed %}

Won't work:

{% embed 'skeletons/sidebarBox.twig' with {
    'class': 'relatedContents'
} %}
…
{% endembed %}

TwigException: Unable to parse 'embed 'skeletons/sidebarBox.twig' with {
'class': 'relatedContents'
}'

This behavior is different to include and require where line breaks cause no trouble.

Twig Symphony has lipsum tag: https://twig.symfony.com/doc/3.x/advanced.html
which allows to generate random Lorem Ipsum texsts.

{% lipsum 40 %}
{% lipsum(40) %}
{{ lipsum 40 }}
{{ lipsum(40) }}

How I can do that in gulp-twig?

And even more, to be able to generate this "random", e.g. - if I have to generate 10 blocks, each block would have different "lorem text", as it's in Emmet shortcode - it generates different Lorem every time.

Something like

{% lipsum(40,true) %}

I'm having an issue with using filter and compiling my twig.

I got the follwoing error :

Error parsing twig template /home/[...]/Documents/dev/[...]/sources/plain/views/index.twig: 
Unable to find filter trans

The problem is here :

{{ 'amazing' | trans() }}

Here my gulp task :

gulp.src(source.split(','))
        .pipe($.data(function () {
          var content = {};
          if (config.content !== 'no') {
            var contentPath = path.join(process.cwd(), config.contentPath);
            fs.readdirSync(contentPath).forEach(function (file) {
              var filePath = path.join(contentPath, file);
              if (path.extname(file) === '.json') {
                // No cache for template content
                delete require.cache[require.resolve(filePath)];
                content = _.merge(content, require(filePath));
              }
            });
          }
          return content;
        }))
        .pipe($.twig({
          filters: [
            {
              name: "trans",
              func: function (args) {
                return "the function";
              }
            }
          ]
        }))
        .pipe(gulp.dest(dist));

I'm trying to reproduce Symfony2 behavior

First of all, thank you for your plugin, I use it a lot :)

I've tryed to update from 0.5.0 to the latest version but when I run the task (which worked fine with 0.5.0) it returns a lot of twigexception like this one:

Error parsing twig template dev/templates/_layout/base.twig: 
TwigException: Unable to find template file dev/templates/_inc/styleguide/3-breadcrumb.twig

Task:

gulp.task('twig',"compile twig", function() {
  return gulp.src('./dev/pages/**/*.twig')
    .pipe(twig({
      base: './dev/templates/',
      data: {baseURL, config, configPackage, configScampi},
      extend: twigMarkdown
    }))
    .pipe(gulp.dest('./public/pages/'));
});

Nevertheless, templates are compiled.

Did I miss something?

Following up on the discussion at #32

bezoerb wrote
olets, dotmagic, webrgp: i think we should consider #18, #19 and #21 before v1.0.0 release. What do you think?

olets wrote
I think go with 1.0.0 now. For me, dependencies like this should follow semver - so bumping from 0.x to 1.0 is saying "there was a breaking change" not "we've ironed out the bugs." The upgraded node requirement is a breaking change.

If we do use a lower version, we'll have to remember to downgrade the version in package.json from the bump in f64df15

8aea9c2 bumped the package.json, but a new release was never tagged. Since there was no push-back I imagine 1.0.0 at 8aea9c2 is acceptable. Otherwise we'll need to back down from 1.0.0 in package.json (which would be funny, since 8aea9c2 and the related changes in Twig.js are all about not dropping below 1.0.0 😉 - it's the lowest at which semver ranges work in npm)

I additionally propose bumping master to and releasing 1.1, so that npm users have access to #19.

https://github.com/zimmen/gulp-twig/blob/004763d9b581be9b6e13290a37622a891c9a1b80/index.js#L16

gulp.src(['./views/**/*.html'])
.pipe(twig({
            base: './views/',
            data: { tilte: 'sss'} // data
        }))

if I use the variable in one template, like this

{% set title = 'register' %}

ALL Template would be has data.title while equal to 'register'

https://www.npmjs.com/package/map-stream

change to

var data = file.data || Object.assign({}, options.data) || {};

Hi,

I'm new to gulp, and I try to use your plugin.
It works really well, but I can't use it with gulp.watch.

I mean is there a sort of cache I can desactivate or anything?
When I run my gulp command, it sees the change in twig files, but it compiles it from the old files (may be the file's state when I launched the command).

Here's the code I have:

//--- TWIG
gulp.task('twig', function () {
  'use strict';
  return gulp.src(['./views/index.twig'])
    .pipe(twig())
    .pipe(gulp.dest('./html/'))
    .pipe(livereload());
});

//--- WATCH
gulp.task('watch', function() {
    gulp.watch('./views/*.twig', ['twig']);
});

gulp.task('default', ['twig', 'watch']);

Thanks for your help!

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!

When i try to use {{ dump(jsonData|json_encode(constant('JSON_UNESCAPED_SLASHES'))) }} to encode escaped html tags and special characters in my json-string but i'm always getting an error: TwigException: constant function does not exist and is not defined in the context

Also {% autoescape %} does not work: TwigException: Unable to parse 'autoescape'

Any suggestions in how to get twig to encode the json correctly?

Is there a way just to stop that output and just output the templates that extend the base?

In my gulp task to compile twig templates, if there's an error (such as in {% include 'file-which-doesnt-exist.twig' %}) I get a huge stack trace.

What's the recommended way to set up my gulpfile so I have just a short message on errors?

Setting onError to something to echo a short message doesn't seem to do anything (it doesn't seem to run) and setting errorEchoToConsole to true doesn't seem to do anything either.

I also tried adding .on('error', gutil.log) to the stream, but this doesn't have any effect.

{% set bodyCls = 'sss' %}

If have a template set this, all template render the ClassName while all template extends the same layout

I want to use twig.js for css-templating. My structure is something like:

html.twig
header.twig
footer.twig

mainpage.twig
customers.twig
contact.twig

The first 3 are only partials and i dont want them to get compiled which does gulp.src('./template/**/*.twig'). Is there any easy way to do this? Ofcourse i could put them into a seperate folder. But for example on sass if you name a file with a "_" prefix they wont get compiled. (e.g. _html.twig).

Thanks for the great plugin! Small feature request. I have a pre-configured twig instance with custom extensions. Ideally I want to reuse that rather than configuring a new one via the plugin.

var twig = require('twig');
var gulpTwig = require('gulp-twig');

gulpTwig({twig:twig, data: …});

This is a similar feature request to one found in gulp-sequence – it allows to reuse an existing gulp instance instead of requiring it's own.

Hi Simmon,

Can you add me as a contributor to this repo? Let me know what do you need from me to make it happen. Thanks!

Loving this Gulp/Twig thing :)

One question... I'm loading some data from an external file which works fine, but it's now compiling to .twig files instead of .html which I don't want.

How do I set the extname to .html inside the compile function AND call the external json file?

(Sorry new to Gulp and can't figure out the syntax)

var swig = require('gulp-swig');
var data = require('gulp-data');
var livereload = require('gulp-livereload');
var fs = require('fs');

gulp.task('compile', function () {
    'use strict';
    var twig = require('gulp-twig');
    return gulp.src(['./src/*.twig', '!./src/_data.json', '!./src/layout.twig'])
      .pipe(data(function(file) {
        return JSON.parse(fs.readFileSync('./src/_data.json'));
      }))
      .pipe(gulp.dest('./web'))
      .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./src/**/*.twig', ['compile']);
  gulp.watch('./src/_data.json', ['compile']);
});```

Hi

Thank you for an awesome plugin.

I have this issue, where when I embed a .twig-file, the "block page" returns empty. When I delete the embed the "block page" returns the page content.

Layout

    <section class="content">
        {% embed "../modules/menu/menu.twig" %}{% endembed %}

        {% block page %}{% endblock %}
    </section>

Index.twig

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

    {% set title = "Forside" %}

    {% block page %}
      content
    {% endblock %}

Menu.twig

<nav role="navigation">
    <ul>
        {% for main in menu.main %}
            <li>
                <a href="{{ main.link }}">
                    {{main.title}}
                </a>

                {% if main.sub %}
                    <ul>
                        {% for sub in main.sub %}
                            <li>
                                <a href="{{ sub.link }}">
                                    {{ sub.title }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</nav>

Hi guys,
Do you plan to update the package to use the latest Twig version?
It's using 0.8.6 while the latest Twig version is 1.24.0

Thanks, Piotrek

I'm using gulp-twig as follows (simplified) :

    return gulp.src("src/twig/*.twig")
        .pipe($.twig({
          data: {"foo": "bar"},
        }))
        .pipe(gulp.dest("dst/"));

And y have 3 templates :

{# layout.twig #}
{% if title is defined %}{{ title }}{% else %}Default title{% endif %}

{# challenge.twig #}
{% set title = "Challenge !" %}

{# home.twig #}

The output of challenge.twig is correct, but home.twig outputs Challenge !

I tried debugging using this :

    var data = {"foo": "bar"};
    return gulp.src("src/twig/*.twig")
        .pipe($.twig({
          data: data,
        }))
        .pipe(through.obj(function(file, encoding, callback) {
          console.log(data);
        }))
        .pipe(gulp.dest("dst/"));

And it shows that the data object is modified with the variables of my template and then shared between the twig files :

{ foo: 'bar',
  _file: <File "home.html" <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 20 6c 61 6e 67 3d 22 65 6e 22 3e 0a 3c 68 65 61 64 3e 0a 20 20 20 20 3c 6d 65 74 61 20 63 ...>>,
  _target: 
   { path: '/home/me/projects/teaser-2016/src/home.html',
     relative: 'home.html' },
  title: 'Challenge !',
}

I'm looking for an option to change the extension to some arbitrary string. I saw that there is a proposed option to leave the extension as it is on input over in #14, but this wouldn't do the trick for me.

Any chance of adding this?

gulp-util is not found on first use. Seems like it's in the devDependencies, but it's used in production. Needs to move the dependency to dependencies.

Hello!

"data" option is not documented here:
https://github.com/zimmen/gulp-twig#options

index.html

<div class="x-4 h-full">
    {% include '../shared/_picker.html' with {start: 0, end: 9} %}
</div>

shared/_picker.html

{% for index in start..end %}
    <a class="picker-item f-orange">{{ index }}</a>
{% endfor %}

Above, It compile correctly but output the following errors. My test results tell me that because the parameter of the{% for %} tag is the incoming dynamic variable (with), this error is caused.

TypeError: low.charCodeAt is not a function
    at Object.range (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:4334:30)
    at Object.Twig.expression.operator.parse (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:3506:44)
    at Twig.Template.parse (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:2134:46)
    at expressionToken (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:3117:51)
    at next (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:7996:24)
    at Object.forEachAsync [as forEach] (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:8007:16)
    at Twig.Template.<anonymous> (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:3099:31)
    at Object.potentiallyAsync (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:7743:48)
    at Twig.Template.Twig.expression.parse (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:3098:27)
    at Twig.Template.Twig.expression.parseAsync (/usr/local/lib/node_modules/@master/cli/node_modules/twig/twig.js:7690:38)

However, if I change the _picker.html extension to _picker.twig It will work, but I don't want my team to use it.

I have one basic template where I connect other parts with embed and which contains several block

{# layout.html.twig #}
{# title #}
<title>
  {% block title %}{% endblock title %}
</title>

{% embed 'header.html.twig' with {'bem_parent': 'body'} %}
  {% block header_content %}
    {% embed 'logo.html.twig' with {'bem_parent': 'header'} %}{% endembed %}
  {% endblock header_content %}
{% endembed %}

{# content left #}
{% block content_left %}{% endblock content_left %}

{# header.html.twig #}
{% block header_container %}
  {% spaceless %}
    <header class="{{ bem_parent }}__header header">
      {% block header_content %}
      {% endblock %}
    </header>
  {% endspaceless %}
{% endblock %}

{% block logo_container %}
  {% spaceless %}
    <h1 class="{{ bem_parent }}__logo logo">
      ...
    </h1>
  {% endspaceless %}
{% endblock %}

I also have inheritance index.html.twig

{# index.html.twig #}
{% extends 'layout.html.twig' %}

{% block title %}
  title
{% endblock title %}

{% block content_left %}
  <aside class="page__content page__content_left">
    content left
  </aside>
{% endblock content_left %}

after compiling index .html .twig contains correct embed but in place of the block after embed is empty:

{# from inspector #}
<html lang="ru">
  <head>
    <title>
        title
    </title>
  </head>
  <body class="body">
    <header class="body__header header">
      <h1 class="header__logo logo">
        <a class="logo__link" href="javascript:void(0);">Logo</a>
      </h1>
    </header>
    <main class="body__page page">      
    </main>
  </body>
</html>

I've only been able to make this work by providing a function to process a JSON file directly through the twig initialization in gulp:

return gulp.src(paths.src)
    .on('error', handleErrors)
    .pipe(twig({
              data: {
                "tables": function(file) {
                  var dataPath = path.resolve(config.root.src, config.tasks.html.src, config.tasks.html.dataFile);

                  var data = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
          
                  return data;
                }
              }
    }))
    .on('error', handleErrors)
    .pipe(gulp.dest(paths.dest))

running:

.pipe(data(function (file) {
    return JSON.parse(fs.readFileSync('./examples/' + path.basename(file.path) + '.json'));
}))
.pipe(twig())

has not worked at all. gulp-data has been returning the actual gulp information and not my json file data. There's also no way to configure how this data is defined in the template.

I'm having an issue with using extends() and compiling my twig.

I have the following folder structure

• app
  • views
    • email
      • layouts
        • single-column.twig
      • invitation.twig

My invitation file extends using the following code:

{% extends('email.layouts.single-column.twig') %}

This works perfect with the PHP compiler but is giving me the following error using this package:

Error compiling twig template /Users/sites/site/app/views/email/invitation.twig: 
TwigException: Unable to parse 'extends('email.layouts.single-column.twig')'
Error parsing twig template /Users/sites/site/app/views/email/invitation.twig: 
TypeError: Cannot call method 'forEach' of undefined

Gulp task

g.task('inline-css', function() {
    return g.src(['./app/views/email/**/*.twig', '!./app/views/email/layouts/**/*.twig'])
        .pipe(twig({
            base: './app/views'
        }))
        .pipe(g.dest('./app/views/email/inline'))
});

{% ENV == 'dev' %}

fails with error TwigException: Twig.expression.type.object.start cannot follow a Twig.expression.type.object.end at template:20 near '{...'

I faced with the one problem. I organazied my project three folder, for example like this:

• templates
  • blocks
    • header
      • block.twig
      • index.twig
    • layouts
      • _iframe.twig
  • pages
    • layouts
      • _layout.twig
    • partials
      • _header.twig
    • index.twig
    • about.twig
  • styleguide
    • index.twig

Configurated my gulp task:
gulp.src(['templates/blocks/**/*.twig', 'templates/pages/*.twig', 'templates/styleguide/*.twig'])
.pipe( gulp-twig() )
gulp.dest('public_html/static/')

I thought it compiling to same folder, like:

• static
  • blocks
    • header
      • index.html
      • blocks.html
  • pages
    • index.html
    • about.html
  • styleguide
    • index.html

But got:

• static
  • header
    • index.html
    • blocks.html
  • about.html
  • index.html (styleguide index.html rewrite pages index.html)

How can I config my task for this correct work?

Now I had to do three seperate tasks instead. For folder "blocks", "pages", "stylegiude". It's work, but not clear solution.

Thanks.