Installed the gulp-file-include plugin. As a result, the index.html file was assembled crookedly. How to fix it?

Question

gulp.js

There is a file gulpfile.js

const { src, dest, parallel, series, watch } = require('gulp');
const fileinclude = require('gulp-file-include');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const svgSprite = require('gulp-svg-sprite');
const ttf2woff = require('gulp-ttf2woff');
const ttf2woff2 = require('gulp-ttf2woff2');
const fs = require('fs');
const del = require('del');
const browsersync = require('browser-sync').create();
const gutil = require('gulp-util');
const ftp = require('vinyl-ftp');
const path = {
    src: {
        html: [
            'src/*.html'
        ],
        css: './src/sass/**/*.sass',
        js: './src/js/**/*.js',
        img: './src/images/**/*',
        svg: './src/images/**/*.svg',
        fonts: './src/fonts/**',
        fontsStyle: './src/sass/_fonts.sass'
    },
    build: {
        html: 'public/',
        css: './public/css/',
        js: './public/js/',
        fonts: './public/fonts/',
        img: './public/images/'
    },
    watch: {
        html: './src/**/*.html',
        css: './src/sass/**/*.sass',
        js: './src/js/**/*.js',
        img: './src/images/**/*.{png,jpg,jpeg,gif,ico,svg,webp}',
        svg: './src/images/**/*.svg',
        fonts: './src/fonts/**'
    },
    clean: {
        all: './public/**'
    }
};

function htmlInclude() {
    return src(path.src.html)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream());
}

const styles = () => {
    return src(path.src.css)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'expanded'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(autoprefixer({
            overrideBrowserslist: 'last 10 versions',
            grid: true,
            cascade: false
        }))
        .pipe(cleanCSS({
            level: 2
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream());
};

const scripts = () => {
    return src(path.src.js)
        .pipe(webpackStream({
            mode: 'development',
            output: {
                filename: 'main.js'
            },
            module: {
                rules: [
                  {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                      options: {
                        presets: ['@babel/preset-env']
                      }
                    }
                  }
                ]
              }
        }))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
};

const svgSprites = () => {
    return src(path.src.svg)
        .pipe(svgSprite({
            mode: {
                stack: {
                    sprite: '../sprite.svg'
                }
            }
        }))
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream());
};

const images = () => {
    return src(path.src.img)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: {
                removeViewBox: false
            },
            interlaced: true,
            optimizationLevel: 3
        }))
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream());
};

const fonts = () => {
    src(path.src.fonts)
        .pipe(ttf2woff())
        .pipe(dest(path.build.fonts))
        .pipe(browsersync.stream());
    src(path.src.fonts)
        .pipe(ttf2woff2())
        .pipe(dest(path.build.fonts))
        .pipe(browsersync.stream());
    return src(path.src.fonts)
        .pipe(dest(path.build.fonts));
};

const cb = () => {};

let srcFonts = path.src.fontsStyle;
let appFonts = path.build.fonts;

const fontsStyle = (done) => {
    let filecontent = fs.readFileSync(srcFonts);

    fs.writeFile(srcFonts, '', cb);
    fs.readdir(appFonts, function (err, items) {
        if (items) {
            let cFontName;
            for (var i = 0; i < items.length; i++) {
                let fontname = items[i].split('.');
                fontname = fontname[0];
                if (cFontName != fontname) {
                    fs.appendFile(srcFonts, '@include font-face("' + fontname + '", "' + fontname + '", 400)\r\n', cb);
                }
                cFontName = fontname;
            }
        }
    });

    done();
};

const clean = () => {
    return del(path.clean.all);
};

const startWatch = () => {
    browsersync.init({
        server: {
            baseDir: path.build.html
        },
        notify: false,
        // online: true
    });
    watch(path.watch.html, htmlInclude);
    watch(path.watch.css, styles);
    watch(path.watch.js, scripts);
    watch(path.watch.svg, svgSprites);
    watch(path.watch.img, images);
    watch(path.watch.fonts, fonts);
    watch(path.watch.fonts, fontsStyle);
};

const deploy = () => {
    let conn = ftp.create({
        host: '',
        user: '',
        password: '',
        parallel: 10,
        log: gutil.log
    });

    let globs = [
        path.clean.all,
    ];

    return src(globs, {
        base: path.build.html,
        buffer: false
    })
        .pipe(conn.newer('')) // only upload newer files
        .pipe(conn.dest(''));
};

exports.htmlInclude = htmlInclude;
exports.styles = styles;
exports.scripts = scripts;
exports.startWatch = startWatch;
exports.deploy = deploy;
exports.default = series(clean, parallel(htmlInclude, scripts, fonts, images, svgSprites), fontsStyle, styles, startWatch);

There is an index.html file located in the root of the ./src/ folder

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.min.css">
    <title>START-TEMPLATE</title>
</head>
<body>
    @@include('html/header.html')
    <h1>Жил-был у бабушке серенький козлик!</h1>
    <svg class="">
        <use xlink:href="images/sprite.svg#svg"></use>
    </svg>
    @@include('html/footer.html')

    <script src="js/main.js"></script>
</body>
</html>

In gulpfile.js I installed the gulp-file-include plugin according to the gulp 4 documentation

function htmlInclude() {
    return src(path.src.html)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream());
}

The output at the root of the ./public/index.html folder is such crap

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.min.css">
    <title>START-TEMPLATE</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 class="title">Шапка сайта</h1>
</body>
</html>
    <h1>Жил-был у бабушке серенький козлик!</h1>
    <svg class="">
        <use xlink:href="images/sprite.svg#svg"></use>
    </svg>
    <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 class="title">Футер сайта</h1>
</body>
</html>

    <script src="js/main.js"></script>
</body>
</html>

Naturally, I included the header.html and footer.html files correctly, because I would not get index.html as output.
How can I fix this, namely, so that the gulp-file-include plugin spit out the correct index.html file without repeated tags at the output?

Answer 1

In header.html file

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Шапка сайта</h1>
</body>
</html>

In footer.html file

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Футер сайта</h1>
</body>
</html>

Answer 2

What's in the header and footer files?