use browserSync.stream() after other task

Question

When I use the stream() method like this it works well:

    var gulp = require('gulp'),
    watch = require('gulp-watch'),
    browserSync = require('browser-sync').create();

gulp.task('watch', function () {

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        }
    });       

    watch('./app/assets/styles/**/*.css', gulp.series('cssInject'));
});

    gulp.task('cssInject',  function () {
        return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());

    });

When I add another task before executing the stream() only that task is accomplished.

gulp.task('cssInject', gulp.series('styles'), function () {
        return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());
        });

The console outputs then:

[15:16:00] Starting 'cssInject'...
[15:16:00] Starting 'styles'...
[15:16:00] Finished 'styles' after 50 ms
[15:16:00] Finished 'cssInject' after 53 ms

but CSS wasn't injected, the changes are applied only after manual reload.

I followed this course where they use few outdated packages with different syntax: e.g. the second argument of the task() is set as an array: ['styles']. It didn't work and I found out that you should use series() or paralell() instead.

There is a question on StackOverflow which looks the same as mine, but I didn't manage to find the answer for my issue there as I am gulp novice user.

Answer 1

Solved by: Defined the cssInject as separate task() and put it then into series() as second argument.

gulp.task('cssInject', function () {
    return gulp.src('./app/temp/styles/styles.css').pipe(browserSync.stream());
});

gulp.task('manageCSS', gulp.series('styles', 'cssInject'));