Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Gulpпредоставляет максимальное количество инструментов для удобной работы с обработкой файлов. Большинство функций мы рассмотрели в прошлых уроках, но все они работают с самими файлами и не занимаются их преобразованием. Например, вGulpнет встроенной функции для перевода SASS в CSS, а ведь это именно то, что хочется видеть от такого инструмента.

2 И здесь нет противоречий - Gulpдействительно даёт только платформу, "ядро", вокруг которого мы можем выстраивать различные манипуляции с данными.

3 В этом уроке рассмотрим несколько базовых плагинов, которые помогут верстальщику при работе сGulp. Научимся устанавливать и использовать их в своей работе.

4 <h2>Установка сторонних плагинов</h2>

5 Сторонние плагины дляGulp- это знакомые намnpm-пакеты. Поэтому их установка ничем не отличается. Всё, что требуется - установить пакет и подключить его в начале созданногоgulpfile.js.

6 Для поиска пакетов удобно использовать сайт<a>npmjs.com</a>. Например, чтобы найти обработчик для SASS файлов можно, в поиске, указать два ключевых слова:

7 <ul><li>gulp</li>

8 <li>sass</li>

9 </ul>и в поиске найти самый популярный пакет. Почему именно самый популярный? Скорее всего, именно для таких пакетов есть подробная документация и исправлены основные критические ошибки. Еще важно следить за тем, когда в последний раз обновлялся пакет. Да, есть пакеты, которые исправно работают и не требуют обновления, но это скорее исключение из правил. Зачастую частые обновления говорят о том, что разработчики следят за обратной связью и исправляют критические моменты.

10 Важно:помимо плагина дляGulpв большинстве случаев требуется и сам интерпретатор/компилятор. Например, для обработки SASS нужен не только специальный пакет дляGulp, но и пакетSASS

11 <h3>Sass</h3>

12 Для обработки файлов, созданных при помощи препроцессора SASS существует пакет<a>gulp-sass</a>. Это популярный пакет, который обновляется вместе с обновлениями самого препроцессора. Для его использования требуется установить два пакета:

13 <ul><li>sass - основной компилятор SASS</li>

14 <li>gulp-sass - плагин дляGulp</li>

15 </ul>Установить всё можно одной командой:

16 Обработка файлов проста, поэтому, на основе уже существующей структуры, с которой мы работаем на протяжении всего курса добавим компиляцию SASS в CSS. Как и говорилось, это происходит в несколько этапов: подключение пакета и добавление его в цепочку pipe функций:

17 <h3>Pug</h3>

18 ОбработатьPugвGulpможно с помощью популярного плагина<a>gulp-pug</a>. Заметили, что самые популярные плагины даже называются похожим образом? :)

19 Его установка и использование в точности повторяет подход, который использовался при использовании плагинаgulp-sass. Для использования необходимо установить пакетpugиgulp-pug. Это можно сделать в одну строку:

20 Так же обработка файлов происходит по уже знакомой нам структуре: открытие файла, обработка, запись файла. Объединим с помощью функции parallel функции в рамках одной задачи build:

21 Важно:в большинстве случаев в функциях-обработчиках, таких как pug() и sass() из примеров выше, доступны дополнительные параметры, позволяющие задать тонкие настройки компиляции. Всегда обращайте внимание на доступные параметры

22 <h3>Browser Sync</h3>

23 Плагин<a>browser-sync</a>хоть и не является обработчиком в привычном нам понимании, но выполняет одну из самых полезных функций при разработке Frontend - автоматическое обновление окна браузера при выполнении функций. Вы сами можете выбирать на какие действия будет происходить перезагрузка.

24 Именно благодаряbrowser-syncвозможно развернуть условное рабочее окружение, где вам не нужно беспокоиться о компиляции файлов и обновлении браузера. Всё будет происходить "на лету".

25 Для использованияbrowser-syncдостаточно установить одноимённый пакет. Он подходит не только дляGulp, а его можно использовать как самостоятельный пакет в любых других проектах, поэтому какой-то специальной версии подGulpне существует.

26 Для начала, с помощью плагина, создадим локальный сервер. Для этого необходимо подключить плагин и инициализировать его с параметром server:

27 Теперь, при запуске задачи server будет запущен специальный локальный сервер, корнем которого станет директорияbuild/нашего проекта. После запуска вы можете перейти по адресу, указанному в поле Local или External.

28 У пакета browser-sync есть ещё один полезный метод .stream(), который позволяет автоматически обратиться к локальному серверу и перезагрузить его. Эта операция, в большинстве случаев, добавляется в самый конец функции внутри знакомого нам pipe(). Например, дополним пример с обработкойSASSиPug, добавив в конец каждой функции строку .pipe(browserSync.stream()):

29 Теперь, в качестве финального аккорда, необходимо добавить вотчеры, чтобы выполнять компиляции при изменении файлов. Но как это лучше всего сделать? Хорошим вариантом является добавление функций watch() внутри задачи создания сервера, то есть в функцию browserSyncJob(). В ней вначале будет запущен сервер, а затем вотчеры, которые будут следить за всеми изменениями файлов.