[在完成其他任务后使用browserSync.stream（）

Question

[当我像这样使用stream()方法时，效果很好：

    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());

    });

当我在执行stream()之前添加另一个任务时，仅完成了该任务。

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

控制台输出：

[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

但是未注入CSS，仅在手动重新加载后才应用更改。

我遵循了this course，其中他们使用了一些语法不同的过时软件包：例如task()的第二个参数设置为数组：['styles']。它不起作用，我发现您应该改用series()或paralell()。

[a question on StackOverflow看起来与我的相同，但是由于我是gulp新手用户，因此我无法在那找到问题的答案。

Answer 1

将cssInject定义为单独的task()，然后将其作为第二个参数放入series()中。

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

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