Как пользоваться pug?
1. Pug — ребрендинг Jade. Был переименован из-за жалобы некоего одноименного бренда, не связанного с IT. Для работы я бы рекомендовал использовать именно его. Синтаксис такой же как и в Jade.
2. Код из туториала в Pug компилируется. Проверьте правильность отступов. Установите Linter, если работаете в Atom/Sublime.
3. Для компиляции использую следующий таск в Gulp:gulp.task('html', function buildHTML() {
  return gulp.src('app/pug/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('app'));
});
4. Вот примеры нескольких рабочих вариантов с if/else:- development = false
-
  css = [
    "css/fonts.css",
    "css/header.css",
    "css/style.css",
  ];

if development
    each item in css
        link(rel="stylesheet", href="" + item + "")
else
    script(src="css/style.min.js")
5. На своих проектах делаю такую структуру:
- главный файл index.pug
- каталоги: includes, mixins, regions (из названий должно быть понятно, что они содержат)
- файлы из каталогов инклудятся по мере надобности директивой include.
он не компилирует код из туторіала
Что на выходе? Ошибки? Вам точно нужна опция client: true?Также интересует как правильно их собирать.
Зависит от структуры проекта. Обычно все делится на блоки.И что такое pug file, чем отличаеться от обичного jade?
Ребрендинг, об изменениях можно почитать здесь.