build(gulp): improve dev workflow pipeline with gulp

.eleventy.js

@@ -164,59 +164,6 @@ module.exports = function (eleventyConfig) {
 
   // Rebuild when a change is made to a component template file
   eleventyConfig.addWatchTarget("src/moj/components/**/*.njk");
-  // Rebuild when gulp has processed component js to the package dir
-  eleventyConfig.addWatchTarget("package/moj/all.js");
-
-   // Allow 11ty to watch and compile the docs site SCSS
-  eleventyConfig.addTemplateFormats("scss");
-  eleventyConfig.addExtension("scss", {
-    outputFileExtension: "css",
-    compile: async function (inputContent, inputPath) {
-      // Skip files like _fileName.scss
-      let parsed = path.parse(inputPath);
-      if (parsed.name.startsWith("_")) {
-        return;
-      }
-
-      // Run file content through Sass
-      let result = sass.compileString(inputContent, {
-        loadPaths: [parsed.dir, ".", "../", "../../", "../../../", "node_modules"],
-        sourceMap: false, // or true, your choice!
-      });
-
-      // Allow included files from @use or @import to
-      // trigger rebuilds when using --incremental
-      this.addDependencies(inputPath, result.loadedUrls);
-
-      return async () => {
-        return result.css;
-      };
-    },
-  });
-
-  // Allow 11ty to watch and parse the docs site JS
-  eleventyConfig.addTemplateFormats('js');
-  eleventyConfig.addExtension('js', {
-    outputFileExtension: 'js',
-    compile: async (content, path) => {
-      // Only process the all.js file, the others are imported
-      if (!path.includes('all')) {
-        return;
-      }
-
-      return async () => {
-        let output = await esbuild.build({
-          target: 'es6',
-          entryPoints: [path],
-          minify: true,
-          bundle: true,
-          write: false,
-        });
-
-        return output.outputFiles[0].text;
-      }
-    }
-  });
 
   // Copy the docs images to the public assets dir
   eleventyConfig.addPassthroughCopy( { "docs/assets/images/": "assets/images/"});
@@ -229,9 +176,14 @@ module.exports = function (eleventyConfig) {
     liveReload: true,
     domDiff: false,
     port: 8080,
+    // Reload once assets have been rebuilt by gulp
+    watch: [
+      'public/assets/stylesheets/application.css',
+      'public/assets/javascript/all.js'
+    ],
     // Show local network IP addresses for device testing
     showAllHosts: true,
     // Show the dev server version number on the command line
     showVersion: true,
-	});
+  });
 };

gulp/docs.js

@@ -0,0 +1,63 @@
+const gulp = require("gulp");
+const sass = require("gulp-sass")(require("sass"));
+const {createGulpEsbuild} = require("gulp-esbuild")
+const esbuild = createGulpEsbuild({
+	incremental: true, // enables the esbuild"s incremental build
+	piping: true,      // enables piping
+})
+
+// Copy all the govuk-frontend assets across
+gulp.task(
+  "docs:copy-dependencies", () => {
+    return gulp.src([
+      "node_modules/govuk-frontend/dist/govuk/assets/**/*",
+      "src/moj/assets/**/*"
+    ])
+    .pipe(gulp.dest("public/assets"))
+  }
+);
+
+// Copy package vendor files across
+gulp.task(
+  "docs:copy-vendor", () => {
+    return gulp.src([
+      "src/moj/vendor/**/*.js"
+    ])
+    .pipe(gulp.dest("public/assets/javascript"))
+  }
+);
+
+// Ordering is important here! - Docs > Package > GovUK frontend
+gulp.task(
+  "docs:copy-files", gulp.series(
+    "docs:copy-dependencies",
+    "docs:copy-vendor",
+  )
+);
+
+// Compile the docs site stylesheet
+gulp.task(
+  "docs:styles", () => {
+    return gulp
+      .src("docs/assets/stylesheets/application.scss")
+      .pipe(sass())
+      .pipe(gulp.dest("public/assets/stylesheets"));
+  }
+);
+
+// Bundle the docs site javascript
+gulp.task(
+  "docs:scripts", () => {
+    return gulp
+      .src("docs/assets/javascript/all.js")
+      .pipe(esbuild({
+          outfile: "all.js",
+          target: "es6",
+          bundle: true,
+      }))
+      .pipe(gulp.dest("public/assets/javascript"))
+  }
+);
+
+
+

gulpfile.js

@@ -3,59 +3,69 @@ const requireDir = require("require-dir");
 
 requireDir("./gulp");
 
-const buildPackage = gulp.series(
+// Copy ./src directory and build scripts into ./package
+gulp.task(
+  "build:package", gulp.series(
     "build:clean",
     "build:copy-files",
     "build:javascript",
     "build:javascript-with-jquery",
     "build:compress-images",
-  );
+  )
+);
 
+// Build the dist bundle of the package
 gulp.task(
-  "build:package", buildPackage
+  "build:dist", gulp.series(
+    "dist:clean",
+    "dist:javascript",
+    "dist:css",
+    "dist:assets",
+    "dist:zip",
+  )
 );
 
+// Initial build of the docs site to ./public
 gulp.task(
-  "build:dist", gulp.series(
-                  "dist:clean",
-                  "dist:javascript",
-                  "dist:css",
-                  "dist:assets",
-                  "dist:zip"
-                )
+  "build:docs", gulp.series(
+    "docs:copy-files",
+    "build:package",
+    gulp.parallel("docs:styles", "docs:scripts"),
+  )
 );
 
+// Watch the docs site sass and all component sass files and recompile
 gulp.task(
-  "docs:copy-dependencies", () => {
-    return gulp.src([
-      'node_modules/govuk-frontend/dist/govuk/assets/**/*',
-      'src/moj/assets/**/*'
-    ])
-    .pipe(gulp.dest('public/assets'))
+  "watch:styles",  () => {
+    gulp.watch(
+      ["docs/assets/**.*.scss", "src/moj/components/**/*.scss"],
+      gulp.series(["docs:styles"]),
+    )
   }
-)
+);
 
+// Watch all the component js files and build the package
 gulp.task(
-  "docs:copy-vendor", () => {
-    return gulp.src([
-      'src/moj/vendor/**/*.js'
-    ])
-    .pipe(gulp.dest('public/assets/javascript'))
+  "watch:package-js", () => {
+    gulp.watch(
+      ["src/moj/components/**/*.js"],
+      gulp.series("build:javascript")
+    )
   }
-)
+);
 
+// Watch the docs js files and the bundled package js and rebuild
 gulp.task(
-  "build:docs", gulp.series(
-                  "docs:copy-dependencies",
-                  "docs:copy-vendor",
-                  buildPackage
-                )
-)
-
-gulp.task('watch:package', function() {
-  gulp.watch([
-    'src/moj/components/**/*.scss',
-    'src/moj/components/**/*.js'
-  ],
-  buildPackage);
-})
+  "watch:docs-js", () => {
+    gulp.watch(
+      ["docs/assets/**/*.js", "package/moj/all.js"],
+      gulp.series(["docs:scripts"]),
+    )
+  }
+);
+
+// Watch all the files in dev
+gulp.task(
+  "watch:dev",
+  gulp.parallel("watch:styles", "watch:package-js", "watch:docs-js"),
+);