gulp-require-html-inline

Gulp plugin which inline html templates referenced using require("path-to-file.html") notation.

Internally uses html-minifier-terser to convert html files to strings.

Usage example

npm install --save-dev gulp-require-html-inline

html-minifier-terser is a peer dependency, so make sure to install it if it's not already in your package.json:

npm install --save-dev html-minifier-terser@5

//gulpfile.js:
const gulp = require("gulp");
const htmlInline = require("gulp-require-html-inline");

gulp.task("default", function () {
	return gulp.src("./file.js")
		.pipe(htmlInline())
		.pipe(gulp.dest("result"));
});

Assuming next files are in the working folder:

//file.js
var a = require("./test.html");

<!--test.html-->
<div>
	Some " text ' with ` special characters
</div>

Output will be a single file:

//result/file.js
var a = `<div>Some " text ' with \` special characters</div>`;

For more examples see demo folder and execute npm run demo locally.

Configuration

htmlInline function accepts optional minifier options object.

If not provided, default configuration includes collapseWhitespace: true which ensures that produced html is a single line (otherwise it can break commented out requires).

Implementation notes

• Require statements are detected using simple regex and no semantic code parsing is done. All kind of quotation marks are supports and both .html and .htm extensions are accepted. Some examples:
  • require("a.html")
  • require('a.html')
  • require(`a.html`)
  • require("a.htm")
• Unresolved files will be skipped, logged and require will be untouched.
• Multiline html files might break commented out require statements if custom minifier options are used. See Configuration section