Backstop is working locally

gulpfile.js

@@ -5,8 +5,8 @@ const rollupPluginNodeResolve = require('@rollup/plugin-node-resolve');
 const source = require('vinyl-source-stream');
 const buffer = require('vinyl-buffer');
 const gulpMerge = require('gulp-merge');
-const uswds = require("@uswds/compile");
-
+const uswds = require('@uswds/compile');
+const { exec } = require('child_process'); // Import exec for BackstopJS
 const plugins = {};
 plugins.addSrc = require('gulp-add-src');
 plugins.babel = require('gulp-babel');
@@ -21,7 +21,7 @@ const paths = {
   dist: 'app/static/',
   npm: 'node_modules/',
   toolkit: 'node_modules/govuk_frontend_toolkit/',
-  govuk_frontend: 'node_modules/govuk-frontend/'
+  govuk_frontend: 'node_modules/govuk-frontend/',
 };
 
 const javascripts = () => {
@@ -29,28 +29,30 @@ const javascripts = () => {
     input: paths.src + 'javascripts/modules/all.mjs',
     plugins: [
       rollupPluginNodeResolve({
-        mainFields: ['module', 'main']
+        mainFields: ['module', 'main'],
       }),
       rollupPluginCommonjs({
-        include: 'node_modules/**'
-      })
+        include: 'node_modules/**',
+      }),
     ],
     output: {
       format: 'iife',
-      name: 'GOVUK'
-    }
+      name: 'GOVUK',
+    },
   })
     .pipe(source('all.mjs'))
     .pipe(buffer())
-    .pipe(plugins.addSrc.prepend([
-      paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
-      paths.npm + 'jquery/dist/jquery.min.js',
-      paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-      paths.npm + 'timeago/jquery.timeago.js',
-      paths.npm + 'textarea-caret/index.js',
-      paths.npm + 'cbor-js/cbor.js',
-      paths.npm + 'd3/dist/d3.min.js'
-    ]));
+    .pipe(
+      plugins.addSrc.prepend([
+        paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
+        paths.npm + 'jquery/dist/jquery.min.js',
+        paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
+        paths.npm + 'timeago/jquery.timeago.js',
+        paths.npm + 'textarea-caret/index.js',
+        paths.npm + 'cbor-js/cbor.js',
+        paths.npm + 'd3/dist/d3.min.js',
+      ])
+    );
 
   const local = src([
     paths.toolkit + 'javascripts/govuk/modules.js',
@@ -81,9 +83,11 @@ const javascripts = () => {
     paths.src + 'javascripts/activityChart.js',
   ])
     .pipe(plugins.prettyerror())
-    .pipe(plugins.babel({
-      presets: ['@babel/preset-env']
-    }));
+    .pipe(
+      plugins.babel({
+        presets: ['@babel/preset-env'],
+      })
+    );
 
   return gulpMerge(vendored, local)
     .pipe(plugins.uglify())
@@ -93,24 +97,21 @@ const javascripts = () => {
 
 // Task to copy `gtm_head.js`
 const copyGtmHead = () => {
-  return src(paths.src + 'js/gtm_head.js')
-    .pipe(dest(paths.dist + 'js/'));
+  return src(paths.src + 'js/gtm_head.js').pipe(dest(paths.dist + 'js/'));
 };
 
 // Task to copy `setTimezone.js`
 const copySetTimezone = () => {
-  return src(paths.src + 'js/setTimezone.js')
-    .pipe(dest(paths.dist + 'js/'));
+  return src(paths.src + 'js/setTimezone.js').pipe(dest(paths.dist + 'js/'));
 };
 
-
 // Task to copy images
 const copyImages = () => {
-  return src(paths.src + 'images/**/*', { encoding: false })
-    .pipe(dest(paths.dist + 'images/'));
+  return src(paths.src + 'images/**/*', { encoding: false }).pipe(
+    dest(paths.dist + 'images/')
+  );
 };
 
-
 // Configure USWDS paths
 uswds.settings.version = 3;
 uswds.paths.dist.css = paths.dist + 'css';
@@ -129,4 +130,40 @@ const copyAssets = async () => {
   await uswds.copyAssets();
 };
 
-exports.default = series(styles, javascripts, copyGtmHead, copySetTimezone, copyImages, copyAssets);
+// Optional backstopJS task
+// Install gulp globally and run `gulp backstopTest`
+const backstopTest = (done) => {
+  exec(
+    'npx backstop test --configPath=backstop.config.js',
+    (err, stdout, stderr) => {
+      console.log(stdout);
+      console.error(stderr);
+      done(err);
+    }
+  );
+};
+
+// Optional backstopJS reference task
+// Install gulp globally and run `gulp backstopReference`
+const backstopReference = (done) => {
+  exec(
+    'npx backstop reference --configPath=backstop.config.js',
+    (err, stdout, stderr) => {
+      console.log(stdout);
+      console.error(stderr);
+      done(err);
+    }
+  );
+};
+
+// Export tasks
+exports.default = series(
+  styles,
+  javascripts,
+  copyGtmHead,
+  copySetTimezone,
+  copyImages,
+  copyAssets
+);
+exports.backstopTest = backstopTest;
+exports.backstopReference = backstopReference;