Автоматическое обновление страницы с помощью 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 часть).
English | Russian |
---|---|
Gulp | Глоток |
Dependencies | Зависимости |
Task | Задача |
Variable | Переменная |
Watch | Наблюдать |
Destination | Пункт назначения |
Base Directory | Базовый каталог |
Notify | Уведомлять |
Stream | Поток |
Default | По умолчанию |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.