gulp-web/gulpfile.js

105 lines
2.5 KiB
JavaScript

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