Tools: Setup BrowserSync to reload page when files change.

See WordPress/wporg-repo-tools#10

bs-config.js

@@ -0,0 +1,36 @@
+// See http://www.browsersync.io/docs/options/
+
+const paths = {
+	theme: 'source/wp-content/themes/wporg-news-2021',
+	globalHeaderFooter: 'source/wp-content/mu-plugins/wporg-mu-plugins/mu-plugins/blocks/global-header-footer'
+};
+
+// Any file of these types in any subdirectory
+const watchedFilesPattern = '/**/*.(php|js|html|css|svg|png)';
+
+module.exports = {
+	/*
+	 * This is disabled so that BrowserSync can run on any URL, which is needed to support multiple development
+	 * environments.
+	 */
+	 'snippet': false,
+
+	// Avoid conflicts with other running tasks.
+	// Can't be auto-detected because has to match injected port in `0-sandbox.php`.
+	'port': 3008,
+
+	"files": [
+		paths.theme + '/theme.json',
+		paths.theme + watchedFilesPattern,
+		paths.globalHeaderFooter + watchedFilesPattern
+	],
+
+	"ignore": [
+		paths.theme + '/sass/**/*.*',
+		paths.globalHeaderFooter + '/postcss/**/*.*'
+	],
+
+	"open": false,
+	"reloadOnRestart": true,
+	"notify": false,
+};

env/0-sandbox.php

@@ -9,3 +9,18 @@
 defined( 'WPINC' ) || die();
 
 require_once WPMU_PLUGIN_DIR . '/wporg-mu-plugins/mu-plugins/blocks/global-header-footer/blocks.php';
+
+/*
+ * Inject BrowserSync's watcher script, to inject changed files or reload the page.
+ */
+add_action( 'wp_print_footer_scripts', function() {
+	?>
+
+	<script id="__bs_script__">//<![CDATA[
+		// Port must match the one in `bs-config.js`.
+		document.write( `<script async src=\'http://${location.hostname}:3008/browser-sync/browser-sync-client.js?v=2.27.5\'><\/script>` );
+		//]]>
+	</script>
+
+	<?php
+}, 99 ); // Add as late as possible, since BrowserSync expects to be right before `</body>`.