/* jshint esversion: 6, node: true */ "use strict"; const browserify = require("browserify"); const chalk = require("chalk"); const del = require("del"); const eslint = require("gulp-eslint"); const gulp = require("gulp"); const gulpif = require("gulp-if"); const log = require("fancy-log"); const plumber = require("gulp-plumber"); const replaceExt = require("replace-ext"); const sass = require("gulp-sass"); const source = require("vinyl-source-stream"); const sourcemaps = require("gulp-sourcemaps"); const streamToPromise = require("stream-to-promise"); const tsify = require("tsify"); const tslint = require("gulp-tslint"); const path = require("path"); const yargs = require("yargs"); const TS_SRC_DIR = "src/ts/"; const TS_ENTRYPOINTS = ["browser-action.ts"]; const JS_OUT_DIR = "spectabular/js/"; const SASS_SRC_DIR = "src/scss/"; const CSS_OUT_DIR = "spectabular/css/"; const TWIG_SRC_DIR = "src/twig/"; const TWIG_OUT_DIR = "spectabular/twig/"; const FONT_AWESOME_BASE_DIR = "node_modules/@fortawesome/fontawesome-free/"; const FONT_AWESOME_OUT_DIR = "spectabular/webfonts"; //Map the various directories to the gulp tasks const WATCH_MAPPINGS = { [TS_SRC_DIR]: ["typescript"], [SASS_SRC_DIR]: ["sass"], [TWIG_SRC_DIR]: ["twig"], }; let isProdBuild = yargs.argv.hasOwnProperty("prod"); function buildAll(done) { return gulp.series( "lint-gulpfile", gulp.parallel( "typescript", "sass", "twig", "fontawesome" ) )(done); } function clean() { return del([ JS_OUT_DIR, CSS_OUT_DIR, TWIG_OUT_DIR, FONT_AWESOME_OUT_DIR ].map((folder) => { return path.join(folder, "*"); })); } function watch(done) { Object.keys(WATCH_MAPPINGS).forEach((dir) => { let globbedPath = path.join(dir, "*"); let tasks = WATCH_MAPPINGS[dir]; let watchTask = gulp.watch(globbedPath, () => sequence(...tasks)); watchTask.on("change", (file) => { let relativePath = path.relative(__dirname, file.path); log(`[${chalk.blue(tasks.join(", "))}] Change detected: ${chalk.green(relativePath)}`); }); }); done(); }; function lintGulpfile() { return gulp.src("gulpfile.js") .pipe(plumber()) .pipe(eslint()) .pipe(eslint.format("stylish")) .pipe(eslint.failAfterError()); } function lintTypescript() { return gulp.src(path.join(TS_SRC_DIR, "*.ts")) .pipe(plumber()) .pipe(tslint({ formatter: "stylish" })) .pipe(tslint.report()); } function compileTypescript(done) { let promises = TS_ENTRYPOINTS.map(async (entrypoint) => { let entrypointPath = path.join(TS_SRC_DIR, entrypoint); let bundler = browserify(entrypointPath, {debug: !isProdBuild}) .plugin("tsify", {target: "ES2017"}); let stream = plumber() .pipe(bundler.bundle()) .pipe(source(replaceExt(entrypoint, ".js"))) .pipe(gulp.dest(JS_OUT_DIR)); return streamToPromise(stream); }); Promise.all(promises).then(() => { done(); }); } function compileSass() { return gulp.src(path.join(SASS_SRC_DIR, "*.scss")) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ includePaths: ["node_modules/"] }).on("error", sass.logError)) .pipe(gulpif(!isProdBuild, sourcemaps.write())) .pipe(gulp.dest(CSS_OUT_DIR)); } function copyTwig() { return gulp.src(path.join(TWIG_SRC_DIR, "*.{html,html.twig}")) .pipe(gulp.dest(TWIG_OUT_DIR)); } function copyFontawesome() { return gulp.src([ path.join(FONT_AWESOME_BASE_DIR, "webfonts/*"), path.join(FONT_AWESOME_BASE_DIR, "LICENSE.txt") ]) .pipe(gulp.dest(FONT_AWESOME_OUT_DIR)); } gulp.task("typescript", gulp.series(lintTypescript, compileTypescript)); gulp.task("sass", compileSass); gulp.task("twig", copyTwig); gulp.task("fontawesome", copyFontawesome); gulp.task("lint-gulpfile", lintGulpfile); gulp.task(watch); gulp.task("default", buildAll); gulp.task(clean);