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

Question

After much effort and countless attempts, I managed to write a gulpfile.js that meets my needs regarding file build Sass, js, img and html, however, I’m still having some problems.

First we go to the final file, then I will explain what are the problems 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: the tasks dist and Prod are very similar, the difference is that Prod generates only mimicked files in the directory ./dist and the task dist make a mimicked copy and a flat copy.

Let’s get down to business:

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

2. ./src/js: this directory wasn’t meant to be at the root of src, but within src/Assets/js, however, the problem arises: within my html files I am referring to the mimicked version of js, this was necessary because when migrating to production I do not need to change the links within html to include the .min, in development the file name is *.min.js but this file is not mimicked while running the task dist or Prod it is mimicked and copied to the directory ./dist/Assets/js. I thought of two approaches to solve this problem:

   • When running the tasks dist or Prod apply a replace to all html files by overwriting *.js for *.min.js
   • Another approach is to already work with the filename *.min.js inside the directory . /src/Assets/js and running the task dist apply a Rename to the file, making a copy as *.js (removing . min)

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