spectabular/gulpfile.js

/* 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);