Автоматическое обновление страницы с помощью browser-sync для Gulp

Настроим автоматическое обновление страницы при сохранении кода с помощью плагина browser-sync для Gulp.

Установка и подключение плагина browser-sync для Gulp

Если не знакомы с Gulp, то перед изучением данной темы рекомендуется начать со статьи Gulp для ускорения разработки.

Сначала устанавливаем плагин (пакет) в папку проекта командой.

npm i browser-sync --save-dev

Далее, в gulpfile.js мы подключаем browser-sync.

const browserSync = require('browser-sync'); // подключаем browser sync

Теперь создадим задачу brSync.

gulp.task('brSync', () => {
    brSync.init({
        server: {
            baseDir: 'app' // здесь указываем корневую папку для локального сервера

        },
        notify: false      // уведомления (false - отключение уведомлений)

    });
});

Если вы ведете разработку, для CMS, например, WordPress, то вам вместо server необходимо использовать proxy.

proxy: "http://only-to-top.loc/"

Если взять в пример Open Server, вы указываете имя вашего локального домена.

Автоматическое обновление страницы WordPress

Установим слежение за файлами, при изменении которых браузер будет автоматически обновляться.

gulp.task('watch', gulp.parallel('brSync', function () {
    gulp.watch('app/*.html', gulp.parallel('html'))     // следим за изменениями HTML

}));

Мы создали слежение за изменениями файлов html, css и javascript с автоматической перезагрузкой браузера.

Можно создать дефолтный таск.

gulp.task('default', gulp.parallel('html', 'watch'));

Но что если мы хотим использовать препроцессор. Давайте настроим слежение за изменениями Sass файлов.

Весь код файла gulpfile.js

'use strict';

const gulp = require('gulp'),
      brSync = require('browser-sync').create(); // подключаем плагин browser sync


gulp.task('brSync', () => {
    brSync.init({
        server: {           // локальный сервер

            baseDir: "dist" // корневая папка

        },
        notify: false       // отклчение уведомлений

    });
});

gulp.task('html', () => {   
    return gulp.src('app/**/*.html', { since: gulp.lastRun('html') })
        .pipe(gulp.dest('dist'))                // перенос HTML в папку деплоя

        .pipe(brSync.reload({ stream: true }))  // перезагрузка страницы

});

gulp.task('watch', gulp.parallel('brSync', () => {
    gulp.watch('app/*.html', gulp.parallel('html')) // следим за изменениями HTML

}));

gulp.task('default', gulp.parallel('html', 'watch')); // задача по умолчанию (gulp)

Browser-sync + gulp-sass

Настроим автоматическое обновление страницы для sass-файлов.

Компиляцию SASS в CSS мы реализовали в предыдущей статье.

Поэтому добавим слежение и обновление страницы при изменении sass-файлов.

gulp.task('sass', () => {
    return gulp.src('app/sass/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'nested',
        })
            .on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(brSync.reload({ stream: true })) // обновление (перезагрузка) страницы

});

gulp.task('watch', gulp.parallel('brSync', function () {
    gulp.watch('app/sass/**/*.sass', gulp.parallel('sass')); // следим за изменениями SASS

    gulp.watch('app/*.html', gulp.parallel('html'))          // следим за изменениями HTML

}));

В итоге получаем следующий gulpfile.js на текущий момент:

'use strict';

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    brSync = require('browser-sync').create();

gulp.task('sass', () => {
    return gulp.src('app/sass/**/*.sass')
        .pipe(sourcemaps.init())        // активируем gulp-sourcemaps

        .pipe(sass({
            outputStyle: 'nested',
        })
            .on('error', sass.logError))
        .pipe(sourcemaps.write())   // создание карты css.map в текущей папке

        .pipe(gulp.dest('dist/css'))
        .pipe(brSync.reload({ stream: true }))
});

gulp.task('brSync', () => {
    brSync.init({
        server: {
            baseDir: "dist"
        },
        notify: false
    });
});

gulp.task('html', () => {
    return gulp.src('app/**/*.html', { since: gulp.lastRun('html') })
        .pipe(gulp.dest('dist'))
        .pipe(brSync.reload({ stream: true }))
});

gulp.task('watch', gulp.parallel('brSync', () => {
    gulp.watch('app/sass/**/*.sass', gulp.parallel('sass')); // следим за изменениями SASS

    gulp.watch('app/*.html', gulp.parallel('html'))     // следим за изменениями HTML

}));

gulp.task('default', gulp.parallel('sass', 'html', 'watch'));

Теперь наш Gulp ещё умеет отслеживать изменения и обновлять страницу.

Статьи про Gulp

  1. Gulp для ускорения разработки. (1 часть).
  2. Использование SASS в Gulp проекте (2 часть).
  3. Текущая статья - автоматическое обновление страницы при измении кода (3 часть).
Изучаем английский
EnglishRussian
GulpГлоток
DependenciesЗависимости
TaskЗадача
VariableПеременная
WatchНаблюдать
DestinationПункт назначения
Base DirectoryБазовый каталог
NotifyУведомлять
StreamПоток
DefaultПо умолчанию
admin