Should you use PUG and JSON for page layout?

I am new to Pug and I am taking on a new project. From my understanding a few of the benefits of using Pug is that it allows mixins and variables. For example

h1 #{pageTitle} 
p #{pageCaption}

div class="topic-component"
 h4 Title
 p Description
 a href="#"

I'm working on a new Pug project and I'm trying to wrap my head around what the previous developers tried to accomplish when creating the JSON file below.

The example below looks are using JSON to Structure HTML which seems incorrect or at least hard to maintain. Why not just write the code below only using Pug? Why write a JSON file that includes Pug and render the JSON file? Why not just use Pug?

For example the JSON file below is

{
    "title": "titlename",
    "layout": "fullwidth",
    "path":"newpath",
    "+m-grid":{
    "attrs": {
        "class": "category-1"
    },
    "+g-row":{
        "+p-col":{ 
            "attrs":{
                "class":"col-12 heading"
            },
            "+h5":"Sub Title",
            "+h1":"Title 1"
        },

The code above is using Pug mixins. When Gulp is ran the Json file above renders into an HTML file

Is there any benefit of doing this? It just seems like the way they are using Pug and JSON is overly complicating things. Are their any benefits to this?

Solution

Your question will probably get flagged for asking for opinions, but here's mine...

Every time we put display logic into the routes it just ends up confusing maintenance of the pages and we end up moving it back into the pug template during a refactor. We've learned to leave the display logic all in pug and not trying to split it out among different components. Same goes with the data logic - any time we try to process data in the pug template we end up moving that back into the route for similar reasons.

This helps not only let us fix bugs quicker as we're not hunting around different files trying to find out what is causing the error, but it actually seems to be less prone to bugs in the first place, in both the router and in the templates. I'd say that "keeping component focus" is an important step in learning how to use pug optimally.

Gulp is a great build tool, but it's not an HTML rendering tool. The code you inherited is trying to use gulp to take the place of pug which it just wasn't made for. If the decision to do this was for performance, a better option would be to add a CDN or other cache in front of pug pages that are static.

If I inherited this project I would make a plan to remove the gulp rendering at the next available opportunity and go back to basic pug.

In short, just because you can do something doesn't mean you should. Let pug be pug.