Автоматическое обновление страницы с помощью browser-sync для Gulp
Настроим автоматическое обновление страницы при сохранении кода с помощью плагина browser-sync для Gulp.
Содержание:
- Установка и подключение browser-sync.
- Слежение за HTML-файлами.
- Слежение за SASS-файлами.
- Другие статьи по 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
- Знакомство с Gulp (1 часть).
- Использование SASS в Gulp проекте (2 часть).
- Автоматическое обновление страницы в Gulp (3 часть — текущая).
- Babel для Gulp (4 часть).
- Моментальная загрузка сайта на хостинг и синхронизация файлов — gulp-rsync (5 часть).
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (1)
- Денис