Как настроить hot reload в browserSync?

Question

[Anton Essential]

Добрый день, кто знает, можно ли настроить hot reload css в browserSync?
На данные момент при сохранении watcher следит за stylus, происходит компиляция и перезагружается страница в браузере, раньше я использовал gulp-server и live-reload, и при сохранении css браузер не перезагружал страницу обновлял только css, при использовании browserSync он постоянно рефрешит страницу при сохранении css очень напрягает.

Answer 1

[Anton Filippov]

у меня таск выглядит так, и стили меняются на лету:

// ...
gulp.task('serve', ['...', 'styles', '...'], function () {
  browserSync.init({
      server: {
        baseDir: './dist/'
      },
      browser: 'google chrome',
      notify: false
  });
    
  gulp.watch('src/styles/**/*.styl', ['styles']);
});

// ...

gulp.task('styles', function () {
  gulp.src('src/styles/main.styl')
    .pipe(plumber())
    .pipe(stylus())
    .pipe(autoprefixer({ browsers: ['last 3 version'] }))
    .pipe(browserSync.stream())
    .pipe(gulp.dest('dist/styles'));
});
// ...

(лишнее убрал под многоточия)

Comments

[Anton Essential]

Спасибо разобрался, дело было в .pipe(browserSync.stream())

[dicem]

Привет, смотрю твой ответ спустя 2 года и хочу кое чего заметить, в пайпах у тебя browsersync идет перед перемещением файлов в build папку, получается так, что браузер может за хотрелоудиться быстрее ем файлы будут перемещены, или я что то путаю? во всяком случае в офф гайде от browsersync https://www.browsersync.io/docs/gulp делается наоборот