Для того чтобы совместить BrowserSync с вашей сборкой на Gulp.js, вам потребуется выполнить несколько шагов.
Шаг 1: Установка BrowserSync
Первым делом вам необходимо установить пакет BrowserSync. Для этого выполните следующую команду в командной строке:
npm install browser-sync --save-dev
Шаг 2: Подключение модуля BrowserSync
Подключите модуль BrowserSync в вашем файле Gulpfile.js, добавив следующий код:
var browserSync = require('browser-sync').create();
Шаг 3: Настройка BrowserSync
Теперь необходимо настроить BrowserSync в вашей сборке. Самый простой способ - это создать задачу Gulp для BrowserSync. Приведу пример настройки для запуска сервера и отслеживания изменений в HTML, CSS и JavaScript файлах:
gulp.task('browsersync', function() { browserSync.init({ server: { baseDir: './' // указывает папку, из которой будут отдаваться файлы } }); gulp.watch(['*.html', 'css/**/*.css', 'js/**/*.js']).on('change', browserSync.reload); // отслеживает изменения в указанных файлах и перезагружает браузер });
Шаг 4: Запуск BrowserSync
Теперь вы можете запустить BrowserSync, добавив следующую команду в вашем Gulpfile.js:
gulp.task('default', gulp.series('browsersync'));
Шаг 5: Запуск сборки
Наконец, запустите вашу сборку Gulp, выполнив команду gulp
в командной строке. BrowserSync будет автоматически запускаться при запуске сборки и поддерживать соединение с вашим локальным сервером. При изменении HTML, CSS или JavaScript файлов, BrowserSync обновит соответствующую страницу в браузере.
Таким образом, вы успешно совместили BrowserSync с вашей сборкой на Gulp.js. Теперь вы сможете автоматически обновлять страницу при внесении изменений в код и получить максимально удобный процесс разработки.