Getting gulp-file-include and browser-sync to work together

I read in a blog you could use gulp-file-include to include .html files, It works but the code below winds up overwriting the include markup in the html...

You might think why don't I have gulp-file-include spit out to another destination folder? Reason being is then I can't get browser-sync to refresh the browser after that. Essentially this link is illustrating my problem...

Looks like there is supposed to be another 'output' folder which will be distilling all the includes into a new .index.html file

I know I could just open up the file which is receiving the includes and then browserSync would work, but isn't that an extra step?

Please ask questions as this seems very inceptionesque!

gulp.task('fileinclude', function() {
  gulp.src('builds/development/*.html')
  .pipe(fileinclude())
  .pipe(gulp.dest('builds/development/'));
});