Напишем самый простой файл конфигурации 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 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован