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 );