What plugin or html preprocessor should be used to build layout from blocks?

Question

css

Good afternoon.
Please tell me the best way to use block structure when writing html.
I use emmet and I think that writing ul>li*5>a[href=#]{item$} is faster than writing any loops, etc. on the same pig jade, etc. Accordingly, answers like use the preprocessor are not suitable ... I don’t like their syntax.
Question: what to use so that, for example, there is a page folder with all pages, and there is a blocks folder with header footer nav blocks, etc... and so that this whole thing can be included in pages painlessly + gulp compilation ohm.
Who uses what? I will be very grateful!

Answer 1

In the simplest case, you need nunjucks .
Otherwise, you can use a build like blendid , there are already nunjucks, there is a browsersync so you can quickly and conveniently typeset.
Blendid only has a small bug in Windows (although it's not with him, but with gulp / yarn), so you can add to package.json:

,
   "scripts": {
    "start": "yarn run blendid",
    "build": "./node_modules/.bin/blendid -- build"
  }

Well, then it yarn startwill launch the development server (browsersync), and yarn run buildbuild the project.
Well, yes, for all the action, you need to install the node and yarn itself

Answer 2

I use gulp-rigger The plugin allows you to import one file into another with a simple
//= footer.html construct

Answer 3

gulp-rigger - a great thing for such purposes , I
have been using it for a long time,
keep my blank to build all this miracle
https://yadi.sk/d/mLsOel0U3LueJd
sass-less already myself)

Answer 4

A simple simple html + inclusion solution with a couple of extra yummy goodies:
https://www.npmjs.com/package/gulp-file-include