In a project I'm working on, I want to produce stand-alone .html files.
For convenience and modularity, I want to use separate JavaScript files during the development.
I'm looking for a 'build' solution that will allow me to produce the target .html files with the relevant JavaScript files included directly as embedded <script> tags (no src attribute).
For example:
input.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom" src="test.js"></script>
</body>
</html>
test.js:
alert("hello");
output.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom">
alert("hello");
</script>
</body>
</html>
Bonus: A solution that can easily adapt to multiple js dependencies (output.html should include all the js files concatenated inside a single script tag). This can possibly be done by introducing a main.js file that depends on all of the other .js files, then bundling it with some tool, then reference it from input.html. I'd like a streamlined solution for this entire flow.
-- Update --
After considering webpack (from here , as was suggested in the comments) and being unable to get rid of all of the wrapping code (the minimum wrapping was achieved by setting iife: false, but that still had some code remaining, which was unacceptable for my usecase), and trying out grunt from the same question, which stripped the id attribute from the <script> tag, I finally came across m4 which easily fit the bill (things seemed more complicated with sed and awk).
Using it was as simple as having:
input.html.preprocessed:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom">
changequote(, )
include(test.js)
</script>
</body>
</html>
Then running m4 input.html.preprocessed in the command line.
If one wanted to have the original html also functioning, I'm sure some sed magic, piped before the m4 command, would have done the trick, but for me that was not the case.
