Typical gulpfile.js

The file is written for Gulp 4. The file is designed to work with styles (SCSS) and JavaScript. All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files.

const production = ( process.env.NODE_ENV == 'production' );

//base part
let {src, dest, parallel, series, watch} = require('gulp'),
    rename  = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

//css part
let sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer');

const babel = require('gulp-babel'),
    uglify = require('gulp-uglify-es').default,
    include = require("gulp-include");

let pathFiles = {
    build: {
        css: './css/',
        js: './js/'
    },
    src: {
        css: './src/scss/**/*.scss',
        js: './src/js/**/*.js'
    }
};

function swallowError(error){
    console.log(error.toString());
    this.emit('end');
}

function styles() {
    return src('./src/scss/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .on('error', swallowError)
        .pipe(autoprefixer({
            browsers: ['last 5 versions', '> 5%'],
            cascade: false
        }))
        .pipe(cleanCSS({level: {1: {specialComments: false}}}))
        .pipe(rename('style.min.css'))
        .pipe(sourcemaps.write('./'))
        .pipe(dest(pathFiles.build.css));
}

function vendorStyles() {
    return src('./src/scss/vendor.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .on('error', swallowError)
        .pipe(autoprefixer({
            browsers: ['last 5 versions', '> 5%'],
            cascade: false
        }))
        .pipe(cleanCSS({level: {1: {specialComments: false}}}))
        .pipe(rename('vendor.min.css'))
        .pipe(sourcemaps.write('./'))
        .pipe(dest(pathFiles.build.css));
}

function scripts() {
    return src('./src/js/index.js')
        .pipe(include())
        .pipe(rename('app.min.js'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .on('error', swallowError)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(dest(pathFiles.build.js));
}

function vendorScripts() {
    return src('./src/js/vendor.js')
        .pipe(include())
        .pipe(rename('vendor.min.js'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .on('error', swallowError)
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(dest(pathFiles.build.js));
}

function gulpWatch(done) {
    watch(pathFiles.src.css, styles);
    watch(pathFiles.src.js, scripts);
    done();
}

exports.vendorStyles = vendorStyles;
exports.styles = styles;
exports.scripts = scripts;
exports.vendorScripts = vendorScripts;
exports.gulpWatch = gulpWatch;
exports.build = series(styles, vendorStyles, scripts, vendorScripts);
exports.default = series(styles, vendorStyles, scripts, vendorScripts, gulpWatch);