Gulp и BrowserSync | В паутине

Gulp и BrowserSync

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

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

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

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

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

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

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

Зависимости

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны