var version = require("./package.json").version 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 browserify = require("browserify"); var source = require("vinyl-source-stream"); var tsify = require("tsify"); var watchify = require("watchify"); var fancy_log = require("fancy-log"); const zip = require("gulp-zip") var paths = { pages: ["src/html/*.html"], css: ["src/css/*.css"], ts: ["src/ts/frontend.ts"], }; var browserifyOpts = { basedir: ".", debug: true, entries: paths.ts, cache: {}, packageCache: {}, } var browserifyBuildOpts = browserify(browserifyOpts); var browserifyWatchOpts = browserify(Object.assign({},browserifyOpts)); function browserifyBuild() { return browserifyBuildOpts .plugin("tsify") .bundle() .pipe(source("bundle.js")) .pipe(gulp.dest("dist")); }; var watchedBrowserify = watchify(browserifyWatchOpts).plugin("tsify"); function watchedBundle() { return watchedBrowserify .bundle() .on("error", fancy_log) .pipe(source("bundle.js")) .pipe(gulp.dest("dist")); } /** * Uses version in package.json to create zip */ function versionedZip() { return gulp.src("./dist/**") .pipe(zip(`${version}.zip`)) .pipe(gulp.dest(".")); } // Non-injecting SASS gulp.task('sass-noninject', function() { return gulp.src("src/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("dist/")) }); // Compile sass into CSS & auto-inject into browsers gulp.task('sass', function() { return gulp.src("src/scss/*.scss") .pipe(sass()) .pipe(gulp.dest("dist/")) .pipe(browserSync.stream()); }); gulp.task("copy-html", function () { return gulp.src(paths.pages).pipe(gulp.dest("dist")); }); /* * NB: removed pending "do we actually need it" check * 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")); }); // Build without watching gulp.task("build", gulp.series( gulp.parallel("copy-html", "sass-noninject"), browserifyBuild )); gulp.task("build-hs", gulp.parallel("copy-html", "sass")); // Zip dist/ - eg for building Docker images where node isn't installed gulp.task("zip", gulp.series("build", versionedZip)); // Static Server + compile ts + watch scss/html/css files gulp.task('serve', gulp.series("build-hs", watchedBundle, 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.watch("dist/*.js").on('change', browserSync.reload); watchedBrowserify.on("update", watchedBundle); watchedBrowserify.on("log", fancy_log); })); gulp.task('default', gulp.series('serve'));