How to insert styles on a page launched with watcher and life reload?

Question

gulp.js

Something like:

<script type="text/javascript">

// Кажется в gulpfile.js не будет виден document
...
const watch = require('gulp-watch');
const browserSync = require("browser-sync");
const reload = browserSync.reload;

gulp.prototype.appendToPage = function(CompiledStyle) {
    if( this.isAppended() )return;

    let styleTag = document.createElement('style');
        styleTag.innerHTML = CompiledStyle;

    document.getElementByID('HEAD').appendChild( styleTag );
};

gulp.task('build::style', function () {
    return combiner(
        gulp.src(path.src.style)
            // ,sourcemaps.init()
            // ,sass().on('error', sass.logError)
            // ,prefixer()
            // ,cssmin()
            // ,sourcemaps.write()
        //,gulp.dest(path.build.code)
        ,gulp.appendToPage(this) // <== append to page instead move to destination
            ,reload({stream: true})
    );
});
...
</script>

I understand that the easiest way is to compile, save, add:

<link
    rel="stylesheet"
    href="assets/css/modules/livereload.css"
>

but is it possible?
upd:
I have a task: to lay out a website on a finished CMS. Cms itself compiles style files and includes them. So I thought to do the same and override the styles by connecting them in the footer (Openserver + browserSync(Proxy) ). Refreshing the page every time is not cool (if only because of the perfectPixel add-on that turns off every time). Of course, you can add footer.htm to the ignore file in order not to accidentally commit / push the left connection to the project. That's why I'm so interested :)

Answer 1

What did you make up.
Yes, it is possible, but with a large number of files it loads the system, so if you are not good at incremental processing, I do not advise using liverelad. Fingers will not fall off, it will be updated once or twice-fiftieth.
I have similar implemented on gulp-connect and gulp-livereload

gulp.task('connect', function() {
  connect.server({
    livereload: true
  });
});

+ refresh markers in other tasks
And the whole project is dragged into livereaload mode. I turned it off almost as soon as I put it together. Since in projects I collect projects that need to be updated in their entirety.