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

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

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

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

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

npm i browser-sync --save-dev

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

var gulp = require('gulp');
    browserSync = require('browser-sync');

Теперь создадим задачу browser-sync.

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  });
});

baseDir - здесь указываем корневую папку для локального сервера
notify - уведомления (false - отключение уведомлений)

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

gulp.task('watch', gulp.parallel(['browser-sync'], function() {
  gulp.watch('app/**/*.html', browserSync.reload);
  gulp.watch('app/css/**/*.css', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
});

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

Можно создать дефолтный таск

gulp.task('default', ['watch']);

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

Browser-sync + gulp-sass

Устанавливаем плагин gulp-sass командой

npm i gulp-sass --save-dev

Подключаем его:

sass = require('gulp-sass');

Создаём таск sass

gulp.task('sass', function(){
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({
        stream: true
      }))
});

gulp.src() - берём все sass файлы для обработки
gulp.dest() - куда выгрузить файл после преобразования
browserSync.reload({stream: true} - обновление страницы при изменении кода

Осталось добавить в таск watch слежение за файлами sass вместо css. И выполнять перед таском watch еще таск sass. Для этого мы используем квадратные скобки (Gulp 3)

gulp.watch('app/sass/**/*.sass', ['sass']);

В итоге получаем следующий gulpfile.js для третьей версии Gulp

var browserSync = require('browser-sync');
           gulp = require('gulp'),
           sass = require('gulp-sass');

gulp.task('sass', function(){
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({
        stream: true
      }))
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  })
});

gulp.task('watch', ['browser-sync', 'sass'], function() {
  gulp.watch('app/**/*.html', browserSync.reload);
  gulp.watch('app/sass/**/*.sass', ['sass']);
  gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('default', ['watch']);

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

Для Gulp4 код будет выглядеть немного иначе

var browserSync = require('browser-sync');
           gulp = require('gulp'),
           sass = require('gulp-sass');

gulp.task('sass', function(){
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('js', function() {
  return gulp.src([
    'libs/jquery/jquery-3.3.1.min.js',
    'js/common.js',
    ])
  .pipe(gulp.dest('js'))
  .pipe(browserSync.reload({ stream: true }))
});

gulp.task('html', function() {
  return gulp.src('*.html')
  .pipe(browserSync.reload({ stream: true }))
});

gulp.task('watch', function() {
  gulp.watch('sass/**/*.sass', gulp.parallel('sass'));
  gulp.watch(['libs/**/*.js', 'js/common.js'], gulp.parallel('js'));
  gulp.watch('*.html', gulp.parallel('html') )
});

gulp.task( 'default', gulp.parallel('sass', 'js', 'browser-sync', 'watch') );

Полезные ссылки

Прочитать про переход на Gulp 4
Настройка browserSync и Gulp официальный сайт
Страница плагина gulp-sass
Официальная страница Gulp

Изучаем английский

English	Russian
Gulp	Глоток
Dependencies	Зависимости
Task	Задача
Variable	Переменная
Watch	Наблюдать
Destination	Пункт назначения
Base Directory	Базовый каталог
Notify	Уведомлять
Stream	Поток
Default	По умолчанию

30/09/2019 12:25

Николай