Add watch task to gulpfile

gulpfile.js

@@ -7,6 +7,7 @@ const gulp = require("gulp");
 const gulpif = require("gulp-if");
 const jshint = require("gulp-jshint");
 const jshintStylish = require("jshint-stylish");
+const plumber = require("gulp-plumber");
 const replaceExt = require("replace-ext");
 const sequence = require("run-sequence");
 const sass = require("gulp-sass");
@@ -25,6 +26,13 @@ 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",
+	[SASS_SRC_DIR]: "sass",
+	[TWIG_SRC_DIR]: "twig"
+};
+
 let isProdBuild = yargs.argv.hasOwnProperty("prod");
 
 gulp.task("build", (callback) => {
@@ -40,6 +48,18 @@ gulp.task("clean", () => {
 	}));
 });
 
+gulp.task("watch", () => {
+	Object.keys(WATCH_MAPPINGS).forEach((dir) => {
+		let globbedPath = path.join(dir, "*");
+		let taskName = WATCH_MAPPINGS[dir];
+		let watchTask = gulp.watch(globbedPath, [taskName]);
+		watchTask.on("change", (file) => {
+			let relativePath = path.relative(__dirname, file.path);
+			console.log(`[${taskName}] Change detected: ${relativePath}.`);
+		});
+	});
+});
+
 gulp.task("typescript", () => {
 	let buildStreams = TS_ENTRYPOINTS.map((entrypoint) => {
 		let entrypointPath = path.join(TS_SRC_DIR, entrypoint);
@@ -47,7 +67,8 @@ gulp.task("typescript", () => {
 			plugin: ["tsify"],
 			debug: !isProdBuild
 		});
-		return bundler.bundle()
+		return plumber()
+			.pipe(bundler.bundle())
 			.pipe(source(replaceExt(entrypoint, ".js")))
 			.pipe(gulp.dest(JS_OUT_DIR));
 	});
@@ -55,6 +76,7 @@ gulp.task("typescript", () => {
 
 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()))
@@ -68,12 +90,14 @@ gulp.task("twig", () => {
 
 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"
 		}))

package-lock.json

@@ -2547,6 +2547,18 @@
         "minimatch": "3.0.4"
       }
     },
+    "gulp-plumber": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gulp-plumber/-/gulp-plumber-1.2.0.tgz",
+      "integrity": "sha512-L/LJftsbKoHbVj6dN5pvMsyJn9jYI0wT0nMg3G6VZhDac4NesezecYTi8/48rHi+yEic3sUpw6jlSc7qNWh32A==",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3",
+        "fancy-log": "1.3.2",
+        "plugin-error": "0.1.2",
+        "through2": "2.0.3"
+      }
+    },
     "gulp-sass": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "gulp": "^3.9.1",
     "gulp-if": "^2.0.2",
     "gulp-jshint": "^2.1.0",
+    "gulp-plumber": "^1.2.0",
     "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-tslint": "^8.1.3",