How is a preprocessor different from a template engine?

Question

Pug

How is a preprocessor different from a template engine? And why is pug both the one and the other?

Answer 1

The template engine allows you to display variables and sometimes organize simple logic (loops, conditions).
The preprocessor expands or changes the syntax.
Pug does both the first and second :)

Answer 2

Template engine:

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

->
->
<p>you have no friends</p>

Answer 3

because it both collects the code and modernizes it into full-fledged HTML, as user wrote above)

Answer 4

The template engine receives data (from the backend, for example) and inserts it into the template, organizing minimal logic (loops, branches, ...). Take a look at EJS for example. It doesn't affect the html syntax at all.
The preprocessor has nothing to do with the input data, it just makes it easier to work with HTML . Along the way, modifying the syntax for convenience.
Pug is used for both tasks