0

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 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 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 for conditionally building dev or distribution packages. Any insight is still appreciated!

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72

1 Answers1

1

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']);
};
Xavier Priour
  • 2,121
  • 1
  • 12
  • 16
  • Thanks for taking the time to reply! I got the code directly from their documentation. Here's the main sample I sourced: https://github.com/spatools/grunt-html-build/blob/master/docs/sections.md which shows that it doesn't HAVE to have a target. Be that as it may, I gave it a go and it returned this error: `Cannot read property 'dest' of undefined`. I am surprised I can't find more articles or samples for "basic include" functionality! – Greg Pettit Jul 04 '15 at 02:50
  • Hi, I updated my answer with the exact Gruntfile I succesfully tested on my machine. Can you try it on your side? – Xavier Priour Jul 04 '15 at 22:22
  • Also, I tried without defining the target and I got an error. Target (`dist` here) **is** mandatory - I guess grunt-html-build documentation has some issues. – Xavier Priour Jul 04 '15 at 22:24
  • OK, so if I make a single Gruntfile.js with ONLY the above code, it works. There is some sort of conflict within my fuller Gruntfile, then. All of my other tasks run (including the "grunt-includes") but not this one. Can't tell where the conflict is, but suffice it to say, you have provided a correct answer! Thanks for your time. – Greg Pettit Jul 05 '15 at 02:16
  • Now it's eating at me that it doesn't 'just work' in my Gruntfile. I am going to have to pick it apart and rebuild it until I discover what causes it to not work. ;) My first step was to strip out everything inside the initConfig object EXCEPT the htmlbuild task... and it works! Which seems to indicate that it's specific to the initConfig object. The Gruntfile.js passes JS Lint, though, not identifying any accidentally not-closed braces or trailing commas or anything like that. – Greg Pettit Jul 05 '15 at 02:47
  • Yeah. So far doesn't make sense. I pulled out parts of the config until it worked. The last one I pulled out was my uglify task. So, I revert back to a full object and then pull out ONLY uglify. Back to not working. I just wish I could debug Node-side stuff as easily as I can debug client-side. Spit out some logs or something... not saying that can't be done, just saying I don't know how to do it. It seems like htmlbuild itself is buggy. Why should it care about the other tasks... at all...? With any number of arbitrary tasks, running htmlbuild in isolation should work. – Greg Pettit Jul 05 '15 at 03:24
  • Sorry for all the spam... in conclusion, if I pull out my watch AND my uglify, it works. There's no sane reason I should have to do that, so I'm going to have to ditch htmlbuild as a tool. Which is too bad! The tasks must be sharing a variable name in the global namespace or in the grunt namespace. Don't know why they'd do that. – Greg Pettit Jul 05 '15 at 03:27