127 lines
3.5 KiB
JavaScript
127 lines
3.5 KiB
JavaScript
/* 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 sequence = require("run-sequence");
|
|
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-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", "fontawesome", "sass", "twig", callback);
|
|
});
|
|
|
|
gulp.task("clean", () => {
|
|
return del([
|
|
JS_OUT_DIR,
|
|
CSS_OUT_DIR,
|
|
TWIG_OUT_DIR,
|
|
FONT_AWESOME_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, () => sequence(...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", (callback) => {
|
|
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(() => {
|
|
callback();
|
|
});
|
|
});
|
|
|
|
gulp.task("sass", () => {
|
|
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));
|
|
});
|
|
|
|
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(eslint())
|
|
.pipe(eslint.format("stylish"))
|
|
.pipe(eslint.failAfterError());
|
|
});
|
|
|
|
gulp.task("typescript-lint", () => {
|
|
return gulp.src(path.join(TS_SRC_DIR, "*.ts"))
|
|
.pipe(plumber())
|
|
.pipe(tslint({
|
|
formatter: "stylish"
|
|
}))
|
|
.pipe(tslint.report());
|
|
});
|
|
|
|
gulp.task("fontawesome", () => {
|
|
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));
|
|
});
|