Frontend templating with gulp using gulp template

Frontend templating with gulp that help us break HTML code into smaller pieces that we can reuse across multiple HTML files. They also give you the power to feed data into variables that help you simplify your code. However, with Node.js, we can now harness the power of template engines easily through the use of tools like Gulp. We’re going to find out what template engines are, why we should use them, and how to set one up with Gulp.

Let’s start by looking more closely at the below npm gulp packages

  • gulp-template
  • gulp-twig

Prerequisite

  • NodeJS
  • Editor

Make sure that you have NodeJS installed.

1. Using gulp-template

Open a terminal & type below commands

mkdir template
cd template
npm init

terminal will ask few inputs like below

package name: (template) 
version: (1.0.0) 
description: 
entry point: (gulpfile.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

About to write to /filepath/template/package.json:

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes) 

We have template folder with package.json. Create files like below.

-| package.json
-| index.html
-| gulpfile.js

Now install gulp & gulp-template using npm i gulp gulp-template --save and update the files with below content

# gulpfile.js
const gulp = require("gulp");
const template = require("gulp-template");

gulp.task("default", () =>
  gulp
    .src("index.html")
    .pipe(template({ title: "Gulp Template", name: "Welcome" }))
    .pipe(gulp.dest("dist"))
);
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="A demo of how to use gulp-twig" />
    <meta name="author" content="Simon de Turck" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title><%= title %></title>
  </head>
  <body>
    <!-- header -->
    <h1>Hello <%= name %></h1>
  </body>
</html>

Run the gulp command in the terminal, it will generate ndex.html file in the dist folder & look like below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="A demo of how to use gulp-twig" />
    <meta name="author" content="Simon de Turck" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Gulp Template</title>
  </head>
  <body>
    <!-- header -->
    <h1>Hello Welcome</h1>
  </body>
</html>

2. Using gulp-twig

Clean the template folder & open a terminal & type npm init like above then again we will have template folder with package.json. Create files like below.

-| package.json
-| index.twig
-| common
---| header.twig
-| gulpfile.js

Now install gulp & gulp-twig using npm i gulp gulp-twig --save and update the files with below content

# gulpfile.js
var gulp = require("gulp");
var twig = require("gulp-twig");

function compile() {
  "use strict";
  return gulp
    .src("./index.twig")
    .pipe(
      twig({
        data: {
          title: "Gulp-twig",
          benefits: ["Fast", "Flexible", "Secure"]
        }
      })
    )
    .pipe(gulp.dest("./"));
}
exports.default = compile;
{# header.twig #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="description" content="A demo of how to use gulp-twig"/>
    <meta name="author" content="Simon de Turck"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>{{ title }}</title>

</head>
<body>
<section>
    {% block page %}{% endblock %}
</section>
</body>
</html>
{# index.twig #}
{% extends "common/header.twig" %}

{% block page %}
    <header>
        <h1>Gulp and Twig.js</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>
{% endblock %}

Run the gulp command in the terminal, it will generate index.html file in the root folder template & look like below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="A demo of how to use gulp-twig" />
    <meta name="author" content="Simon de Turck" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Gulp and Twig</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Gulp and Twig.js</h1>
      </header>
      <p>
        This page is generated by Twig.js using the gulp-twig gulp plugin.
      </p>
      <ul>
        <li>Fast</li>
        <li>Flexible</li>
        <li>Secure</li>
      </ul>
    </section>
  </body>
</html>

Subscribe to our Newsletter

Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.

mail