How to correctly split index.html into compound files when working with gulp?

Question

gulp.js

There is a long landingos. What I want to do : split the entire site into blocks (each block is in its own file, for example header.html, footer.html), include each of these files in the index file, and when any of these files change, gulp watch works correctly. When building a project, all files are combined into one main file.
How can I implement this, I'm sure that there are ready-made solutions?

Answer 1

I do with pug.
To structure all files and names I use the BEM methodology (it doesn't matter, you can organize your files as you like)
I do this - I create a blocks folder, subfolders with the necessary blocks in it, for example, header, carousel, footer, etc.
Each folder contains the files of this block. For example header folder:
header.pug
header.scss
header.js
header.jpg
etc.
blocks can contain nested blocks. For example, the header folder may contain a menu block.
You can read about BEM about https://ru.bem.info.

Answer 2

gulp + rigger:
https://ru.stackoverflow.com/questions/652990/%D0%...