Файловая структура gulp-проекта, где исключены дублирования ресурсов и перепрописывания путей?

Question

[s_a_iii_a]

Пользуюсь gulp для сборки проекта. Есть 2 основных таска: для разработки приложения и для продакшна. Перовой задачи соответствует папка app, а второй - prod.

Я столкнулся с такими издержками текущей сборки и файловой структуры:

• и в папке app, и в папке prod приходится держать папку с ресурсами (обычно это изображения и шрифты). После запуска и выполнения задачи prod вынужден вручную копировать все новые ресурсы из app в prod.
  
• пути к ресурсам (изображениями, шрифтам) в продакшн версии index.html и style.css записаны неправильно. После запуска и выполнения задачи prod приходится вручную искать в index.html и style.css все "../" и вручную их удалять
  

Издержки в целом допустимые, с ними жить можно. Но это всё как и время забирает, так и непрофессионально.

Какая должна быть файловая структура проекта, чтобы избежать дублирования папки ресурсов, избежать перепрописывания путей после выполнения команды prod?

Какой я вижу идеальную файловую структуру?
Где папка ресурсов res лежит на одном уровне с папками app, prod. То есть в корневой директории.

Файловая структура в целом сейчас выглядит следующим образом:

app/
  js/
    *.js
  pages/
    index.html
    **/index.html
  res/
  scss/
    *.scss
  script.js
  style.css
node_modules/
prod/
  pages/
    index.html
    **/index.html
  res/
  script.js
  style.css

gulpfile.js имеет следующий вид

let gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    uglify = require('gulp-uglify-es').default,
    concat = require('gulp-concat'),
    autoPrefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('html', function () {
    return gulp.src([
            'app/*.html',
            'app/pages/**/*.html'
        ])
        .pipe(browserSync.reload({stream: true}))
});

gulp.task('scss', function () {
    return gulp.src([
        'app/scss/fonts.scss',
        'app/scss/style.scss',
        'node_modules/slick-carousel/slick/slick.scss',
        'app/scss/*.scss'
    ])
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoPrefix(
            ['last 3 versions','> 1%','ie 8','ie 7'],
            { cascade: true }))
        .pipe(concat('style.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('app'))
        .pipe(browserSync.reload({stream: true}))
});

gulp.task('js', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/rellax/rellax.min.js',
        'node_modules/slick-carousel/slick/slick.min.js',
        'app/js/*.js'
    ])
        .pipe(concat('script.js'))
        .pipe(gulp.dest('app/'))
        .pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function () {
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    })
});

gulp.task('watch', function () {
    gulp.watch('app/scss/*.scss', gulp.parallel('scss'));
    gulp.watch(['app/*.html', 'app/pages/**/*.html'], gulp.parallel('html'));
    gulp.watch('app/js/*.js', gulp.parallel('js'))
});

gulp.task('default', gulp.parallel('html', 'scss', 'js', 'browser-sync', 'watch'));


gulp.task('html_prod', function () {
    return gulp.src([
            'app/*.html',
            'app/pages/**/*.html'
        ])
        .pipe(gulp.dest([
            'prod/pages'
        ]))
});

gulp.task('scss_prod', function () {
    return gulp.src('app/style.css')
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(gulp.dest('prod'))
});

gulp.task('js_prod', function () {
    return gulp.src('app/script.js')
        .pipe(gulp.dest('prod'))
});

gulp.task('prod', gulp.parallel('html_prod', 'scss_prod', 'js_prod'));