Gulp5-twig NPM

Compile Twig templates seamlessly with Gulp. This plugin is built on top of Twig, the JavaScript implementation of the Twig templating language.

This plugin can be easily integrated with gulp-data for enhanced templating capabilities.

Usage

Install

npm install gulp5-twig --save-dev

Example

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

{% block page %}
<header>
    <h1>Gulp and Twig</h1>
</header>

<p>
    This page is generated by Twig using the gulp5-twig gulp plugin.
</p>

<ul>
    {% for instance in anyArray %}
    <li>{{ instance }}</li>
    {% endfor %}
</ul>
{% endblock %}

{# layout.twig #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>{{ title }}</title>
    <meta name="description" content="A demo of how to use gulp5-twig" />

    <meta name="author" content="Alex Lenk" />
</head>
<body>
<article>
    {% block page %}{% endblock %}
</article>

<footer>
    <p>
        Source file: {{ _file.relative }}<br>
        Target file: {{ _target.relative }}
    </p>
</footer>
</body>
</html>

// gulpfile.js
'use strict';

import gulp from 'gulp';
import data from 'gulp-data';
import twig from 'gulp5-twig';

export function compile() {
  return gulp.src('./index.twig')
    .pipe(twig({
      data: {
        title: 'Gulp and Twig',
        benefits: [
          'Fast',
          'Flexible',
          'Secure'
        ]
      }
    }))
    .pipe(gulp.dest('./'));
}

export function dataExample() {
  return gulp.src('./index-json.twig')
    .pipe(data(function() {
      return require('./example/index-data.json');
    }))
    .pipe(twig())
    .pipe(gulp.dest('./'));
}

export default gulp.series(compile, dataExample);

Options:

data: [object| The data that is exposed in the twig files. Or use gulp-data to pipe files directly into gulp5-twig

errorLogToConsole: true|false logs errors to console (defaults to false)

onError: function handle error yourself

cache: true|false enables the Twig cache. (defaults to false)

extend: function (Twig) extends Twig with new tags types. The Twig attribute is Twig's internal object. Read more here

extname: string|true|false output file extension including the '.' like path.extname(filename). Use true to keep source extname and a "falsy" value to drop the file extension

useFileContents: true|false use file contents instead of file path (defaults to false) Read more here

twigParameters: object Parameters for creating a Twig template.

base: string sets the views base folder. Extends can be loaded relative to this path
debug: true|false enables debug info logging (defaults to false)
trace: true|false enables tracing info logging (defaults to false)
strict_variables: true|false If set to false, Twig will silently ignore invalid variables (variables and or attributes/methods that do not exist) and replace them with a null value. When set to true, Twig throws an exception instead (default to false).

functions: array extends Twig with given function objects. (default to undefined)

[
    {
        name: 'nameOfFunction',
        func: function(args) {
            return 'the function';
        },
    },
];

filters: array extends Twig with given filter objects. (default to undefined)

[
    {
        name: 'nameOfFilter',
        func: function(args) {
            return 'the filter';
        },
    },
];

LICENSE

(MIT License)

gulp gulp-plugin twig templating frontend

plugin-error twig

2.0.1

11 months ago

2.0.0

11 months ago