import autoprefixer from "autoprefixer"; import browserSync from "browser-sync"; import spawn from "cross-spawn"; import cssnano from "cssnano"; import { dest, series, src, task, watch } from "gulp"; import postcss from "gulp-postcss"; import atimport from "postcss-import"; import imagemin from "gulp-imagemin"; import tailwindcss from "tailwindcss"; const SITE_ROOT = "./_site"; const POST_BUILD_STYLESHEET = `${SITE_ROOT}/assets/css/`; const PRE_BUILD_STYLESHEET = "./assets/css/style.css"; const IMAGES = "./assets/img"; const IMAGES_MINIMIZED = `${SITE_ROOT}/assets/`; const TAILWIND_CONFIG = "./tailwind.config.js"; // Fix for Windows compatibility const jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll"; const isDevelopmentBuild = process.env.NODE_ENV === "development"; task("buildJekyll", () => { browserSync.notify("Building Jekyll site..."); const args = ["exec", jekyll, "build"]; if (isDevelopmentBuild) { args.push("--incremental"); } return spawn("bundle", args, { stdio: "inherit" }); }); task("processStyles", () => { browserSync.notify("Compiling styles..."); return src(PRE_BUILD_STYLESHEET) .pipe( postcss([ atimport(), tailwindcss(TAILWIND_CONFIG), ...(isDevelopmentBuild ? [] : [autoprefixer(), cssnano()]), ]) ) .pipe(dest(POST_BUILD_STYLESHEET)); }); task("images", () => { return src(IMAGES) .pipe( imagemin([ imagemin.gifsicle({ interlaced: true }), imagemin.optipng({ optimizationLevel: 3 }), imagemin.svgo(), ]) ) .pipe(dest(IMAGES_MINIMIZED)); }); task("startServer", () => { browserSync.init({ files: [SITE_ROOT + "/**"], open: "local", port: 4000, server: { baseDir: SITE_ROOT, serveStaticOptions: { extensions: ["html"], }, }, }); watch( [ "**/*.css", "**/*.html", "**/*.js", "**/*.md", "**/*.markdown", "!_site/**/*", "!node_modules/**/*", ], { interval: 500 }, buildSite ); }); const buildSite = series("buildJekyll", "processStyles", "images"); exports.serve = series(buildSite, "startServer"); exports.default = series(buildSite);