Pre-processing HTML files
I am evaluating the branch build system for my needs. I need to do some simple HTML preprocessing. So basically I need to create multiple files with shared headers and footers:
file1.html:
<html>
<head>
<title>Title1</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page1
<div id="footer">...</div>
</div>
</body>
</html>
file2.html:
<html>
<head>
<title>Title2</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page2
<div id="footer">...</div>
</div>
</body>
</html>
So either simple functionality or (preferred) some kind of extension functionality. Ideally, the syntax should be hidden in the comments, so my IDE won't complain about non-HTML characters. I liked the preprocess javascript library, but it's not necessary of course.
Unfortunately, I didn't find anything suitable for this task on the brunch. There are many HTML templating engines supported there, but they seem to generate JS functionality. I want simple static HTML, not JavaScript SPA.
source to share
I'm not sure if there is any built-in solution for this, but if I had to go towards HTML templates / particles, I would look into the " after-brunch " and " before-brunch " plugins on NPM.
I don't know what your programming language of choice is for FileSystem manipulation (read, merge, write, etc.), but in theory you could use something like "till tomorrow" to execute the / shellscript / package or somekind command build your partial parts of HTML together in file1.html , file2.html , ... before Brunch compiles and copies it to public / .
In case you are familiar with Haxe, here is the Gist I shared with a while ago. It is a post-process script for merging other files into specific lines of documents.
https://gist.github.com/bigp/90e38deeccc94145b033
An HTML document might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="icon" href="data:;base64,=">
<style id="css" type="text/css" rel="stylesheet">
/* @MacroMerge: public/app.css */ //<--- Merges All CSS here..
</style>
</head>
<body>
<script type="text/javascript">
/* @MacroMerge: public/vendor.js, public/app.js */ //<--- And all JS here..
</script>
</body>
</html>
EDIT:
Almost forgot, this is how the brunch-config.coffee
script would use the Haxe script with the plugin after
:
plugins:
afterBrunch: [
"haxe -cp . --macro MacroMerge.html('app/index.template.html','public/index.html')"
]
Think about it ... there is nothing stopping you from taking this example and specifying partial parts of HTML (or any file extension really, ex: * .txt, * .xml) wherever you need them. Again, this may only be useful to you if you are familiar with Haxe. If not, it's free and free to download ( http://haxe.org/download/ ).
source to share