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

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