Почему компоненты .pug не компилируются в .html?

Question

Дмитрий @ddimonn8080

Gulp.js
Pug

Почему компоненты .pug не компилируются в .html?

Здравствуйте, почему при части html кода с синтаксисом pug при include вставляются в результирующий html файл не скомпилированными в виде html?
PS. Первый раз использую pug - заранее благодарен

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body class="loaded">
    <!-- BEGIN BODY-->
    <div class="main-wrapper">
      <!-- BEGIN CONTENT-->
      <main class="content">
        <div class="wrapper"></div>
      </main>
      <!-- CONTENT EOF-->
      <!-- BEGIN HEADER-->
      <header>
        <div class="wrapper">
          <div class="hamburger">
            <div class="inner">
              <div class="line"></div>
              <div class="line"></div>
              <div class="line"></div>
            </div>
            <div class="animated"></div>
          </div>.logo
    a.logo_link(href='https://www.youtube.com')
        svg.style-scope.ytd-topbar-logo-renderer(viewBox='0 0 200 60', preserveAspectRatio='xMidYMid meet', focusable='false', style='pointer-events: none; display: block; width: 100%; height: 100%;')
            ...
    .country_code UA.searchbox
    form(action='')
        .container
            .input_wrapper
                input.searchinput(type='text', placeholder='Введите запрос')
            .keys_wrapper
                a(href='')
                    img(src='//www.gstatic.com/inputtools/images/tia.png', tia_field_name='search_query', tia_disable_swap='true', tia_property='youtube')
        button.search_button
            span.inner
                svg.style-scope.yt-icon(viewBox='0 0 24 24', preserveAspectRatio='xMidYMid meet', focusable='false', style='pointer-events: none; display: block; width: 100%; height: 100%;')
                    g.style-scope.yt-icon
                        path.style-scope.yt-icon(d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z')
        </div>
      </header>
      ...
  </body>
</html>

index.pug

doctype html
html(xmlns='http://www.w3.org/1999/xhtml')
  head
    meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
    meta(name='format-detection', content='telephone=no')
    meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1')
    title Главная
    meta(name='description', content='')
    meta(name='keywords', content='')
    link(rel='icon', type='image/x-icon', href='favicon.ico')
    link(rel='stylesheet', type='text/css', href='css/style.css')
  body.loaded
    // BEGIN BODY
    .main-wrapper
      // BEGIN CONTENT
      main.content
        .wrapper
      // CONTENT EOF
      // BEGIN HEADER
      header
        .wrapper
          .hamburger
            .inner
              .line
              .line
              .line
            .animated
          include ./components/logo.pug
          include ./components/searchbox.pug
      // HEADER EOF

searchbox.pug

.searchbox
    form(action='')
        .container
            .input_wrapper
                input.searchinput(type='text', placeholder='Введите запрос')
            .keys_wrapper
                a(href='')
                    img(src='//www.gstatic.com/inputtools/images/tia.png', tia_field_name='search_query', tia_disable_swap='true', tia_property='youtube')
        button.search_button
            span.inner
                svg.style-scope.yt-icon(viewBox='0 0 24 24', preserveAspectRatio='xMidYMid meet', focusable='false', style='pointer-events: none; display: block; width: 100%; height: 100%;')
                    g.style-scope.yt-icon
                        path.style-scope.yt-icon(d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z')

gulpfile.js

var gulp       = require('gulp'), // Подключаем Gulp
	sass         = require('gulp-sass'), //Подключаем Sass пакет,
	browserSync  = require('browser-sync'), // Подключаем Browser Sync
	concat       = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
	rename       = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
	del          = require('del'), // Подключаем библиотеку для удаления файлов и папок
	imagemin     = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
	pngquant     = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
	cache        = require('gulp-cache'), // Подключаем библиотеку кеширования
	plumber = require('gulp-plumber'), // Чтоб при ошибке не падал сервер
	autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов
	spritesmith = require('gulp.spritesmith'); //Для автосборки спрайта
	sourcemaps = require('gulp-sourcemaps'); //Что б в режиме разработчика показывало норм стили
var jade = require('gulp-jade');
gulp.task('pug', function() {
	return gulp.src('app/pug/**/*.pug')
		.pipe(plumber())
		.pipe(jade({
			pretty: true
		}))
		.pipe(gulp.dest('app'))
		.pipe(browserSync.reload({stream: true}))
});
gulp.task('sass', function(){ // Создаем таск Sass
	return gulp.src('app/scss/**/*.scss') // Берем источник
		.pipe(sourcemaps.init())
		.pipe(plumber())
		.pipe(sass({outputStyle: 'compact'}).on('error', sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass				
		.pipe(autoprefixer(['last 10 versions', '> 1%', 'ie 9', 'ie 10'], { cascade: true })) // Создаем префиксы
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
		.pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});
gulp.task('browser-sync', function() { // Создаем таск browser-sync
	browserSync({ // Выполняем browserSync
		server: { // Определяем параметры сервера
			baseDir: 'app' // Директория для сервера - app
		},
		open: false,
		notify: false // Отключаем уведомления
	});
});
gulp.task('watch', ['browser-sync', 'sprite'], function() {
	gulp.watch('app/pug/**/*.pug', ['pug']);
	gulp.watch('app/scss/**/*.scss', ['sass']); // Наблюдение за sass файлами в папке sass
	gulp.watch(['app/img/icons/**/*.png'], ['sprite']);
	gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
	gulp.watch('app/js/**/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
});