Set up Browsersync with partial rebuild support

See: #2750 (comment)

Author: colinrotherham

lib/metalsmith-browser-sync.js

@@ -31,6 +31,9 @@ const titleChecker = require('./metalsmith-title-checker.js')
 const navigation = require('./navigation.js') // navigation plugin
 const rollup = require('./rollup') // used to build GOV.UK Frontend JavaScript
 
+// Flag production mode (to skip plugins in development)
+const isProduction = process.env.NODE_ENV !== 'development'
+
 // Nunjucks engine options
 const nunjucksOptions = {
   noCache: true, // never use a cache and recompile templates each time
@@ -66,14 +69,19 @@ const nunjucksOptions = {
 // static site generator
 module.exports = metalsmith(resolve(__dirname, '../'))
 
+  // notify build starting
+  .use((files, metalsmith) => metalsmith.watch() &&
+    console.log('Metalsmith build running')
+  )
+
   // source directory
   .source(paths.source)
 
   // destination directory
   .destination(paths.public)
 
-  // clean destination before build
-  .clean(true)
+  // clean destination for production builds
+  .clean(isProduction)
 
   // global variables used in layout files
   .metadata({
@@ -236,5 +244,10 @@ module.exports = metalsmith(resolve(__dirname, '../'))
     pattern: ['**/*.html', '!**/default/*.html']
   }))
 
+  // notify build starting
+  .use((files, metalsmith) => metalsmith.watch() &&
+    console.log('Metalsmith build complete')
+  )
+
 // Debug
 // .use(debug())

lib/metalsmith.js

@@ -1,22 +1,52 @@
 const { dirname, join } = require('path')
 
+const browserSync = require('browser-sync')
+const slash = require('slash')
+
 const { paths } = require('../config') // specify paths to main working directories
 const metalsmith = require('../lib/metalsmith') // configured static site generator
-const browsersync = require('../lib/metalsmith-browser-sync') // setup synchronised browser testing
-
-// setup synchronised browser testing
-metalsmith.use(browsersync({
-  ghostMode: false, // Ghost mode tries to check the same input across examples.
-  open: false, // When making changes to the server, we don't want multiple windows opening.
-  server: paths.public, // server directory
-  files: [
-    join(paths.source, '**/*'),
-    join(paths.views, '**/*'),
-    join(dirname(require.resolve('govuk-frontend/package.json')), '**/*')
-  ] // files to watch
-}))
-
-// build to destination directory
-metalsmith.build(function (err, files) {
-  if (err) { throw err }
-})
+
+let bs
+
+metalsmith
+
+  // Configure sources to watch for rebuilds
+  .watch([
+    slash(paths.source),
+    slash(paths.views),
+    slash(dirname(require.resolve('govuk-frontend/package.json')))
+  ])
+
+  // Build to destination directory
+  .build((err, files) => {
+    if (err) {
+      throw err
+    }
+
+    if (metalsmith.watch()) {
+      if (bs) {
+        return
+      }
+
+      // Setup synchronised browser testing
+      bs = browserSync.create()
+
+      bs.init({
+        // Configure output to watch for reloads
+        files: [
+          join(paths.public, '**/*.html'),
+          join(paths.public, 'javascripts/**/*.js'),
+          join(paths.public, 'stylesheets/**/*.css')
+        ],
+
+        // Prevent browser mirroring
+        ghostMode: false,
+
+        // Prevent browser opening
+        open: false,
+
+        // Serve files from directory
+        server: paths.public
+      })
+    }
+  })