Gulp.JS: BrowserSync — Автоматическое обновление страниц

Этот урок посвящен плагину BrowserSync, обеспечивающему автоматическое обновление страницы браузера при изменении файлов проекта.

Установка BrowserSync

Для установки плагина выполните в терминале команду:

npm install browser-sync --save-dev

Подключение и настройка BrowserSync

После установки подключите плагин. Существует два способа:

  1. Создание переменной и вызов функции:

    var browserSync = require('browser-sync').create();
    
    function sync() {
        browserSync.init({
            server: {
                baseDir: "./" // Или путь к конкретной папке, например "./css"
            },
            port: 3000
        });
    }
  2. Непосредственный вызов функции 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 позволяют оптимизировать процесс и обрабатывать изменения в разных типах файлов.

Что будем искать? Например,программа