let gulp = require("gulp");
let browserSync = require("browser-sync").create();
let sass = require("gulp-sass");

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

var paths = { 
	pages: ["src/html/*.html"],
	css: ["src/css/*.css"],
};

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});

gulp.task("copy-css", function () {
  return gulp.src(paths.css).pipe(gulp.dest("dist/css"));
});

gulp.task("compile-ts", function () {
	return tsProject.src().pipe(tsProject()).js.pipe(gulp.dest("dist"));
});

// Static Server + compile ts + watch scss/html/css files
gulp.task('serve', gulp.series("compile-ts", 'sass', "copy-html", "copy-css", function() {

    browserSync.init({
        server: "./dist/"
    });

    gulp.watch("src/scss/*.scss", gulp.series('sass'));
    gulp.watch("src/css/*.css").on('change', gulp.series("copy-css"));
    gulp.watch("src/html/*.html").on('change', gulp.series("copy-html"));
    gulp.watch("dist/*.html").on('change', browserSync.reload);
}));


gulp.task('default', gulp.series('serve'));