Как обновлять browser-sync каждый раз изменения файлов?

Для обновления browser-sync каждый раз при изменении файлов в проекте, вам необходимо добавить отслеживание изменений файлов и перезагрузку сервера в вашем Gulp.js конфигурационном файле.

Первым шагом будет установка зависимостей. Убедитесь, что у вас установлены Gulp.js и browser-sync путем выполнения команды в командной строке или терминале:

npm install --global gulp-cli
npm install --save-dev gulp browser-sync

Теперь, когда зависимости установлены, создайте файл gulpfile.js в корневой папке вашего проекта и выполняйте следующие шаги:

1. Подключите необходимые модули Gulp.js:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

2. Создайте задачу для browser-sync, которая будет запускает сервер и отслеживает изменения файлов. Вам понадобятся следующие методы browser-sync: init для запуска сервера, reload для перезагрузки страницы и stream для внедрения изменений внутри тела HTML без перезагрузки. В конкретном случае нам нужен метод stream:

gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: './' // корневая папка проекта
    }
  });

  // отслеживание изменений файлов и перезагрузка
  gulp.watch('./*.html').on('change', browserSync.reload); // при изменении HTML
  gulp.watch('./css/**/*.css').on('change', browserSync.reload); // при изменении CSS
  gulp.watch('./js/**/*.js').on('change', browserSync.reload); // при изменении JS
});

3. Создайте задачу Gulp.js по умолчанию, чтобы можно было запустить browser-sync путем ввода команды gulp в командной строке или терминале:

gulp.task('default', gulp.series('browser-sync'));

4. Запустите Gulp.js, введя команду gulp в командной строке или терминале. Browser-sync будет запущен и будет отслеживать изменения всех файлов HTML, CSS и JS. При каждом изменении browser-sync будет автоматически перезагружать сервер.

Теперь вы можете вносить изменения в файлы вашего проекта и видеть результаты в режиме реального времени без необходимости вручную перезагружать страницу в браузере.

Надеюсь, это решит вашу проблему с обновлением browser-sync при изменении файлов в проекте с использованием Gulp.js!