javascript - Gulp 4 & BrowserSync : Style Injection?

Question

我正在尝试使用 Gulp 4 的浏览器同步，但 bs 不保留状态，而是进行完全刷新。这不是很有用。看来 bs 不再支持真正的注入(inject)。我 filed an issue on 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)都不包含此内容。事实证明，这是样式注入(inject)保存状态所必需的。

此外，不要将 .stream() 或 .reload() 作为样式任务中的最终管道传递。它不是必需的，并且会短路式注入(inject)，强制完全刷新。

最后，browserSync 进程不能终止，watch 和 browserSync 任务必须并行执行，以便实时样式注入(inject)发生。

希望这对面临此问题的任何人有所帮助。

我也关闭了相应的github问题，并且posted my gulpfile