How do you make it easier to work with HTML preprocessors?

Question

HTML

I want to start using HTML preprocessors in particular pug (former jade). The problem is that writing HTML right away in the preprocessor code is somewhat inconvenient and cannot be taken and viewed in a browser without compiling it into normal HTML.
How do you usually act? Do you write everything in the preprocessor code at once, or at the beginning in HTML, and then, if the result suits you, translate it into the preprocessor code?
Or maybe there are other options?
Or just write:

doctype html
html
  head
    title includeExample
  body
    h2  the following content is not in this file ...
    include otherfile

The question is, let's say how do you connect mixins? Or do you describe everything in one file?

Answer 1

at the beginning in HTML, then if the result suits the preprocessor code, translate it?

mm.....what?! Do you understand that preprocessors were invented just to do the opposite?

Answer 2

The code is immediately written in Jade (Pug), because it is many times more convenient.
Here is a converter that will help for the first time:
html2jade.org

Answer 3

If you don't want to bother with gallp settings, install Prepros. Enough for basic things.
Preprocessor compilation, minification, liveReload