gulpfile.js

const { src, dest, task, watch, series, parallel } = require("gulp");
const options = require("./package.json").options;
const browserSync = require("browser-sync").create();
const sass = require("gulp-sass")(require("sass"));
const concat = require("gulp-concat");
const postcss = require("gulp-postcss");
const purify = require("gulp-purifycss");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const purgecss = require("gulp-purgecss");
const cleanCSS = require("gulp-clean-css");
const del = require("del");
const logSymbols = require("log-symbols");
const markdown = require("gulp-markdown");
const fileinclude = require("gulp-file-include");
const cache = require("gulp-cache");

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

//Load Previews on Browser on dev
task("livepreview", (done) => {
  browserSync.init({
    server: {
      baseDir: options.paths.dist.base,
    },
    port: 8080,
    https: false,
    notify: false,
    open: false,
  });
  done();
});

//Reload functions which triggers browser reload
function previewReload(done) {
  console.log("\n\t" + logSymbols.info, "Reloading Preview.\n");
  browserSync.reload();
  cache.clearAll(done);
  done();
}

task("dev-html", (done) => {
  src([
    options.paths.src.base + "/views/*.html",
    options.paths.src.base + "/views/**/admin-dashboards/*.html",
    options.paths.src.base + "/views/**/home-pages/*.html",
  ])
    .pipe(fileinclude({ prefix: "@" }))
    .pipe(dest(options.paths.dist.base));

  // src([options.paths.src.base + "/views/**/dashboards/*.html"])
  //   .pipe(fileinclude({ prefix: "@" }))
  //   .pipe(dest(options.paths.build.base));
  done();
});

task("build-html", (done) => {
  src([
    options.paths.src.base + "/views/*.html",
    options.paths.src.base + "/views/**/admin-dashboards/*.html",
    options.paths.src.base + "/views/**/home-pages/*.html",
  ])
    .pipe(fileinclude({ prefix: "@" }))
    .pipe(dest(options.paths.build.base));

  // src([options.paths.src.base + "/views/**/admin-dashboards/*.html"])
  //   .pipe(fileinclude({ prefix: "@" }))
  //   .pipe(dest(options.paths.build.base));
  done();
});

task("readme", () => {
  return src("README.md").pipe(markdown()).pipe(dest(options.paths.dist.base));
});

//Compiling styles
task("dev-styles", () => {
  var tailwindcss = require("tailwindcss");
  return src(options.paths.src.css + "/app.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(
      postcss([tailwindcss(options.config.tailwindjs), require("autoprefixer")])
    )
    .pipe(concat({ path: "style.css" }))
    .pipe(dest(options.paths.dist.css));
});

//Compiling styles
task("build-styles", () => {
  return (
    src(options.paths.dist.css + "/**/*")
      // .pipe(
      //   purgecss({
      //     content: ["src/views/**/*.html", "src/**/.*js"],
      //     extractors: [
      //       {
      //         extractor: TailwindExtractor,
      //         extensions: ["html"],
      //       },
      //     ],
      //   })
      // )
      .pipe(cleanCSS({ compatibility: "ie8" }))
      .pipe(dest(options.paths.build.css))
  );
});

//merging all script files to a single file
task("dev-scripts", () => {
  return src([options.paths.src.js + "/main.js"])
    .pipe(concat({ path: "scripts.js" }))
    .pipe(dest(options.paths.dist.js));
});

task("dev-copy-js-plugins", function () {
  return src([options.paths.src.js + "/plugins/**/*.js"]).pipe(
    dest(options.paths.dist.js)
  );
});

task("build-copy-js-plugins", function () {
  return src([options.paths.src.js + "/plugins/**/*.js"]).pipe(
    dest(options.paths.build.js)
  );
});

task("dev-copy-css-plugins", function () {
  return src([options.paths.src.css + "/plugins/**/*.css"]).pipe(
    dest(options.paths.dist.css)
  );
});

task("build-copy-css-plugins", function () {
  return src([options.paths.src.css + "/plugins/**/*.css"]).pipe(
    dest(options.paths.build.css)
  );
});

//merging all script files to a single file
task("build-scripts", () => {
  return (
    src([options.paths.src.js + "/main.js"])
      .pipe(concat({ path: "scripts.js" }))
      //    .pipe(uglify())
      .pipe(dest(options.paths.build.js))
  );
});

task("dev-imgs", (done) => {
  src(options.paths.src.img + "/**/*").pipe(dest(options.paths.dist.img));
  done();
});

task("build-imgs", (done) => {
  src(options.paths.src.img + "/**/*")
    .pipe(imagemin())
    .pipe(dest(options.paths.build.img));
  done();
});

//Watch files for changes
task("watch-changes", (done) => {
  //Watching HTML Files edits
  watch(options.config.tailwindjs, series("dev-styles", previewReload));

  //Watching HTML Files edits
  watch(
    options.paths.src.base + "/views/**/*.html",
    series("dev-styles", "dev-html", previewReload)
  );

  //Watching css Files edits
  watch(options.paths.src.css + "/**/*", series("dev-styles", previewReload));

  //Watching JS Files edits
  watch(
    options.paths.src.js + "/**/*.js",
    series("dev-scripts", previewReload)
  );

  //Watching Img Files updates
  watch(options.paths.src.img + "/**/*", series("dev-imgs", previewReload));

  console.log(
    "\n\t" + logSymbols.info,
    "Watching for Changes made to files.\n"
  );

  done();
});

//Cleaning dist folder for fresh start
task("clean:dist", () => {
  console.log(
    "\n\t" + logSymbols.info,
    "Cleaning dist folder for fresh start.\n"
  );
  return del(["dist"]);
});

//Cleaning build folder for fresh start
task("clean:build", () => {
  console.log(
    "\n\t" + logSymbols.info,
    "Cleaning build folder for fresh start.\n"
  );
  return del(["build"]);
});

//series of tasks to run on dev command
task(
  "development",
  series(
    "clean:dist",
    "dev-html",
    "dev-styles",
    "dev-scripts",
    "dev-copy-js-plugins",
    "dev-copy-css-plugins",
    "dev-imgs",
    (done) => {
      console.log(
        "\n\t" + logSymbols.info,
        "npm run dev is complete. Files are located at ./dist\n"
      );
      done();
    }
  )
);

task(
  "optamizedBuild",
  series(
    "clean:build",
    "build-html",
    "dev-styles",
    "build-styles",
    "build-scripts",
    "build-copy-css-plugins",
    "build-copy-js-plugins",
    "build-imgs",
    (done) => {
      console.log(
        "\n\t" + logSymbols.info,
        "npm run build is complete. Files are located at ./build\n"
      );
      done();
    }
  )
);

exports.default = series("development", "livepreview", "watch-changes");
exports.build = series("optamizedBuild");