gulp 4 for opencart

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass'),
    browserSync   = require('browser-sync'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify-es').default,
    cleancss      = require('gulp-clean-css'),
    rename        = require('gulp-rename'),
    autoprefixer  = require('gulp-autoprefixer'),
    notify        = require('gulp-notify'),
    rsync         = require('gulp-rsync'),
    imageResize   = require('gulp-image-resize'),
    imagemin      = require('gulp-imagemin'),
    mozjpeg       = require('imagemin-mozjpeg'),
    newer         = require('gulp-newer'),
    sourcemaps    = require('gulp-sourcemaps'),
    del           = require('del'),
    ftp           = require('vinyl-ftp'),
    log           = require('fancy-log');

// Local Server
gulp.task('browser-sync', function() {
    browserSync({
        proxy: "dsmaxcomua",
        notify: false,
        // online: false, // Work Offline Without Internet Connection
        // tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
    });
});

// Sass|Scss Styles
gulp.task('styles', function() {
    return gulp.src('catalog/view/theme/storeset/sass/**/*.sass')
        .pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
        .pipe(sourcemaps.init())
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer(['last 15 versions']))
        .pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('catalog/view/theme/storeset/stylesheet/'))
        .pipe(browserSync.stream());
    //.pipe(browserSync.reload({stream: true}));
});

// Main JS
gulp.task('main-js', function() {
    return gulp.src([
        'catalog/view/theme/storeset/js/main.js',
    ])
        .pipe(concat('main.min.js'))
        .pipe(uglify()) // Mifify js (opt.)
        .pipe(gulp.dest('catalog/view/theme/storeset/js/'));
});

// Libs JS
gulp.task('scripts', gulp.series('main-js', function() {
        return gulp.src([
            'catalog/view/javascript/mmenu/mmenu.js',
            'catalog/view/theme/storeset/js/main.min.js'
        ])
        .pipe(concat('scripts.min.js'))
        .pipe(uglify()) // Mifify js (opt.)
        .pipe(gulp.dest('catalog/view/theme/storeset/js/'))
        .pipe(browserSync.reload({ stream: true }))
    })
);

// Live Reload
gulp.task('code', function() {
    return gulp.src('catalog/view/theme/storeset/template/**/*.tpl')
        .pipe(browserSync.reload({ stream: true }));
});

// Deploy
gulp.task('rsync', function() {
    return gulp.src('app/**')
        .pipe(rsync({
            root: 'catalog/view/theme/storeset/',
            hostname: 'username@yousite.com',
            destination: 'yousite/public_html/catalog/view/theme/storeset/',
            // include: ['*.htaccess'], // Includes files to deploy
            exclude: ['**/Thumbs.db', '**/*.DS_Store'], // Excludes files from deploy
            recursive: true,
            archive: true,
            silent: false,
            compress: true
        }));
});

// gulp.task('deploy', function() {
//     var conn = ftp.create({
//         host:      '',
//         user:      '',
//         password:  '',
//         parallel:  10,
//         log: gutil.log
//     });
//     var globs = [
//         'catalog/view/theme/oct_techstore/**'
//     ];
//     return gulp.src(globs, {buffer: false})
//         .pipe(conn.dest('/catalog/view/theme/oct_techstore/'));
// });

// gulp.task('deploy', function() {
//     var conn = ftp.create( {
//         host:     '',
//         user:     '',
//         password: '',
//         parallel: 10,
//         log:      log
//     });
//
//     var globs = [
//         'catalog/view/theme/oct_techstore/**'
//     ];
//
//     // using base = '.' will transfer everything to /public_html correctly
//     // turn off buffering in gulp.src for best performance
//
//     return gulp.src(globs,{buffer: false})
//         .pipe(conn.newer('/catalog/view/theme/oct_techstore/')) // only upload newer files
//         .pipe(conn.dest('/catalog/view/theme/oct_techstore/'));
// });

// Images @x1 & @x2 + Compression | Required imagemagick (sudo apt update; sudo apt install imagemagick)
// gulp.task('img1x', function() {
//     return gulp.src('app/img/_src/**/*.*')
//         .pipe(newer('app/img/@1x'))
//         .pipe(imageResize({ width: '50%', imageMagick: true }))
//         .pipe(imagemin([
//             imagemin.jpegtran({ progressive: true }),
//             mozjpeg({ quality: 90 })
//         ]))
//         .pipe(gulp.dest('app/img/@1x'))
// });
// gulp.task('img2x', function() {
//     return gulp.src('app/img/_src/**/*.*')
//         .pipe(newer('app/img/@2x'))
//         .pipe(imagemin([
//             imagemin.jpegtran({ progressive: true }),
//             mozjpeg({ quality: 90 })
//         ]))
//         .pipe(gulp.dest('app/img/@2x'))
// });
// gulp.task('img', gulp.series('img1x', 'img2x'));

// Clean @*x IMG's
// gulp.task('cleanimg', function() {
//     return del(['app/img/@*'], { force:true })
// });

// watch
gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/storeset/sass/**/*.sass', gulp.parallel('styles'));
    gulp.watch('catalog/view/theme/storeset/js/main.js', gulp.parallel('scripts'));
    gulp.watch('catalog/view/theme/storeset/template/**/*.tpl', gulp.parallel('code'));
    //gulp.watch('app/img/_src/**/*', gulp.parallel('img'));
});

// default
gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));