Skip to content

Instantly share code, notes, and snippets.

@daz
Last active Nov 23, 2019
Embed
What would you like to do?
Gulpfile to minify single HTML, CSS, JS file, make it a C++ string, and inject it into a C++ file. Handy for Arduino/ESP projects
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
;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment