Major gulp refactor: blueprint.defineTaskGroup()

Gulpfile.js

@@ -56,7 +56,6 @@ const projects = [
         id: "core",
         cwd: "packages/core/",
         dependencies: [],
-        copy: false,
         isotest: true,
         karma: true,
         sass: "compile",
@@ -65,7 +64,6 @@ const projects = [
         id: "datetime",
         cwd: "packages/datetime/",
         dependencies: ["core"],
-        copy: false,
         isotest: true,
         karma: true,
         sass: "compile",
@@ -111,7 +109,6 @@ const projects = [
         id: "table",
         cwd: "packages/table/",
         dependencies: ["core"],
-        copy: false,
         isotest: true,
         karma: true,
         sass: "compile",

gulp/copy.js

@@ -7,23 +7,20 @@ module.exports = (blueprint, gulp, plugins) => {
     var mergeStream = require("merge-stream");
     var path = require("path");
 
-    blueprint.task("copy", "files", [], (project) => {
-        // allow for no-op on project dependencies
-        if (project.copy === false) {
-            return;
-        }
-
-        // copy options is a map of file globs to array of dest directories.
-        // given: "copy": { "path/to/file.txt": {to: ["foo/bar"], base: "path"} }
-        // the file at currProject/path/to/file.txt is copied to currProject/build/foo/bar/to/file.txt
-        return mergeStream(Object.keys(project.copy).map((key) => {
-            var dests = project.copy[key].to;
-            var base = project.copy[key].base || "";
-            var stream = gulp.src(path.join(project.cwd, key), { base: path.join(project.cwd, base) });
-            dests.forEach((dest) => {
-                stream = stream.pipe(gulp.dest(blueprint.destPath(project, dest)));
-            });
-            return stream;
-        })).pipe(plugins.count(`${project.id}: <%= files %> copied`));
+    blueprint.taskGroup({ block: "copy" }, (project, taskName) => {
+        gulp.task(taskName, () => {
+            // copy options is a map of file globs to array of dest directories.
+            // given: "copy": { "path/to/file.txt": {to: ["foo/bar"], base: "path"} }
+            // the file at currProject/path/to/file.txt is copied to currProject/build/foo/bar/to/file.txt
+            return mergeStream(Object.keys(project.copy).map((key) => {
+                var dests = project.copy[key].to;
+                var base = project.copy[key].base || "";
+                var stream = gulp.src(path.join(project.cwd, key), { base: path.join(project.cwd, base) });
+                dests.forEach((dest) => {
+                    stream = stream.pipe(gulp.dest(blueprint.destPath(project, dest)));
+                });
+                return stream;
+            })).pipe(plugins.count(`${project.id}: <%= files %> copied`));
+        });
     });
 };

gulp/dist.js

@@ -10,39 +10,41 @@ module.exports = (blueprint, gulp) => {
     const webpack = require("webpack");
     const webpackConfig = require("./util/webpack-config");
 
-    blueprint.projectsWithBlock("typescript").forEach((project) => {
-        gulp.task(`bundle-${project.id}`, (done) => {
+    blueprint.taskGroup({
+        block: "typescript",
+        name: "bundle",
+    }, (project, taskName) => {
+        gulp.task(taskName, (done) => {
             webpack(
                 webpackConfig.generateWebpackBundleConfig(project),
                 webpackConfig.webpackDone(done)
             );
         });
     });
-    gulp.task("bundle", blueprint.taskMapper("typescript", "bundle"));
 
     // asserts that all main fields in package.json reference existing files
-    function testDist(project) {
-        const pkgJson = require(path.resolve(project.cwd, "package.json"));
-        const promises = ["main", "style", "typings"]
-            .filter((field) => pkgJson[field] !== undefined)
-            .map((field) => {
-                const filePath = path.resolve(project.cwd, pkgJson[field]);
-                return new Promise((resolve, reject) => {
-                    // non-existent file will callback with err; we don't care about actual contents
-                    fs.readFile(filePath, (err) => {
-                        if (err) {
-                            reject(`${pkgJson.name}: "${field}" not found (${pkgJson[field]})`);
-                        } else {
-                            resolve();
-                        }
+    blueprint.taskGroup({
+        block: "all",
+        name: "test-dist",
+    }, (project, taskName) => {
+        gulp.task(taskName, () => {
+            const pkgJson = require(path.resolve(project.cwd, "package.json"));
+            const promises = ["main", "style", "typings"]
+                .filter((field) => pkgJson[field] !== undefined)
+                .map((field) => {
+                    const filePath = path.resolve(project.cwd, pkgJson[field]);
+                    return new Promise((resolve, reject) => {
+                        // non-existent file will callback with err; we don't care about actual contents
+                        fs.readFile(filePath, (err) => {
+                            if (err) {
+                                reject(`${pkgJson.name}: "${field}" not found (${pkgJson[field]})`);
+                            } else {
+                                resolve();
+                            }
+                        });
                     });
                 });
-            });
-        return Promise.all(promises);
-    }
-
-    blueprint.projects.forEach((project) => {
-        gulp.task(`test-dist-${project.id}`, () => testDist(project));
+            return Promise.all(promises);
+        });
     });
-    gulp.task("test-dist", blueprint.taskMapper("id", "test", "dist"));
 };

gulp/hygiene.js

@@ -17,8 +17,8 @@ module.exports = (blueprint, gulp, plugins) => {
         return del(cleanDirs, { force: true });
     });
 
-    gulp.task("tslint", () => (
-        gulp.src(["*.js", "gulp/**/*.js", "packages/*/*.js"])
+    gulp.task("tslint-gulp", () => (
+        gulp.src(["*.js", "gulp/**/*.js"])
             .pipe(plugins.tslint({ formatter: "verbose" }))
             .pipe(plugins.tslint.report())
             .pipe(plugins.count("## javascript files linted"))

gulp/index.js

@@ -3,7 +3,9 @@
  */
 "use strict";
 
+const rs = require("run-sequence");
 const path = require("path");
+const util = require("util");
 const plugins = require("gulp-load-plugins")();
 
 /**
@@ -43,17 +45,32 @@ module.exports = (gulp, config) => {
         },
 
         /**
-         * Returns an array of task names of the format [prefix]-[...prefixes]-[project]
-         * for every project with the given block.
-         * @param block  {string} name of project config block
-         * @param prefix {string} first prefix, defaults to block name
-         * @param prefixes {string[]} additional prefixes before project name
-         * @returns {string[]}
+         * Define a group of tasks for projects with the given config block.
+         * The special block `"all"` will operate on all projects.
+         * The `block` is used as the task name, unless `name` is explicitly defined.
+         * The `taskFn` is called for each matched project with `(project, taskName, depTaskNames)`.
+         * The task name is of the format `[name]-[project.id]`.
+         * Finally, a "group task" is defined with the base name that runs all the project tasks.
+         * This group task can be configured to run in parallel or in sequence.
+         * @param {{block: string, name?: string, parallel?: boolean}} options
+         * @param {Function} taskFn called for each project containing block with `(project, taskName, depTaskNames)`
          */
-        taskMapper(block, prefix = block, ...prefixes) {
-            return blueprint
-                .projectsWithBlock(block)
-                .map(({ id }) => [prefix, ...prefixes, id].join("-"));
+        taskGroup(options, taskFn) {
+            const { block, name = block, parallel = true } = options;
+
+            const projects = (block === "all") ? blueprint.projects : blueprint.projectsWithBlock(block);
+
+            const taskNames = projects.map((project) => {
+                const { dependencies = [], id } = project;
+                // string name is combined with block; array name ignores/overrides block
+                const taskName = [name, id].join("-");
+                const depNames = dependencies.map((dep) => [name, dep].join("-"));
+                taskFn(project, taskName, depNames);
+                return taskName;
+            });
+
+            // can run tasks in series when it's preferable to keep output separate
+            gulp.task(name, parallel ? taskNames : (done) => rs(...taskNames, done));
         },
     }, config);
 

gulp/isotest.js

@@ -4,10 +4,13 @@
 "use strict";
 
 module.exports = (blueprint, gulp, plugins) => {
-    const path = require("path");
-
-    blueprint.task("isotest", "mocha", ["typescript-compile-*"], (project) => {
-        return gulp.src(path.join(project.cwd, "test", "isotest.js"))
-            .pipe(plugins.mocha());
+    blueprint.taskGroup({
+        block: "isotest",
+        parallel: false,
+    }, (project, taskName) => {
+        gulp.task(taskName, [`typescript-compile-${project.id}`], () => {
+            return gulp.src(project.cwd + "test.iso/**/*")
+                .pipe(plugins.mocha());
+        });
     });
 };

gulp/karma.js

@@ -4,12 +4,14 @@
 "use strict";
 
 module.exports = (blueprint, gulp, plugins) => {
-    const rs = require("run-sequence").use(gulp);
     const karma = require("karma");
     const createConfig = require("./util/karma-config");
 
-    blueprint.projectsWithBlock("karma").forEach((project) => {
-        gulp.task(`karma-${project.id}`, (done) => {
+    blueprint.taskGroup({
+        block: "karma",
+        parallel: false,
+    }, (project, taskName) => {
+        gulp.task(taskName, (done) => {
             const server = new karma.Server(createConfig(project), done);
             return server.start();
         });
@@ -32,8 +34,4 @@ module.exports = (blueprint, gulp, plugins) => {
             return server.start();
         });
     });
-
-    // running in sequence so output is human-friendly
-    // (in parallel, all suites get interspersed and it's a mess)
-    gulp.task("karma", (done) => rs(...blueprint.taskMapper("karma"), done));
 };

gulp/sass.js

@@ -33,19 +33,31 @@ module.exports = (blueprint, gulp, plugins) => {
         ],
     };
 
-    blueprint.task("sass", "lint", [], (project, isDevMode) => (
-        gulp.src(config.srcGlob(project))
-            .pipe(plugins.stylelint({
-                failAfterError: !isDevMode,
-                reporters: [
-                    { formatter: "string", console: true },
-                ],
-                syntax: "scss",
-            }))
-            .pipe(plugins.count(`${project.id}: ## stylesheets linted`))
-    ));
+    blueprint.taskGroup({
+        block: "sass",
+        name: "stylelint",
+    }, (project, taskName) => {
+        gulp.task(taskName, () => (
+            gulp.src(config.srcGlob(project))
+                .pipe(plugins.stylelint({
+                    failAfterError: true,
+                    reporters: [
+                        { formatter: "string", console: true },
+                    ],
+                    syntax: "scss",
+                }))
+                .pipe(plugins.count(`${project.id}: ## stylesheets linted`))
+        ));
+    });
+
+    blueprint.taskGroup({
+        block: "sass",
+    }, (project, taskName, depTaskNames) => {
+        gulp.task(taskName, ["icons", "sass-variables", ...depTaskNames], () => sassCompile(project, false));
+        gulp.task(`${taskName}:only`, () => sassCompile(project, true));
+    });
 
-    blueprint.task("sass", "compile", ["icons", "sass-variables"], (project, isDevMode) => {
+    function sassCompile(project, isDevMode) {
         const sassCompiler = plugins.sass({
             importer: packageImporter({ cwd: project.cwd }),
         });
@@ -87,7 +99,7 @@ module.exports = (blueprint, gulp, plugins) => {
             .pipe(gulp.dest(blueprint.destPath(project)))
             // only bundled packages will reload the dev site
             .pipe(project.sass === "bundle" ? plugins.connect.reload() : plugins.util.noop());
-    });
+    }
 
     // concatenate all sass variables files together into one single exported list of variables
     gulp.task("sass-variables", ["icons"], () => {
@@ -115,6 +127,4 @@ module.exports = (blueprint, gulp, plugins) => {
             .pipe(plugins.insert.append(".unit-test { width: @pt-grid-size * 2; }"))
             .pipe(plugins.less());
     });
-
-    gulp.task("sass", ["sass-lint", "sass-compile"]);
 };

gulp/typescript.js

@@ -21,19 +21,28 @@ module.exports = (blueprint, gulp, plugins) => {
         project.typescriptProject = createTypescriptProject(tsconfig);
     });
 
-    const lintTask = (project, isDevMode) => (
-        gulp.src(path.join(project.cwd, "!(dist|node_modules|typings)", "**", "*.ts{,x}"))
-            .pipe(plugins.tslint({ formatter: "verbose" }))
-            .pipe(plugins.tslint.report({ emitError: !isDevMode }))
-            .pipe(plugins.count(`${project.id}: ## typescript files linted`))
-    );
-    // Lint all source files using TSLint
-    blueprint.task("typescript", "lint", [], lintTask);
-    gulp.task("typescript-lint-docs", () => lintTask(blueprint.findProject("docs"), false));
-    gulp.task("typescript-lint-w-docs", () => lintTask(blueprint.findProject("docs"), true));
+    blueprint.taskGroup({
+        block: "all",
+        name: "tslint",
+    }, (project, taskName) => {
+        gulp.task(taskName, () => (
+            gulp.src(path.join(project.cwd, "!(dist|node_modules|typings)", "**", "*.{js,jsx,ts,tsx}"))
+                .pipe(plugins.tslint({ formatter: "verbose" }))
+                .pipe(plugins.tslint.report({ emitError: true }))
+                .pipe(plugins.count(`${project.id}: ## files tslinted`))
+        ));
+    });
+
+    blueprint.taskGroup({
+        block: "typescript",
+        name: "tsc",
+    }, (project, taskName, depTaskNames) => {
+        gulp.task(taskName, ["icons", ...depTaskNames], () => typescriptCompile(project, false));
+        gulp.task(`${taskName}:only`, () => typescriptCompile(project, true));
+    });
 
     // Compile a TypeScript project using gulp-typescript to individual .js files
-    blueprint.task("typescript", "compile", ["icons"], (project, isDevMode) => {
+    function typescriptCompile(project, isDevMode) {
         const tsProject = project.typescriptProject;
 
         const tsResult = tsProject.src()
@@ -52,5 +61,5 @@ module.exports = (blueprint, gulp, plugins) => {
             tsResult.js.pipe(plugins.sourcemaps.write(".", { sourceRoot: null })),
             tsResult.dts,
         ]).pipe(gulp.dest(blueprint.destPath(project)));
-    });
+    }
 };

gulp/webpack.js

@@ -8,14 +8,13 @@ module.exports = (blueprint, gulp) => {
     const webpackConfig = require("./util/webpack-config");
 
     const docsProject = blueprint.findProject("docs");
-
     const configuration = webpackConfig.generateWebpackTypescriptConfig(docsProject);
 
-    gulp.task("webpack-compile-docs", ["docs"], (callback) => {
+    gulp.task("webpack-docs", ["docs"], (callback) => {
         webpack(configuration, webpackConfig.webpackDone(callback));
     });
 
-    gulp.task("webpack-compile-w-docs", (callback) => { // eslint-disable-line no-unused-vars
+    gulp.task("webpack-docs-watch", (callback) => {
         // rely on editor for compiler errors during development--this results in _massive_ speed increase
         configuration.ts.transpileOnly = true;
         // never invoke callback so it runs forever!