How to include different content partials with Assemble based on dev/build context?

Question

I've jumped into assemble/Grunt to try and improve my workflow for creating templates for the CMS I use. What I'm trying to figure out: is it possible to use a block/partial of HTML content in my template while developing (ie, during "grunt watch"), but then replace that with the include tag that my CMS requires in the final HTML output (ie when i do "grunt build"). Something like the following?

<div id="content">
{{! if in dev context, include this partial }}
{{#if}}
  {{> body }}
{{! if in build context, include this partial }}
{{else}}
  {{> body-cms-tag }}
{{/if}}
</div>

which if in dev/watch mode, would output

<div id="content">
  <h1>Test Headline</h1>
  <p>This is just test content.</p>
</div<

but in build mode, would output

<div id="content">
  <?php echo $mContext['bodyElements']; ?>
</div>

Is that possible, either with Handlebars syntax, an Assemble helper, or a Grunt task (similar to grunt-usemin?)

Answer 1

You can add a flag in your data or assemble options and check the value of that flag in your if statement:

Gruntfile.js

assemble: {
  options: {
    production: false
  },
  files: { ... }
}

page.hbs

<div id="content">
{{! if in dev context, include this partial }}
{{#if production}}
  {{> body }}
{{! if in build context, include this partial }}
{{else}}
  {{> body-cms-tag }}
{{/if}}
</div>

Currently, if you want to get to that production flag inside some helper or partial that changes the level of the context, you'll have to use something like ../production which can be a pain. However, Handlebars.js has a feature that will be in a version (hopefully soon) that'll let you do @root.production from any level. This has been merged in but it's not in a release yet. When it's release, we'll be updating to that version.

Hope this helps.