Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В прошлом уроке мы подключили встроенную в пакет Gulp функцию parallel(), которая позволила объединить несколько функций в одну единую задачу.

2 Помимо parallel() внутри пакетаGulpсуществует ещё несколько функций, которые будут рассмотрены в этом уроке. Нет нужды расписывать каждую функцию в отдельности, поэтому рассмотрим самые распространённые, которые вы будете использовать в работе. Больше информации про различные функции можно будет найти в документации пакетаGulp, ссылка на которую будет в конце урока.

3 <h2>series()</h2>

4 Функция series() по своему функционалу очень похожа на функцию parallel(), которую мы изучили в прошлых уроках. Но если есть две разные функции, значит у них должны быть отличия? И ответ - да! Отличие заключается в том, как именно будут вызываться функции в рамках задачи. И здесь два подхода:

5 <ul><li>Функция parallel(), как можно понять из названия, выполняет функции параллельно/одновременно. В примере выше функции sassCompile(), pugCompile() и imagesOptimize() не будут стоять в какой-то очереди или дожидаться окончания друг друга, а начнут работать вместе. Этот подход удобен, если задачи никак друг с другом не связаны и результат одной не зависит от результата другой.</li>

6 </ul><ul><li>В противовес параллельному выполнению есть последовательное, которое реализуется функцией series(). Смысл этой функции в том, что пока не завершилась работа одной функции не начнётся выполнение другой. Это очень важно при использовании множества подзадач, которые напрямую влияют на то, с чем будет работать следующая функция.</li>

7 </ul>На скриншотах стоит обратить внимание на то, когда запускаются задачи. В параллельном выполнении Gulp показывает одновременный запуск всех задач, а при использовании функции series() выполнение новой задачи стартует только после окончания выполнения предыдущей.

8 <h2>src() и dest()</h2>

9 Многие задачи при работе сGulpсвязаны с обработкой файлов. Будь то SASS, Pug или иной инструмент, все их необходимо обработать в формат, который понимает браузер. Для этого необходимо указать, какой файл будет обработан и куда его нужно переместить после обработки. За это, вGulpотвечают две функции:

10 <ul><li>src() для указания пути кобрабатываемомуфайлу</li>

11 <li>dest() для указания пути, куда необходимо положитьобработанныйфайл</li>

12 </ul>Особых неожиданностей здесь нет. Эти функции отвечают за обработку путей к файлам и базовому взаимодействию. На самом деле они намного гибче, чем может показаться с самого начала, но остальной функционал используется крайне редко и в больших проектах, например кеширование. Посмотрите на базовый пример операции по копированию файла:

13 После выполнения задачи файлsrc/sass/app.scssбудет скопирован в директориюbuild/styles/

14 layout-project/ ├── build/ │ ├── styles/ │ │ └── app.scss ├── src/ │ ├── sass/ │ │ └── app.scss │ ├── pages/ │ │ ├── index.pug │ │ ├── sections/ │ │ │ ├── head.pug │ │ │ └── footer.pug ├── gulpfile.js ├── package.json └── node_modules/

15 Сейчас он там не нужен, так как в директориюbuildпопадут уже обработанные файлы, но теперь вы знаете, каким именно способом они туда попадут :)

16 Обратите внимание, что в примере не вызывается функция done(), как было в прошлых примерах. Это связано с тем, что мы указали ключевое слово return. Подробнее о ключевом слове return вы могли прочитать в курсе введения в программирование.

17 <h3>Globs</h3>

18 В примере выше был указан чёткий путь к файлу, который мы хотим скопировать. Для небольших проектов это может быть достаточно простым и эффективным решением, но, зачастую необходимо обработать не один, а все файлы из определённой директории или даже дерева директорий. К примеру, у нас возможна вот такая структура стилей:

19 layout-project/ ├── src/ │ ├── sass/ │ │ ├── global.scss │ │ ├── mobile.scss │ │ ├── desktop.scss

20 Как корректно обработать три этих файла? Есть два варианта:

21 <ol><li>Обработать каждый файл в отдельности</li>

22 <li>Обработать все файлы внутри одной функции</li>

23 </ol>С первым вариантом всё просто - создаём три функции, объединяем их в единую задачу и выполняем:

24 Если всего файла три, то такое решение можно считать нормальным, но не хорошим. Ведь над каждым файлом производится одинаковая операция, а меняется только сам обрабатываемый файл.

25 Для указания нескольких файлов используются специальные шаблоны путей -Globs. Это небольшой пакет, который преобразует шаблоны в пути и по умолчанию встроен вGulp. Достаточно изучить пару приёмов, с помощью которых вы сможете выбирать почти любые файлы и в любом количестве.

26 Первая конструкция - использование звёздочки *, она указывает на то, что надо выбрать всё, что не противоречит указанному в пути. Например, мы можем заменить звёздочкой имя файла в последнем примере и, тогда,Gulpвыберет все три файла:global.scss,mobile.scssиdesktop.scss

27 Можно ещё больше упростить процесс копирования файлов. Предположим, что SASS файлы находятся в совершенно разных директориях, а мы хотим сложить их в единую. Необходимо пройтись по всем доступным директориям, проверить наличие там файла с расширением scss/sass и скопировать. Для этого используется специальная конструкция **, которая нацелена на проход по директориям. Например, можно видоизменить код следующим образом:

28 Теперь при запуске задачи будут проверены все директории внутриsrcна предмет наличия файла с расширением.scss. Здесь важно отметить, поиск будет производиться не только внутри поддиректорийsrc, но и в самой директорииsrc. Например будут выбраны следующие файлы:

29 <ul><li>src/styles.scss</li>

30 <li>src/project/app/styles/app.scss</li>

31 <li>src/sass/mobile.scss</li>

32 </ul>и так далее.

33 Важно:при использовании метода с поиском файлов в различных директориях, при их переносе с помощью функции dest()Gulpсохраняет ту вложенность, которая была. Например, при выполнении прошлого примера файлsrc/project/app/styles/app.scssокажется по путиbuild/styles/project/app/styles/app.scss. Это важная особенность, которую стоит помнить для избежания ошибок при работе с проектом.

34 Это отлично работает, но есть одна существенная проблема - внутри нашегоsrcмогут находиться директории, из которых нет необходимости обрабатывать файлы. Например, директории с npm-пакетами. Чтобы уйти от этой проблемы вGlobsсуществует метод исключения директорий, который указывается через знак логического отрицания !. В таком случае нужные пути и исключаемые указываются в виде массива строк. Исключим из копирования директориюsrc/project:

35 Важно обратить внимание, что в конце исключаемой директории стоят символы /**. Они говорят о том, что необходимо исключить не только саму директорию, но и все вложенные в неё.

36 <h2>Pipe()</h2>

37 При просмотре последних примеров может возникнуть вопрос: "Что за pipe?". Перейдём к этому методу:

38 Если не вдаваться в тонкие подробности, то pipe() позволяет связывать потоки чтения и записи друг с другом. Если вернуться к примеру с копированием файлов, то именно с помощью pipe() появляется возможность получить файл и отдать его для последующей обработки функции dest().

39 Так же будет происходить и при обработке файлов с помощью плагинов, например при компиляции SASS в CSS. Чтобы связать всю цепочку одновременно необходимо использовать pipe().

40 В контексте работы с пакетомGulpможно выстроить типичную цепочку, или шаблон, задачи: