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 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 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(htmlDest, { 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 htmlCompile() { return src(htmlSrc).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 htmlWatch = () => watch( htmlSrc, { ignoreInitial: false }, series(htmlClean, htmlCompile, reload) ); const assetWatch = () => watch( assetSrc, { ignoreInitial: false }, series(assetClean, assetCompile, reload) ); exports.default = parallel(jsWatch, cssWatch, htmlWatch, assetWatch, serve);