Gulp BrowserSync + gulp-notify: уведомления при изменении файлов

При разработке приходится постоянно переключаться между редактором и браузером, вручную обновляя страницу. BrowserSync решает эту проблему — он синхронизирует браузеры и устройства, показывая изменения в реальном времени без ручного рефреша.

Установка BrowserSync с Gulp

Установите пакеты:

npm install browser-sync gulp --save-dev

Настройка статического сервера:

var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
  browserSync.init({
    server: { baseDir: "./" }
  });
});

Если вы работаете с локальным сервером (Apache/Nginx), используйте proxy:

gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "yourlocal.dev"
  });
});

Инжекция CSS без перезагрузки

Gulp-задача компилирует Sass и сразу инжектирует CSS в браузер без полной перезагрузки страницы — изменения стилей применяются мгновенно.

Перезагрузка при изменении JS

Для JavaScript используется полная перезагрузка страницы через browserSync.reload() — в отличие от CSS, JS нельзя инжектировать без перезагрузки.

Установка gulp-notify

gulp-notify отправляет системные уведомления по завершении задач — вы сразу знаете, когда сборка завершена, не следя за терминалом.

# Глобальная установка
sudo npm install -g gulp-notify

# Установка в проект
npm install --save-dev gulp-notify

# Для Linux/Debian — системные уведомления
sudo apt-get install libnotify-bin

Пример gulp-задачи с уведомлением

var notify = require('gulp-notify');

gulp.task('css', function() {
  return gulp.src('path/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('dest'))
    .pipe(notify({
      title: 'Сборка завершена',
      message: 'CSS успешно скомпилирован',
      icon: __dirname + '/logo.png'
    }));
});

Совместное использование BrowserSync и gulp-notify создаёт комфортный рабочий процесс: изменили файл — получили уведомление и сразу увидели результат во всех открытых браузерах.