Skip to content

Build Process and HTML Template Files #4

@kalisjoshua

Description

@kalisjoshua

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"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions