In my current project, my work is only with html and css (*HTML skinning*). There are many pages which have repeated sections like Header, footer, sharing links etc.

I don't want to repeat this common sections again and again in each page. I want these repeated sections to call somehow using gulp or any other task runner.

Something like this for example (*using lodash*)

### Index.html

```
<!Doctype html>
<html>
    <%= _.template(templates['head'])() %>
    <body>
        <%= _.template(templates['header'])() %>

        <!-- some unique content here -->

        <%= _.template(templates['footer'])() %>
    </body>
</html>

```

and then using [gulp-template](https://www.npmjs.com/package/gulp-template) rendering it in each page. I am preferring lodash because I had already worked with it.

As you can see, I am assuming that if somehow I keep the repeating sections in a javascript object (*with name `templates`*), I can call it in one line code. And then if I change something in that repeating section, the change will occur in all pages.

To make this possible, first I need to generate the javascript object with that repeating html as string in it.

Can someone please tell me how to do this? or is there any better way to do this?