Этот урок посвящен плагину BrowserSync, обеспечивающему автоматическое обновление страницы браузера при изменении файлов проекта.
Установка BrowserSync
Для установки плагина выполните в терминале команду:
npm install browser-sync --save-dev
Подключение и настройка BrowserSync
После установки подключите плагин. Существует два способа:
- Создание переменной и вызов функции:
var browserSync = require('browser-sync').create(); function sync() { browserSync.init({ server: { baseDir: "./" // Или путь к конкретной папке, например "./css" }, port: 3000 }); }
- Непосредственный вызов функции create():
var browserSync = require('browser-sync').create().init({ server: { baseDir: "./" // Или путь к конкретной папке }, port: 3000 });
baseDir указывает директорию для синхронизации, port — порт локального сервера (по умолчанию 3000).
Создание задачи Gulp для BrowserSync
Создайте Gulp-задачу для запуска BrowserSync:
gulp.task('sync', function() {
sync();
});
Имена функции и переменной не должны совпадать (например, browserSync и browserSync).
Запуск BrowserSync и доступные ссылки
После запуска задачи gulp sync в браузере откроется index.html. Доступны следующие ссылки:
- Локальный сервер: localhost:3000
- Удаленная ссылка: для доступа к проекту с другого компьютера.
- Две дополнительные локальные ссылки для доступа к графическому интерфейсу (localhost:3001).
Графический интерфейс (localhost:3001) предоставляет настройки синхронизации (скроллинг, клики, формы) и позволяет отслеживать плагины и историю переходов.
Отслеживание изменений файлов
По умолчанию BrowserSync только отображает локальный сервер. Для автоматического обновления при изменении файлов CSS используйте stream:
gulp.task('css', function() {
return gulp.src('style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(browserSync.stream());
});
Для параллельной обработки задач (запуск BrowserSync и отслеживание изменений) используйте gulp.parallel:
gulp.task('default', gulp.parallel('sync', 'watchFiles'));
где watchFiles — задача для отслеживания изменений:
gulp.task('watchFiles', function() {
gulp.watch('./style.scss', gulp.parallel('css')); //пример с scss файлом
});
Отслеживание изменений в HTML и JavaScript
Для обработки изменений в HTML и JavaScript файлах создайте функцию browserReload:
function browserReload(done) {
browserSync.reload();
done();
}
И добавьте watch задачу:
gulp.task('watchFiles', function() {
gulp.watch(['*.html', '*.js'], gulp.parallel('browserReload'));
});
BrowserSync — мощный инструмент для ускорения разработки, обеспечивающий автоматическое обновление браузера при изменении файлов. stream и gulp.parallel позволяют оптимизировать процесс и обрабатывать изменения в разных типах файлов.