gulpfile.js

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const {
	src,
	dest,
	watch,
	series,
	parallel
} = require('gulp');
// Importing all the Gulp-related packages we want to use
const sass = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const terser = require('gulp-terser');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const replace = require('gulp-replace');
const { notify } = require('browser-sync');
const imagemin = require('gulp-imagemin');
const browsersync = require('browser-sync').create();

// File paths
const files = {
	scssPath: 'src/scss/*.scss',
	jsPath: 'src/js/**/*.js',
	imgPath: 'src/images/*'
};

// Sass task: compiles the style.scss file into style.css
function scssTask() {
	return src(files.scssPath, {
			sourcemaps: true
		}) // set source and turn on sourcemaps
		.pipe(sass()) // compile SCSS to CSS
		.pipe(postcss([autoprefixer(), cssnano()])) // PostCSS plugins
		.pipe(dest('dist/css', {
			sourcemaps: '.'
		})); // put final CSS in dist folder with sourcemap
}

// JS task: concatenates and uglifies JS files to script.js
function jsTask() {
	return src(
			[
				files.jsPath,
				// ,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
				'!' + 'js/**/*min.js', // to exclude any specific files
			], {
				sourcemaps: true
			}
		)
		.pipe(concat('script.js'))
		.pipe(terser())
		.pipe(dest('dist/js', {
			sourcemaps: '.'
		}));
}

// compress images 

function imgTask() {
	return src([files.imgPath])
		.pipe(imagemin([
			imagemin.gifsicle({ interlaced: true }),
			imagemin.mozjpeg({ quality: 75, progressive: true }),
			imagemin.optipng({ optimizationLevel: 5 }),
			imagemin.svgo({
				plugins: [
					{ removeViewBox: true },
					{cleanupIDs: false}
				]
			})
		]))
		.pipe(dest('dist/images'))
}

// Cachebust
function cacheBustTask() {
	var cbString = new Date().getTime();
	return src(['index.html'])
		.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
		.pipe(dest('.'));
}

// Browsersync to spin up a local server
function browserSyncServe(cb) {
	// initializes browsersync server
	browsersync.init({
		server: {
			baseDir: '.',
		},
		notify: {
			styles: {
				top: 'auto',
				bottom: '0',
			},
		},
	});
	cb();
}

function browserSyncReload(cb) {
	// reloads browsersync server
	browsersync.reload();
	cb();
}

// Browsersync Watch task
// Watch HTML file for change and reload browsersync server
// watch SCSS and JS files for changes, run scss and js tasks simultaneously and update browsersync
function bsWatchTask() {
	watch('index.html', browserSyncReload);
	watch(
		[files.scssPath, files.jsPath, files.imgPath], {
			interval: 1000,
			usePolling: true
		}, //Makes docker work
		series(parallel(scssTask, jsTask ), cacheBustTask, browserSyncReload)
	);
}

exports.default = series(imgTask);

// Runs all of the above but also spins up a local Browsersync server
// Run by typing in "gulp bs" on the command line
exports.bs = series(
	parallel(scssTask, jsTask),
	cacheBustTask,
	browserSyncServe,
	bsWatchTask
);