gulp-less + cust-error-msg + browserSync + compress {js,css,img,html}

gulpfile.js

//install
// npm i gulp-autoprefixer browser-sync gulp-cache gulp-clean-css gulp-concat del gulp gulp-if gulp-util gulp-htmlmin gulp-imagemin imagemin-giflossy imagemin-mozjpeg imagemin-pngquant imagemin-zopfli gulp-less gulp-notify gulp-plumber gulp-replace gulp-sourcemaps gulp-uglify -f
// node node_modules/jpegtran-bin/lib/install.js
// node node_modules/gifsicle/lib/install.js
// node node_modules/zopflipng-bin/lib/install.js
// node node_modules/mozjpeg/lib/install.js
// node node_modules/giflossy/lib/install.js
// node node_modules/pngquant-bin/lib/install.js

var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var cache = require('gulp-cache');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var htmlmin = require('gulp-htmlmin');
var imagemin = require('gulp-imagemin');
var imageminGiflossy = require('imagemin-giflossy');
var imageminMozjpeg = require('imagemin-mozjpeg'); //need to run 'brew install libpng'
var imageminPngquant = require('imagemin-pngquant');
var imageminZopfli = require('imagemin-zopfli');
var less = require('gulp-less');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var replace = require('gulp-replace');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');


//compile less, create sourcemaps and refresh browsers
gulp.task('less', function() {

    //report error
    var reportError = function(error) {
        var report = '\n';
        var chalk = gutil.colors.white.bgRed;

        if (error.plugin) {
            report += chalk('PLUGIN:') + ' [' + error.plugin + ']\n';
        }
        if (error.message) {
            report += chalk('ERROR:\040') + ' ' + error.message + '\n';
        }
        console.error(report);

        if (error.line && error.column) {
            var notifyMessage = 'LINE ' + error.line + ':' + error.column;
        } else {
            var notifyMessage = '';
        }

        notify({
            title: 'FAIL: ' + error.plugin,
            message: notifyMessage,
            sound: 'Beep'
        }).write(error);

        gutil.beep();
        this.emit('end');
    }

    //less, sourcemaps and refresh
    return gulp.src('app/assets/less/**/*.less')
        //custom error gist NEEDED
        .pipe(plumber({
            errorHandler: reportError
        }))
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('app/assets/css'))
        .pipe(browserSync.stream());
});

//browserSync settings
gulp.task('serve', function() {
    browserSync.init({
        browser: "google chrome",
        server: 'app',
        notify: true
    });
});

// concat and clean js
gulp.task('compress:js', function() {
    return gulp.src('./app/assets/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'));
});

// concat, clean and remove unused css
gulp.task('compress:css', function() {
    return gulp.src('app/assets/css/**/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/assets/css'));
});

//compress all images
gulp.task('compress:img', function() {
    return gulp.src('app/assets/img/**/*.{gif,png,jpg,svg}', {
            base: 'app'
        })
        .pipe(cache(imagemin([
            //png
            imageminPngquant({
                speed: 1,
                quality: [0.95, 1] //lossy settings
            }),
            imageminZopfli({
                more: true
                // iterations: 50 // very slow but more effective
            }),
            //gif
            // imagemin.gifsicle({
            //     interlaced: true,
            //     optimizationLevel: 3
            // }),
            //gif very light lossy, use only one of gifsicle or Giflossy
            imageminGiflossy({
                optimizationLevel: 3,
                optimize: 3, //keep-empty: Preserve empty transparent frames
                lossy: 2
            }),
            //svg
            imagemin.svgo({
                plugins: [{
                    removeViewBox: false
                }]
            }),
            //jpg lossless
            imagemin.jpegtran({
                progressive: true
            }),
            //jpg very light lossy, use vs jpegtran
            imageminMozjpeg({
                quality: 90
            })
        ])))
        .pipe(gulp.dest('dist'));
});

//compress html
gulp.task('compress:html', function() {
    return gulp.src('app/**/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            conservativeCollapse: true, //work with collapseWhitespace and save at least 1 space inside teg
            preserveLineBreaks: false, //make line break if collapseWhitespace true

            collapseBooleanAttributes: true, //<input disabled="disabled"> to <input disabled>. problem in cases when css looks like: input[disabled="disabled"] { color: green }
            decodeEntities: true,
            minifyCSS: true,
            minifyJS: true,
            //removeAttributeQuotes: true, //remove "" and it may be too much
            removeComments: true,
            removeCommentsFromCDATA: true,
            removeEmptyAttributes: true,
            removeRedundantAttributes: true, //default attribute name-value get stripped. Example: <input type="text" /> convert to <input/> so css input[type="text"] won't work
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            sortAttributes: true, //improve gzip compression
            sortClassName: true, //improve gzip compression
            useShortDoctype: true
        }))
        //remove empty line from compressed html
        .pipe(replace(/^\s*\r?\n/gm, ''))
        .pipe(gulp.dest('dist'));
});

gulp.task('removedist', function() {
    return del('dist');
});

//watch settings
gulp.task('watch', gulp.parallel('serve', 'less', function() {
    gulp.watch('app/assets/less/*.less', gulp.series('less'));
    browserSync.watch('app/**/*.{js,html}').on('change', browserSync.reload);
}));

//set default task
gulp.task('default', gulp.series('watch'));

//build
gulp.task('build',
    gulp.series('removedist', 'less', gulp.parallel('compress:js', 'compress:css', 'compress:img', 'compress:html'),
        function() {

            var fonts = gulp.src('app/assets/fonts/**/*', {
                base: 'app'
            }).pipe(gulp.dest('dist'));

            var favicon = gulp.src('app/assets/favicon/**/*', {
                base: 'app'
            }).pipe(gulp.dest('dist'));

            var libs = gulp.src('app/assets/libs/**/*', {
                base: 'app'
            }).pipe(gulp.dest('dist'));

            var htaccess = gulp.src('app/.htaccess', {
                base: 'app'
            }).pipe(gulp.dest('dist'));

            return fonts, favicon, libs, htaccess;
        }));