My Gulp 4 File / Setup

my-gulp-4-file.js

const { watch, src, dest, parallel } = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const concat = require('gulp-concat');
const browserSync = require('browser-sync');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');
const del = require('del');
const rollup = require('gulp-better-rollup');
const babel = require('rollup-plugin-babel');
const resolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');

// Copy HTML Files
function html() {
  return src('./src/**/*.html')
    .pipe(dest('./dist'))
    .pipe(browserSync.stream())
}

// Compile SCSS/SASS to CSS
function css() {
  return src('./src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(sourcemaps.write())
    .pipe(dest('./dist/css'))
    .pipe(browserSync.stream())
}

// Optimize Images
function images() {
  return src('./src/img/**/*')
    .pipe(newer('./dist/img'))
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.mozjpeg({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true
            }
          ]
        })
      ])
    )
    .pipe(dest('./dist/img'))
    .pipe(browserSync.stream())
}

// Compile JS (ES6)
function js() {
  return src('./src/js/index.js', { sourcemaps: true })
    .pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
    .pipe(concat('default.min.js'))
    .pipe(dest('./dist/js', { sourcemaps: true }))
    .pipe(browserSync.stream())
}

// Clean Up (deleted `dist` folder)
function clean() {
  return del(['./dist']);
}

// Web Server / Live Reload
function server() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
  watch('./src/**/*.html', html);
  watch('./src/scss/**/*.scss', css);
  watch('./src/img/**/*', images);
  watch('./src/js/**/*.js', js);
}

exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.server = server;
exports.clean = clean;
exports.build = parallel(html, css, js, images);
exports.default = parallel(html, css, js, images, server);