gulp. How to properly connect the header and footer from separate files?

Question

gulp.js

I have "app" and "dist" folders. Two separate tasks are written: the first monitors files in the "app" folder, and the second uploads the project to production ("dist" folder). Everything is OK, but there is one problem.
At some point, I wanted to implement connection to the header and footer pages from separate files. The "gulp-rigger" plugin is usually used for this, but in all examples of its use, an HTML file is taken, processed and thrown into "dist". And "dist" is also monitored. But I'm not like that.
How do I implement templating so that files work correctly in the "app" folder

Answer 1

I didn't understand anything you wrote, what is wrong with you?
Example:

var gulp = require('gulp'),
rigger = require('gulp-rigger');
var src = {
       html: ['./src/*.html']
    },
gulp.task('html', function() {
    gulp.src(src.html)
        .pipe(rigger())
        .pipe(gulpIf(env !== 'dev', minifyHTML()))
        .pipe(gulp.dest(outputDir))
        .pipe(connect.reload())
});

gulp.task('watch', function() {
    gulp.watch('./src/**/*.html', ['html']);
});

in the src (app) folder we create a template folder , and which files are header.html, footer.html and others...
Further, in our html files, we only write:
and voila, turn off the headache.