How to add a new script block to html for Gulp.js?

Question

I am using a yeoman gulp web-app.

The generated index.html file has a couple of pre-made script concatenation blocks, such as:

 <!-- build:js scripts/vendor.js -->
 <!-- bower:js -->
  ... js files ...
 <!-- endbower -->
 <!-- endbuild -->

I would like to add my own block, as I have done in Grunt, to be conditional for IE8. In Grunt, I added this:

<!-- build:js scripts/ie8.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/respondJs/src/respond.js"></script>
<![endif]-->
<!-- endbuild -->

which compiles to

<!--[if lt IE 9]>
<script src="scripts/ie8.js"></script>
<![endif]-->

When I try to add a block like this to my Gulp index.html, the build task throws an error:

events.js:74
    throw TypeError('Uncaught, unspecified "error" event.');
          ^

Thoughts?

Update: Here's the final usemin task:

gulp.task('usemin', function() {
 gulp.src('app/*.html')
  .pipe(usemin({
    css: [minifycss(), 'concat'],
    //html: [minifyhtml({empty: true})],
    js: [uglify({mangle: false}), rev()]
  }))
 .pipe(gulp.dest('build/'));
});

Also, as suggested, I wrapped the conditional comments around the usemin comments:

  <!--[if lt IE 9]>
  <!-- build:js scripts/ie8.js -->
    <script src="bower_components/es5-shim/es5-shim.min.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <script src="bower_components/respondJs/dest/respond.min.js"></script>
  <!-- endbuild -->
  <![endif]-->