Partial files will not dynamically update when using 'BrowserSync HTML Injector' with 'Gulp File Include'

This is what my very basic 'index.html' file looks like:

@@include('partials/_header.html')
    <main>
    </main>
@@include('partials/_footer.html')

If I modify this file, code is injected, but anything that I try and edit inside a partial file isn't. The file include task is triggered for both the partial and the 'index.html' file, but the compiled 'index.html' at root level doesn't update when I save a partial file, it will only update when I save the 'index.html' file.

I've completely stripped down my gulp file to the bare minimum. This is what it looks like:

(function() {
    'use strict';
    var fileinclude = require('gulp-file-include'),
        runSequence = require('run-sequence'),
        notify = require('gulp-notify'),
        svgmin = require('gulp-svgmin'),
        cache = require('gulp-cached'),
        gulp = require('gulp'),
        browserSync = require('browser-sync').create(),
        htmlInjector = require('bs-html-injector');


    // File Format
    var fileFormat = 'html',
        fileExt = '.' + fileFormat;

    // Paths object
    var src = {
        pages: 'src/components/*' + fileExt,
        pagesWatch: 'src/components/**/*' + fileExt
    };

    var dist = {
        pages: ''
    };

    // Browser Sync with HTML injection
    gulp.task('browser-sync', function() {
        browserSync.use(htmlInjector, {
            files: './*.html'
        });
        browserSync.init({
            server: './',
            files: '.css'
        });
    });

    // File Include
    gulp.task('fileinclude', function() {
        return gulp.src(src.pages)
            .pipe(cache('markup'))
            .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
            .on('error', notify.onError(function(error) {
                return 'An error occurred while compiling files.\nLook in the console for details.\n' + error;
            }))
            .pipe(gulp.dest(dist.pages))
    });
    // $ build - Runs all the required tasks then launches browser sync and watch for changes
    gulp.task('default', function() {
        runSequence(['fileinclude'], ['browser-sync'], function() {
            gulp.watch(src.pagesWatch, ['fileinclude'], htmlInjector);
        });

    });
}());

via Luke