How to organize gulpfile.js for sass, js, img and html processing?

After a lot of effort and lots of attempts, I was able to write a gulpfile.js that meets my needs for sass build, js >, img and html , however, I'm still having some problems.

First we go to the final file, in the sequence I will explain what are the problems that I am facing:

var del =           require('del'),
    gulp =          require('gulp'),
    gulpif =        require('gulp-if'),
    sass =          require('gulp-sass'),
    uglify =        require('gulp-uglify'),
    rename =        require('gulp-rename'),
    htmlmin =       require('gulp-htmlmin'),
    imagemin =      require('gulp-imagemin'),
    gulpSequence =  require('gulp-sequence'),
    autoprefixer =  require('gulp-autoprefixer'),
    browserSync =   require('browser-sync').create();

var amb = 'dev';

gulp.task('clean', function () {
    return del([
        './src/assets/css',
        './src/assets/js',
        './dist'
    ]);
});

gulp.task('scss-to-css', function () {

    function scss(suffix, compressed, dest)
    {
        return gulp.src('./src/scss/**/*.scss')
            .pipe(autoprefixer())
            .pipe(sass({outputStyle: compressed}).on('error', sass.logError))
            .pipe(gulpif(suffix, rename({suffix: '.min'})))
            .pipe(gulp.dest(dest));
    }

    if(amb == 'dist') {
        scss(false, 'expanded', './dist/assets/css');
    }

    if (amb == 'prod' || amb == 'dist') {
        scss(true, 'compressed', './dist/assets/css');
    }

    return scss(true, 'expanded', './src/assets/css');
});

gulp.task('js', function () {

    function js(compressed, suffix, dest)
    {
        return gulp.src('./src/js/**/*.js')
            .pipe(gulpif(compressed, uglify()))
            .pipe(gulpif(suffix, rename({suffix: '.min'})))
            .pipe(gulp.dest(dest));
    }

    if(amb == 'dist') {
        js(false, false, './dist/assets/js');
    }

    if (amb == 'prod' || amb == 'dist') {
        js(true, true, './dist/assets/js');
    }

    return js(false, true, './src/assets/js');
});

gulp.task('html', function () {
    return gulp.src('./src/**/*.html')
        .pipe(gulpif(amb == 'prod', htmlmin({ collapseWhitespace: true, removeComments: true })))
        .pipe(gulp.dest('./dist'));
});

gulp.task('img', function () {
    return gulp.src('./src/assets/img/**/*')
        .pipe(imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.jpegtran({ progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo({
                plugins: [
                    { removeViewBox: true },
                    { cleanupIDs: false }
                ]
            })
        ]))
        .pipe(gulp.dest('./dist/assets/img'));
});

gulp.task('watch', function () {
    gulp.watch('./src/scss/**/*.scss', ['scss-to-css']);
    gulp.watch('./src/assets/js/**/*.js', ['js']);
});

gulp.task('serve', ['watch'], function () {
    browserSync.init({
        server: {
            baseDir: './src/'
        }
    });
    gulp.watch(['./src/**/*.html'], browserSync.reload);
    gulp.watch(['./src/assets/css/**/*'], browserSync.reload);
    gulp.watch(['./src/assets/js/**/*'], browserSync.reload);
    gulp.watch(['./src/assets/img/**/*'], browserSync.reload);
});

gulp.task('default', ['clean'], function (cb) {
    gulpSequence(['scss-to-css', 'js'], cb);
});

gulp.task('dist', ['clean'], function (cb) {
    amb = 'dist';
    gulpSequence(['scss-to-css', 'js', 'img', 'html'], cb);
});

gulp.task('prod', ['clean'], function (cb) {
    amb = 'prod';
    gulpSequence(['scss-to-css', 'js', 'img', 'html'], cb);
});

Just to explain: tasks dist and prod are very similar, the difference is that prod only generates mimicked files in the > ./ dist and the task dist makes a hard copy and a flat one.

Let's face it:

I was forced to put all the development content inside the src directory, this approach was necessary because running the task html with the% it copied the html to the ./ dist and began performing refuse operations. How can I have subdirectories with other .html files, I can not reduce the masquerade to ./**/*.html , also could not just play the html files in a subdirectory, this would force me to change all the notes inside the html, css ... files

, but the problem arises: inside my html files I'm referring to the jsified version of js, this was necessary because when migrating to production I do not need to change the links inside the html to include .min , in development the filename is * .min.js but this file is not mimicked, even when running the task dist or prod it is mimicked and copied to the directory ./ dist / assets / js . I thought of two approaches to solving this problem:

• When running tasks dist or prod apply a replace on all html files replacing ./*.html with *.js
• Another approach is to work with the * .min.js file name inside the ./src/assets/js directory and when running the task dist apply a Rename to the file, making a copy such as * .js (removing .min)

In the case of the last two solutions, I tried to apply, but I could not succeed.