I have an application that has 3 pages which I would like to be self-contained. In the interest of DRY code, I would like to do "includes" for the header and footer content. I have looked at the docs and examples for grunt-html-build and I'm somehow coming up short. All HTML is in the path 'src/html', with the includes being in a subfolder called "includes": 'src/html/includes'.
Here is the HTML sample:
<!doctype html>
<html>
<head>
<!-- build:section head --><!-- /build -->
</head>
<body>
<p>A bunch of unique content for each of the pages</p>
<!-- build:section footer --><!-- /build -->
</body>
</html>
And then in my gruntfile I have the following:
htmlbuild: {
src: 'src/html/app-*.html',
dest: 'dist/',
options: {
sections: {
head: 'src/html/includes/head.html',
footer: 'src/html/includes/footer.html'
}
}
}
I'm sure it's just syntax, but I can't seem to get past this error:
Warning: an error occurred while processing a template (Unexpected identifier).
The very fact that it's an "unexpected identifier" tells me I'm not dotting an "i" or crossing a "t" properly. More experienced eyes are appreciated!
Note: I have considered using grunt-contrib-concat instead, but without globbing I would have to make 3 separate tasks to keep the unique content intact.
[edit to add:]
I had success for my very basic use case using a different grunt task called (appropriately) grunt-includes. I was able to include my files appropriately.
However, I'm still interested in the power for grunt-html-build for conditionally building dev or distribution packages. Any insight is still appreciated!
htmlbuild is a multitask, so you need to define your files under a target:
module.exports = function(grunt) {
grunt.initConfig({
htmlbuild: {
dist: {
src: 'src/html/app-*.html',
dest: 'dist/',
options: {
sections: {
head: 'src/html/includes/head.html',
footer: 'src/html/includes/footer.html'
}
}
}
}
});
grunt.loadNpmTasks('grunt-html-build');
grunt.registerTask('default', ['htmlbuild']);
};