03/03/2019
Настроим автоматическое обновление 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.task('watch', ['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.watch('app/sass/**/*.sass', ['sass']);

В итоге получаем следующий gulpfile

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') );

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

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