daz/gulpfile.js

## gulpfile.js
const gulp = require("gulp");
const gutil = require("gulp-util");
const inject = require("gulp-inject");
const htmlMin = require("gulp-htmlmin");

const cssMinifyOptions = true;
const jsMinifyOptions = {
  mangle: {
    toplevel: true
  },
  output: {
    quote_style: 1
  }
};

const htmlMinifyOptions = {
  collapseWhitespace: true,
  quoteCharacter: "'",
  minifyCSS: cssMinifyOptions,
  minifyJS: jsMinifyOptions
};

const htmlStream = gulp.src("index.html").pipe(htmlMin(htmlMinifyOptions));

gulp.task("default", function() {
  return gulp
    .src("indexhtml.h")
    .pipe(
      inject(htmlStream, {
        starttag: "// inject:html",
        endtag: "// endinject",
        transform: function(filePath, file) {
          const ecscapedContents = file.contents
            .toString("utf8")
            .replace(/"/g, '\\"')
            .replace(/\n/g, "\\n");

          gutil.log(
            "Minified HTML length",
            gutil.colors.magenta(ecscapedContents.length)
          );

          // Split into 78 char lines, ensure lines don't tail with an odd number of backslashes
          let lines = [];
          const MAX_LINE_LENGTH = 78;
          while (lines.join().length < ecscapedContents.length - 2) {
            let line = ecscapedContents.slice(
              lines.join().length,
              lines.join().length + MAX_LINE_LENGTH - 1
            );
            const tailingBackslashes = line.match(/\\+$/);
            // check if trailing backslashes is an odd number
            if (tailingBackslashes && tailingBackslashes[0].length & 1) {
              line = line.slice(0, MAX_LINE_LENGTH - 2);
            }
            lines.push(line);
          }

          return (
            lines
              .map(function(line) {
                return '"' + line + '"';
              })
              .join("\n") +
            "\n// Length: " +
            ecscapedContents.length
          );
        }
      })
    )
    .pipe(gulp.dest("."));
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sign</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body,
      html {
        position: relative;
        background: #112;
      ul {
        text-align: center;
        margin: 0 10px;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </body>
  <script type="text/javascript">
    var baseUrl = "http://" + window.location.host;
    var enabled = true;
    function getCurrentEffect() {
      fetch("/currentEffect.json").then(function(response) {
        return response.json();
      });
    }
    setInterval(function() {
      getCurrentEffect();
    }, 6000);

    getCurrentEffect();
  </script>
</html>

## indexhtml.h
// This is src/index.html minified and injected by gulp

const char indexhtml[] PROGMEM =
// inject:html
"<!DOCTYPE html><html><head><title>Sign</title><meta name='viewport' content='"
"width=device-width,initial-scale=1'><style>body,html{position:relative;backgr"
"und:#112;margin:0 10px;padding:0}</style></head><body><ul><li></li><li></li><"
"ul></body><script type='text/javascript'>var n='http://'+window.location.host"
"t=!0;function o(){fetch('/currentEffect.json').then(function(n){return n.json"
")})}setInterval(function(){o()},6e3),o()</script></html>"
// Length: 445
// endinject
;
	const gulp = require("gulp");
	const gutil = require("gulp-util");
	const inject = require("gulp-inject");
	const htmlMin = require("gulp-htmlmin");

	const cssMinifyOptions = true;
	const jsMinifyOptions = {
	mangle: {
	toplevel: true
	},
	output: {
	quote_style: 1
	}
	};

	const htmlMinifyOptions = {
	collapseWhitespace: true,
	quoteCharacter: "'",
	minifyCSS: cssMinifyOptions,
	minifyJS: jsMinifyOptions
	};

	const htmlStream = gulp.src("index.html").pipe(htmlMin(htmlMinifyOptions));

	gulp.task("default", function() {
	return gulp
	.src("indexhtml.h")
	.pipe(
	inject(htmlStream, {
	starttag: "// inject:html",
	endtag: "// endinject",
	transform: function(filePath, file) {
	const ecscapedContents = file.contents
	.toString("utf8")
	.replace(/"/g, '\\"')
	.replace(/\n/g, "\\n");

	gutil.log(
	"Minified HTML length",
	gutil.colors.magenta(ecscapedContents.length)
	);

	// Split into 78 char lines, ensure lines don't tail with an odd number of backslashes
	let lines = [];
	const MAX_LINE_LENGTH = 78;
	while (lines.join().length < ecscapedContents.length - 2) {
	let line = ecscapedContents.slice(
	lines.join().length,
	lines.join().length + MAX_LINE_LENGTH - 1
	);
	const tailingBackslashes = line.match(/\\+$/);
	// check if trailing backslashes is an odd number
	if (tailingBackslashes && tailingBackslashes[0].length & 1) {
	line = line.slice(0, MAX_LINE_LENGTH - 2);
	}
	lines.push(line);
	}

	return (
	lines
	.map(function(line) {
	return '"' + line + '"';
	})
	.join("\n") +
	"\n// Length: " +
	ecscapedContents.length
	);
	}
	})
	)
	.pipe(gulp.dest("."));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sign</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style>
	body,
	html {
	position: relative;
	background: #112;
	ul {
	text-align: center;
	margin: 0 10px;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<ul>
	<li></li>
	<li></li>
	</ul>
	</body>
	<script type="text/javascript">
	var baseUrl = "http://" + window.location.host;
	var enabled = true;
	function getCurrentEffect() {
	fetch("/currentEffect.json").then(function(response) {
	return response.json();
	});
	}
	setInterval(function() {
	getCurrentEffect();
	}, 6000);

	getCurrentEffect();
	</script>
	</html>
	// This is src/index.html minified and injected by gulp

	const char indexhtml[] PROGMEM =
	// inject:html
	"<!DOCTYPE html><html><head><title>Sign</title><meta name='viewport' content='"
	"width=device-width,initial-scale=1'><style>body,html{position:relative;backgr"
	"und:#112;margin:0 10px;padding:0}</style></head><body><ul><li></li><li></li><"
	"ul></body><script type='text/javascript'>var n='http://'+window.location.host"
	"t=!0;function o(){fetch('/currentEffect.json').then(function(n){return n.json"
	")})}setInterval(function(){o()},6e3),o()</script></html>"
	// Length: 445
	// endinject
	;