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

Содержание:

  1. Установка и подключение browser-sync.
  2. Слежение за HTML-файлами.
  3. Слежение за SASS-файлами.
  4. Другие статьи по Gulp.

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

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

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

npm i browser-sync --save-dev

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

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

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

function myServer() {
    browserSync.init({
        server: {
            baseDir: 'app' // здесь указываем корневую папку для локального сервера

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

    });
}

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

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

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

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

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

Слежение за HTML-файлами

Установим слежение за файлами HTML. Создадим задачу html:

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

        .pipe(browserSync.stream())
}

exports.HTML = HTML;

Добавим слежение за HTML в функцию myServer:

watch('app/**/*.html', { usePolling: true }, HTML); // следим за изменениями HTML

Можно создать задачу по умолчанию.

exports.default = series(HTML, myServer);

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

const { src, dest, watch, lastRun, series, parallel } = require('gulp');
const browserSync = require('browser-sync'); // подключаем browser sync


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

        .pipe(browserSync.stream())    // обновление страницы

}
exports.HTML = HTML;

function myServer() {
    browserSync.init({
        server: {
            baseDir: 'app' // здесь указываем корневую папку для локального сервера

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

    });

    watch('app/**/*.html', { usePolling: true }, HTML); // следим за изменениями HTML

}

exports.default = series(HTML, myServer);

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

Browser-sync + gulp-sass

В предыдущей статье мы создали задачу для работы с SASS файлами. Добавим слежение за ними и автоматическое изменение страницы.

В конец функции SASS добавьте следующую строку для перерисовки стилей без перезагрузки страницы:

.pipe(browserSync.stream())

И в функцию myServer добавьте строку для слежения:

watch('app/assets/sass/**/*', { usePolling: true }, sass)

Весь код файла gulpfile.js на текущий момент:

const { src, dest, watch, lastRun, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');

function HTML() {
    return src('app/**/*.html', { since: lastRun(HTML) })
        .pipe(dest('dist/'))
        .pipe(browserSync.stream())
}
exports.HTML = HTML;

function SASS() {
    return src('app/assets/sass/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'nested'
        }).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('app/assets/css/'))
        .pipe(dest('dist/assets/css/'))
        .pipe(browserSync.stream())
}
exports.SASS = SASS;

function myServer() {
    browserSync.init({
        server: {
            baseDir: 'app' // папка для локального сервера

        },
        notify: false
    });

    watch('app/assets/sass/**/*', { usePolling: true }, SASS) // следим за SASS

    watch('app/**/*.html', { usePolling: true }, HTML);       // следим за HTML

}

exports.default = series(SASS, HTML, myServer);
  1. Знакомство с Gulp (1 часть).
  2. Использование SASS в Gulp проекте (2 часть).
  3. Автоматическое обновление страницы в Gulp (3 часть - текущая).
  4. Babel для Gulp (4 часть).
  5. Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync (5 часть).
Изучаем английский
EnglishRussian
GulpГлоток
DependenciesЗависимости
TaskЗадача
VariableПеременная
WatchНаблюдать
DestinationПункт назначения
Base DirectoryБазовый каталог
NotifyУведомлять
StreamПоток
DefaultПо умолчанию
Админ admin
» »