Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 На протяжении всего курса мы будем работать с файломgulpfile.js. Вспомним структуру проекта:

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

3 Обратите внимание, что файл находится в директорииlayout-project/, а неsrc/. Такие вещи очень важны, так как расположение файла влияет на то, как мы будем указывать пути. Если вы видите, что сборка не идёт, либо что-то идёт неправильно, то, в первую очередь, проверьте месторасположение файлаgulpfile.jsи путей, которые там прописаны. С такой проблемой можно встретиться, если вы скопировали файл из другого проекта.

4 Весь файлgulpfile.jsможно условно разделить на три части:

5 <ul><li>Подключение необходимых компонентов для работы</li>

6 <li>Функции-задачи, которые определяют операции</li>

7 <li>Экспорт задач по умолчанию</li>

8 </ul>Не стоит акцентироваться на этом, так как эти операции не расположить в другом порядке :)

9 Важно:в этом курсе будет использоваться код наJavaScript. Если вы не изучали этот язык, то, перед продолжением, пройдите курс<a>Введение в программирование</a>. Из этого курса вы узнаете базовые основы языка, изучите функции, подключение пакетов, экспорт функций. Всё это будет использоваться в Gulp

10 Создадим первую задачу на Gulp:

11 Что здесь происходит? Основная информация содержится в функции firstTask - это и есть та задача, которую сможет выполнить Gulp. Важно обратить внимание на переданный аргумент done. Не стоит вдаваться в то, откуда он берётся и что лежит внутри. Для нас важно, что это функция, которая вызывается в конце задачи для того, чтобы указать на её окончание.

12 Название задачи выбираете вы сами. Здесь нет каких-то ограничений, но старайтесь называть задачи понятно. Если в задаче происходит работа с CSS, то не надо называть задачуWindowsOmegaTask. Подробнее про именование можно прочитать в нашем блоге:

13 <ul><li><a>Совершенный код: именование в программировании</a></li>

14 <li><a>Совершенный код: ошибки именования в программировании I</a></li>

15 </ul>Внутри задачи вы можете производить различные действия, не обязательно связанные с преобразованием. Это могут быть и просто информативные задачи, как в примере выше. В этой задаче есть только вывод console.log(). Отсутствие ограничений позволяет разбивать большие функции и делать код удобным для чтения.

16 Чтобы Gulp мог запустить задачу, её необходимо экспортировать:

17 В этом примере экспорт идёт с именем default. И действительно, это задача по умолчанию, которую Gulp выполняет если запустить команду gulp в директории с проектом.

18 При выполнении задачи Gulp показывает не только результат выполнения задачи, но и дополнительную информацию:

19 <ul><li>Файлgulpfile.jsиз которого выполняется задача</li>

20 <li>Имя выполняемой задачи. В примере этоdefault</li>

21 <li>Время выполнение задачи</li>

22 </ul><h2>Экспорт задач</h2>

23 Не обязательно использовать только задачу default. Можно использовать произвольные названия задач, и, даже, экспортировать разные задачи с разными именами. Доработаем немного пример и рассмотрим вызов определённых задач:

24 В этом примере добавилось несколько новых вещей. Рассмотрим их подробнее

25 Здесь происходит подключение функции parallel() из пакетаGulp. Эта функция позволяет объединять несколько функций в одну задачу. Именно функция parallel() используется при экспорте задач в этом примере.

26 В этом примере экспортируются три задачи:

27 <ul><li>default - задача по умолчанию, которая выполняет три функции: sassCompile(), pugCompile() и imagesOptimize(). Для запуска задачи достаточно просто запустить gulp</li>

28 </ul><ul><li>layoutCompile - задача, вызывающая только функции, связанные с компиляцией файлов вёрстки. Для запуска задачи используется команда gulp layoutCompile</li>

29 </ul><ul><li>assetsOptimize - задача, вызывающая функцию imagesOptimize(). Для запуска задачи используется команда gulp assetsOptimize</li>

30 </ul>