Автоматическое обновление страницы с помощью 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, вы указываете имя вашего локального домена.

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

Слежение за 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);
  • Знакомство с Gulp (1 часть).
  • Использование SASS в Gulp проекте (2 часть).
  • Автоматическое обновление страницы в Gulp (3 часть — текущая).
  • Babel для Gulp (4 часть).
  • Моментальная загрузка сайта на хостинг и синхронизация файлов — gulp-rsync (5 часть).
Как удалить шрифты в windows 10 Установка bash в Windows 10