Not sure how much you care about this but I don't like having my html broken up across multiple files with respect to the root html template. So if you are interested here is what I put together to solve for that.
<!-- template.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
// __TEMPLATE__js
</script>
<style>
/* __APP__css */
</style>
</head>
<body>
<div id="app"></div>
<!-- __APP__html -->
<script>
// __APP__js
</script>
</body>
</html>... with a build script that insert content where it should.
#! /bin/bash
# usage example
# $ . ./template/build ./app ./index.html
if [ -z "$1" ]; then
echo "No source directory supplied."
exit 1
fi
if [ -z "$2" ]; then
echo "No output file supplied."
exit 1
fi
TEMPLATE=./template
cat $TEMPLATE/template.html |
awk '/^ *\/\/ *__TEMPLATE__js/{system("cat '$TEMPLATE'/Template.js");next}1' |
awk '/\/\* *__APP__css *\*\//{system("cat '$1'/**/*.css '$1'/*.css");next}1' 2> /dev/null |
awk '/<!-- __APP__html -->/{system("cat '$1'/**/*.html '$1'/*.html");next}1' 2> /dev/null |
awk '/^ *\/\/ *__APP__js/{system("cat '$1'/**/*.js '$1'/*.js");next}1' > $2
echo "Build complete. $2"
Not sure how much you care about this but I don't like having my html broken up across multiple files with respect to the root html template. So if you are interested here is what I put together to solve for that.
... with a build script that insert content where it should.