Last active
February 7, 2022 22:52
-
-
Save daz/6cd5ce488c59bef854f01dec4b297d8c to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(".")); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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