nunjucks Не вставляеться шаблон при отслеживании файла

Подключил шаблонизатор nunjucks к своему сборщику на gulp

Мой файл gulpfile.js

import gulp from "gulp";                             
import nodeSass from "sass";                         
import gulpSass from "gulp-sass";
import browserSync from 'browser-sync';               
import autoprefixer from 'gulp-autoprefixer';         
import csso from 'gulp-csso';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import {pipeline} from 'readable-stream';
import del from 'del';
import gulpif from 'gulp-if';
import useref from 'gulp-useref';

//import mozjpeg from 'mozjpeg';
import imagemin, {gifsicle, optipng, svgo} from 'gulp-imagemin';

const sass = gulpSass(nodeSass);


import spritesmith from 'gulp.spritesmith';

//import changed from 'gulp-changed';

import nunjucksRender from "gulp-nunjucks-render";
import frontMatter from "gulp-front-matter";


/*********************************************/
/*WATCHER (WATCHING FILE CHANGES)*/

/*********************************************/

function styles() {
    return gulp.src('./app/sass/**/*')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(csso())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.stream());
}


// function stylesReviews() {
//     return gulp.src('./app/sass/only/**/*')
//         .pipe(sass().on('error', sass.logError))
//         .pipe(autoprefixer({
//             cascade: false
//         }))
//         .pipe(csso())
//         .pipe(gulp.dest('app/css/onlyFaq'))
//         .pipe(browserSync.stream());
// }

function scripts() {
    return gulp.src('./app/js/*.js')                 // get the files
        .pipe(browserSync.stream())
}

function fonts() {
    return gulp.src('./app/fonts/**/*')                 // get the files
        .pipe(gulp.dest('dist/fonts'));                 // where to put the files
}

/*********************************************/
/*LIBS TASKS (PERSONAL DEVELOPER LIBS)*
/*********************************************/

function libs() {
    return gulp.src('./app/libs/**/*')
        .pipe(gulp.dest('dist/libs'));
}

function extrass() {
    return gulp.src([
        'app/*.html'
    ]).pipe(gulp.dest('dist'));
}

function buildSprite() {
    var spriteData = gulp.src('./app/images/sprite/*.*')
        .pipe(spritesmith({
            imgName: '../images/sprite.png',
            cssName: '_sprite.scss',
            cssFormat: 'scss',
            padding: 5
        }));

    spriteData.img.pipe(gulp.dest('./app/images'));
    return spriteData.css.pipe(gulp.dest('./app/sass/components'));
}

function sprite(done) {
    buildSprite().on('end', done);
}

function images() {
    return gulp.src('./app/images/**/*')                   // get the files
        .pipe(imagemin([
            gifsicle({interlaced: true}),
            // mozjpeg({ quality: 75, progressive: true }),
            // optipng({optimizationLevel: 5}),
            // svgo({
            //     plugins: [
            //         {
            //             name: 'removeViewBox',
            //             active: false
            //         },
            //         {
            //             name: 'cleanupIDs',
            //             active: false
            //         }
            //     ]
            // })
        ]))
        .pipe(gulp.dest('dist/images'));
}



/// Nunjucks
function html() {
    return gulp.src('app/templates/*.html')
        .pipe(nunjucksRender({
                path: ['app/templates/']
            }))
        .pipe(gulp.dest('dist/templates/'));
}

function watch() {
    browserSync.init({
        server: {
            baseDir: "./app/",
            notify: false,
        },
        // tunnel: true,
    });
    gulp.watch('./app/sass/**/*.scss', styles);
    gulp.watch('./app/**/*.html', html).on('change',  browserSync.reload);
    gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
    gulp.watch('./app/images/sprite/*.*').on('change', browserSync.reload);
}




function clean() {
    return del(['dist/**', '!dist'])
}

function finished() {
    return gulp.src('app/*.html')
        .pipe(frontMatter({property: "data"}))
        .pipe(nunjucksRender())
        .pipe(gulpif('app/*.js', uglify()))
        .pipe(gulpif('app/*.css', csso()))
        .pipe(useref())
        .pipe(gulp.dest('./dist'));
}


function compress() {
    return pipeline(
        gulp.src('dist/js/*.js'),
        uglify(),
        gulp.dest('dist/js')
    );
}


gulp.task('extrass', extrass);
gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('libs', libs);
gulp.task('fonts', fonts);
gulp.task('sprite', sprite);
gulp.task('images', images);
gulp.task('clean', clean);
gulp.task('finished', finished);
gulp.task('compress', compress);
gulp.task('watch', watch);

const standartWatch = gulp.parallel(watch);
gulp.task('default', standartWatch);

gulp.task('build', gulp.series('clean', 'styles', 'scripts', 'images', 'fonts', 'libs', 'extrass', 'finished', 'compress'));

Сборка шаблонизатора происходит правильно, а вот при запуске browserSync все разваливаеться и компоненты шаблонизатора из файла не поттягивает, и не превращает в рабочий элемент. Вот так выглядит элемент templates/head.html

{% if not(title) %}
    {% set title = "Don't forget to change tittle" %}
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
    <title>{{title}}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <!-- FAVICON -->
    <link rel="shortcut icon" href="images/favicon/favicon.ico" type="images/x-icon">
    <link rel="apple-touch-icon" href="images/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png">
    <!-- build:css css/main.min.css -->
    <link rel="stylesheet" href="css/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="libs/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="libs/simplelightbox/simple-lightbox.min.css">
</head>

Не могу понять, что я делаю не так. Вроде как все происходит вот в этой строке.

gulp.watch('./app/**/*.html', html).on('change',  browserSync.reload);