Gulp 4 和 BrowserSync：样式注入？

Question

我正在尝试将浏览器同步与 Gulp 4 一起使用，但 bs 没有保留状态，而是进行了完全刷新。这不是很有用。似乎 bs 不再支持真正的注入。如果你想贡献，我在 GH 上提交了一个问题。

这是相关的代码：

// styles:dev task    
gulp.task('styles:dev', function() {
    return gulp.src(config.src)
        .pipe(sourcemaps.init())
        .pipe(postcss(config.postcss.dev))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.dest.dev))
        .pipe(browserSync.stream());
});

// browserSync task    
gulp.task('browserSync', function(cb) {
    browserSync.init(config, cb);
});

// Watch task:
gulp.task('watch:styles', function() {
    return gulp.watch(config.paths.css,
        gulp.series('styles:dev'));
});

gulp.task('watch', gulp.parallel('watch:styles'));

// default task    
gulp.task('default',
    gulp.series('clean:dev',
        gulp.parallel('copy:dev', 'styles:dev'), 'browserSync', 'watch')
);

提前致谢。

Answer 1

固定的。这是我出错的地方：

浏览器同步构造函数采用一个选项对象，其中可以包含一个files数组。我读过的大多数教程，包括 Google 自己的 Web Starter Kit 的 gulpfile，都不包含此内容。事实证明，这是样式注入保持状态所必需的。

此外，不要将.stream()or.reload()作为样式任务中的最后一个管道。它是不需要的，并且会短路式注入，强制完全刷新。

最后，browserSync进程不得终止，并且watch任务browserSync必须并行执行才能进行实时注入。

希望这可以帮助任何面临这个问题的人。

我也关闭了相应的github问题，并发布了我的gulpfile