Gulp и BrowserSync

Напишем самый простой файл конфигурации Gulp, позволяющий вести разработку с синхронным просмотром изменений в браузере.

Для примера будем транспилировать шаблоны, написанные на PUG в HTML-код. Предполагаю, что с node и npm вы уже работали и умеете устанавливать нужные пакеты.

Начало работы

Создадим основную структуру проекта. Она будет очень простой — папка /pug, в которой мы разместим шаблоны, и папка /dist, где будет лежать транспилированный html.

Создадим один pug-файл index.pug:

doctype
html
  head
    title Document
  body
    h1 Hello, world!

Теперь инициализируем проект:

npm init -f

Флаг f (или -y) позволяет пропустить все настройки.

Зависимости

Для работы потребуются следующие модули:

• собственно gulp;
• gulp-pug;
• browser-sync.

Установим их следующей командой:

npm i gulp gulp-pug browser-sync --save-dev

Флаг --save-dev добавит все зависимости в файл package.json в раздел devDependencies.

Конфигурация gulp

Настройка сборщика осуществляется через файл gulpfile.js, который необходимо создать в корне проекта.

Подключим все зависимости:

const gulp = require('gulp'),
      pug = require('gulp-pug'),
      browserSync = require('browser-sync');

const reload = browserSync.reload;

Отдельно выносим функцию reload объекта browserSync, потому что мы будем ей часто пользоваться.

Напишем gulp-таск для транспиляции pug-кода в html:

gulp.task('pug', function() {
  gulp.src('./pug/index.pug')
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest('./dist'))
});

Теперь добавим наблюдатель, который будет отслеживать изменения всех pug-файлов и обновлять транспилированный код:

gulp.task('watcher', function() {
  gulp.watch('./pug/**/*.pug', (event, sb) => {
    gulp.start('pug');
  });
});

Теперь, запустив оба таска по очереди, можно вручную обновлять браузер и сразу видеть изменения:

gulp pug
gulp watcher

Но это неудобно, давайте прикрутим синхронизацию с браузером.

Активация browser-sync

Модуль browser-sync нужно инициализировать, а затем вызывать метод перезагрузки в нужных местах.

Таск инициализации выглядит примерно так:

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

У модуля много настроек, их можно посмотреть на его странице на npmjs.

Если из консоли мы вызовем этот таск на выполнение, в браузере автоматически откроется страница ./dist/index.html.

Теперь добавим перезагрузку к задаче pug:

gulp.task('pug', function() {
  gulp.src('./pug/index.pug')
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest('./dist'))
    .pipe(reload({ stream: true }))
});

И создадим дефолтный таск, который будет запускать все задачи в правильном порядке:

gulp.task('default', ['watcher', 'browser-sync', 'pug']);

Примерно такой gulpconfig.js я использую для верстки простых лендингов. Он позволяет удобно использовать простые шаблонизаторы, процессоры CSS и прочие полезные штуки без особых сложностей и сборок.