Backbone Boilerplate Conditional Comments

Question

Can someone tell me the significance of the conditional comments within the index.html of the Backbone Boilerplate (https://github.com/tbranyen/backbone-boilerplate/blob/master/index.html)?

<!--(if target dummy)><!--> <link rel="stylesheet" href="/app/styles/index.css"> <!--<!(endif)-->

<!--(if target release)> <link rel="stylesheet" href="index.css"> <!(endif)-->

<!--(if target debug)> <link rel="stylesheet" href="index.css"> <!(endif)-->

<!--(if target dummy)><!-->    <script data-main="/app/config" src="/vendor/js/libs/require.js"></script>    <!--<!(endif)-->

<!--(if target release)>    <script src="require.js"></script>    <!(endif)-->

<!--(if target debug)>    <script src="require.js"></script>    <!(endif)-->

Do they relate to Grunt when building different versions?

Thanks..

Answer 1

It looks like you are correct in your assumption that these are Grunt build targets. When building with grunt it must have different settings such as debug, dummy, and release.

https://github.com/changer/grunt-targethtml

The linked example I found by searching. It has conditional comments as well with a bit of information. It then has in the gruntfile.js:

// Configuration to be run (and then tested).
targethtml: {
  dev: {
    files: {
      'tmp/dev.html': 'test/fixtures/index.html'
    }
  },
  dist: {
    files: {
      'tmp/dist.html': 'test/fixtures/index.html'
    }
  }
},...

It uses dev and dist as it's conditionals.

Backbone Boilerplate defines debug and release (dummy appears to be excluded):

https://github.com/tbranyen/backbone-boilerplate/blob/master/grunt.js#L131