Build different versions of the same file with Grunt, including/excluding certain parts

Question

I have an index.html file with a part that looks like this:

<header>
    <nav>
        <div id="element1"></div>
        <div id="element2"></div>
        <div id="element3"></div>
        <div id="element4"></div>
    </nav>
</header>

I want to define a grunt task that lets me build different versions of this file. This is an example:

<header>
  <nav>
    <!-- my:task index_v1.html -->
    <div id="element1"></div>
    <div id="element2"></div>
    <!-- endmy -->

    <!-- my:task index_v2.html -->
    <div id="element3"></div>
    <div id="element4"></div>
    <!-- endmy -->
  </nav>
</header>

This would build

• index.html: with the complete content

• index_v1.html: all the markup, but only #element1 and #element2 included

• index_v2.html: all the markup, but only #element3 and #element4 included

Notes:

• I noticed grunt-preprocess and this related question, however, I would need to run grunt n times, changing the ENV variables, for each file. I have other tasks as well and I want this to be on a single run.

Answer 1

my sense is that you may have a better chance of solving this issue by defining the problem slightly differently. You are essentially building a static HTML file above, however, you want to conditionally include only some content in each HTML file. I would use Assemble (static site generator) and within assemble define two build tasks each with their own template. Then, create a custom helper function that only includes the content you want in one template and the other content in the other template. I'm a bit new to Stack Overflow - so I can't get my code formatted correctly - but I'll try to to place an example in here.