gulp-replace from template and project source and merge into single file

Alright, one for the ages. The issue is I am trying to merge the structure from multiple sources into a single one. One of my sources is from the template.html which contains the base structure for index.html -source-. I trying to find a solution that replaces html block data from the source -index.html- body tag into the destination -template.html- lastly create a new merged document which outputs to -dest-.

File structure that is as follows:

• public
• ---assets
• ------template.html
• ---src
• ------app.js
• ------index.html
• ------main.css
• ---dist
• ------merged.html

I am using npm package gulp-replace (but open to other packages).

var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
var copycat = require('gulp-copycat');

gulp.task('default', function() {
    // create a watch task
    gulp.task('default', function() {
        gulp.src('assets/template.html')
            .pipe(htmlreplace({
                'cssInline': {
                    src: gulp.src('sheetgmail/main.css'),
                    tpl: '<style>%s</style>'
                },
                'body': gulp.src('sheetgmail/index.html'),
                'headscript': {
                    src: null,
                    tpl: '%s'
                },
                'js': {
                    src: gulp.src('sheetgmail/app.js'),
                    tpl: "<script type='text/javascript'>%s</script>"
                },
            }, {
                keepUnassigned: false,
                keepBlockTags: true,
                resolvePaths: false
            }))
            .pipe(gulp.dest('dist/'));
    });
});

via Isaiah Monroe Davis