Gulp 4 & BrowserSync: Инъекция стиля?

Question

Я пытаюсь использовать синхронизацию браузера с Gulp 4, но bs не сохраняет состояние и вместо этого выполняет полное обновление. Это не очень полезно. Кажется, bs больше не поддерживает истинную инъекцию. I 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

Исправлено. Вот где я поступил не так:

Конструктор браузера-sync принимает объект опций, который может содержать массив files. Большинство учебных пособий, которые я прочитал, включая gulpfile для самого собственного веб-стартового набора Google, не включают это. Как оказалось, для сохранения состояния требуется сохранение стиля.

Кроме того, не передавайте .stream() или .reload() в качестве окончательной трубы в заданиях по стилям. Это не нужно, и будет впрыскиваться в стиле короткого замыкания, вызывая полное обновление.

Наконец, процесс browserSync не должен быть прекращен, и watch и browserSync задача должна выполняться параллельно для того, чтобы инъекций живого стиля, чтобы иметь место.

Надеюсь, это поможет любому, кто сталкивается с этой проблемой.

я закрыл соответствующий вопрос GitHub и posted my gulpfile