gulp-web/gulpfile.js

const { src, dest, series, parallel, watch } = require('gulp');

const path = require('path');
const del = require('del');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const mustache = require('gulp-mustache');
const fileInclude = require('gulp-file-include');
const svgmin = require('gulp-svgmin');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env');
const cssnano = require('cssnano');
const browserSync = require('browser-sync');

sass.compiler = require('node-sass');

const server = browserSync.create();

const babelConfig = require('./babel.config.js');
const postcssPlugins = [postcssPresetEnv(), cssnano()];

const srcDir = './src/';
const buildDir = './build/';
const jsSrc = path.join(srcDir, 'js/**/*.js');
const jsDest = path.join(buildDir, 'js/');
const scssSrc = path.join(srcDir, 'scss/**/*.scss');
const cssDest = path.join(buildDir, 'css/');
const htmlSrc = path.join(srcDir, 'html/**/*.html');
const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
const includeBaseDir = path.join(srcDir, 'includes/');
const includeSrc = path.join(includeBaseDir, '**/*');
const svgSrc = path.join(srcDir, 'svg/**/*.svg');
const svgDest = path.join(includeBaseDir, 'svg/');
const htmlDest = buildDir;
const assetSrc = path.join(srcDir, 'assets/**/*');
const assetDest = path.join(buildDir, 'assets/');

function jsClean() {
	return del(jsDest, { force: true });
}

function cssClean() {
	return del(cssDest, { force: true });
}

function htmlClean() {
	return del(path.join(htmlDest, '*.html'), { force: true });
}

function assetClean() {
	return del(assetDest, { force: true });
}

function jsTranspile() {
	return src(jsSrc, { sourcemaps: true })
		.pipe(babel(babelConfig))
		.pipe(terser())
		.pipe(dest(jsDest, { sourcemaps: true }));
}

function scssCompile() {
	return src(scssSrc, { sourcemaps: true })
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(postcssPlugins))
		.pipe(dest(cssDest, { sourcemaps: true }))
		.pipe(server.stream());
}

function svgOptimise() {
	return src(svgSrc)
		.pipe(svgmin())
		.pipe(dest(svgDest));
}

function htmlCompile() {
	return src(htmlSrc)
		.pipe(mustache())
		.pipe(
			fileInclude({
				basepath: includeBaseDir,
			})
		)
		.pipe(dest(htmlDest));
}

function assetCompile() {
	return src(assetSrc).pipe(dest(assetDest));
}

function serve(done) {
	server.init({
		open: false,
		server: {
			baseDir: buildDir,
		},
		// or instead of server
		// proxy: "example.home"
	});
	done();
}

function reload(done) {
	server.reload();
	done();
}

const jsWatch = () =>
	watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));

const cssWatch = () =>
	watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));

const svgWatch = () =>
	watch(svgSrc, { ignoreInitial: false }, series(svgOptimise));

const htmlWatch = () =>
	watch(
		[htmlSrc, includeSrc, mustacheSrc],
		{ ignoreInitial: false },
		series(htmlClean, htmlCompile, reload)
	);

const assetWatch = () =>
	watch(
		assetSrc,
		{ ignoreInitial: false },
		series(assetClean, assetCompile, reload)
	);

exports.default = parallel(
	jsWatch,
	cssWatch,
	svgWatch,
	htmlWatch,
	assetWatch,
	serve
);