Чем препроцессор отличается от шаблонизатора?

Шаблонизатор:

- 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 10 friends

Препроцессор:
p you have no friends
->
<p>you have no friends</p>

потому что он одновременно и собирает код и модернизирует в полноценный HTML, как написал user выше)

Шаблонизатор получает данные (с бэкенда, например) и вставляет их в шаблон, организовывая минимальную логику (циклы, ветвления, ...). Гляньте на EJS , например. Он вообще никак не затрагивает html-синтаксис.

Препроцессор как раз не имеет отношения ко входным данным, он просто упрощает работу с HTML . Попутно видоизменяя синтаксис в целях удобства.

Pug используется для обеих задач