const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const imagemin = require("gulp-imagemin");
const concat = require("gulp-concat");
const uglify = require("gulp-uglify-es").default;

// Compile SCSS into CSS
styles = () => {
  return (
    gulp
      // 1. Where is the SCSS file
      .src("./src/scss/APP.scss")

      // 2. Pass that file through the SASS compiler
      .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))

      // 3. Destination for the CSS
      .pipe(gulp.dest("./build"))

      // 4. Stream changes to all browsers
      .pipe(browserSync.stream())
  );
};

html = () => {
  return (
    gulp
      // 1. Where is the HTML file
      .src("./src/html/**/*.html")

      // 2. Destination for the CSS
      .pipe(gulp.dest("./build/HTML"))

      // 3. Stream changes to all browsers
      .pipe(browserSync.stream())
  );
};

javascript = () => {
  return (
    gulp

      // 1. Where are the JavaScript dependencies located
      .src([
        "./node_modules/jquery/dist/jquery.js",
        "./src/js/**/*.js",
        "./node_modules/bootstrap/dist/js/bootstrap.js"
      ])

      // 2. Bundle and minify the JavaScript
      .pipe(concat("bundle.js"))
      .pipe(uglify())

      // 3. Destination for the Javascript
      .pipe(gulp.dest("./build"))

      // 4. Stream changes to all browsers
      .pipe(browserSync.stream())
  );
};

images = () => {
  return (
    gulp

      // 1. Where is the images directory
      .src("./src/assets/**/*")

      // 2. Minify the images
      .pipe(imagemin())

      // 3. Destination for the images
      .pipe(gulp.dest("./build/images"))

      // 4. Stream changes to all browsers
      .pipe(browserSync.stream())
  );
};

watch = () => {
  browserSync.init({
    server: {
      baseDir: "./build",
      index: "./HTML/index.html"
    }
  });

  gulp.watch("./src/html/**/*.html", html);
  gulp.watch("./src/scss/**/*.scss", styles);
  gulp.watch("./src/js/**/*.js", javascript);
  gulp.watch("./src/assets/**/*", images);

  gulp.watch("./src/js/**/*js").on("change", browserSync.reload);
  gulp.watch("./src/html/**/*.html").on("change", browserSync.reload);
  gulp.watch("./src/assets/**/*").on("change", browserSync.reload);
};

gulp.task("default", gulp.series(html, styles, images, javascript, watch));

exports.styles = styles;
exports.watch = watch;
exports.html = html;
exports.javascript = javascript;
exports.images = images;