spectabular/gulpfile.js

/* jshint esversion: 6, node: true */
"use strict";

const browserify = require("browserify");
const chalk = require("chalk");
const del = require("del");
const gulp = require("gulp");
const gulpif = require("gulp-if");
const jshint = require("gulp-jshint");
const jshintStylish = require("jshint-stylish");
const log = require("fancy-log");
const plumber = require("gulp-plumber");
const replaceExt = require("replace-ext");
const sequence = require("run-sequence");
const sass = require("gulp-sass");
const source = require("vinyl-source-stream");
const sourcemaps = require("gulp-sourcemaps");
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/";

//Map the various directories to the gulp tasks
const WATCH_MAPPINGS = {
	[TS_SRC_DIR]: ["typescript-lint", "typescript"],
	[SASS_SRC_DIR]: ["sass"],
	[TWIG_SRC_DIR]: ["twig"],
};

let isProdBuild = yargs.argv.hasOwnProperty("prod");

gulp.task("build", (callback) => {
	sequence("gulpfile-lint", "typescript-lint", "typescript", "sass", "twig", callback);
});

gulp.task("clean", () => {
	return del([
		JS_OUT_DIR,
		CSS_OUT_DIR
	].map((folder) => {
		return path.join(folder, "*");
	}));
});

gulp.task("watch", () => {
	Object.keys(WATCH_MAPPINGS).forEach((dir) => {
		let globbedPath = path.join(dir, "*");
		let tasks = WATCH_MAPPINGS[dir];
		let watchTask = gulp.watch(globbedPath, tasks);
		watchTask.on("change", (file) => {
			let relativePath = path.relative(__dirname, file.path);
			log(`[${chalk.blue(tasks.join(", "))}] Change detected: ${chalk.green(relativePath)}`);
		});
	});
});

gulp.task("typescript", () => {
	let buildStreams = TS_ENTRYPOINTS.map((entrypoint) => {
		let entrypointPath = path.join(TS_SRC_DIR, entrypoint);
		let bundler = browserify(entrypointPath, {
			plugin: ["tsify"],
			debug: !isProdBuild
		});
		return plumber()
			.pipe(bundler.bundle())
			.pipe(source(replaceExt(entrypoint, ".js")))
			.pipe(gulp.dest(JS_OUT_DIR));
	});
});

gulp.task("sass", () => {
	return gulp.src(path.join(SASS_SRC_DIR, "*.scss"))
		.pipe(plumber())
		.pipe(sourcemaps.init())
		.pipe(sass().on("error", sass.logError))
		.pipe(gulpif(!isProdBuild, sourcemaps.write()))
		.pipe(gulp.dest(CSS_OUT_DIR));
});

gulp.task("twig", () => {
	return gulp.src(path.join(TWIG_SRC_DIR, "*.{html,html.twig}"))
		.pipe(gulp.dest(TWIG_OUT_DIR));
});

gulp.task("gulpfile-lint", () => {
	return gulp.src("gulpfile.js")
		.pipe(plumber())
		.pipe(jshint())
		.pipe(jshint.reporter(jshintStylish));
});

gulp.task("typescript-lint", () => {
	return gulp.src(path.join(TS_SRC_DIR, "*.ts"))
		.pipe(plumber())
		.pipe(tslint({
			formatter: "stylish"
		}))
		.pipe(tslint.report());
});