Установка — Gulp

С точки зрения своего внутреннего устройства, Gulp — обычный npm пакет. Похожие пакеты вы уже использовали при работе с SASS, Pug, Bootstrap и каких-то неожиданностей здесь нет. Для установки Gulp нужно иметь установленный NodeJS и пакетный менеджер npm. Если вы ещё не сталкивались с этим, то перейдите к курсу JS: Настройка окружения.

Для установки Gulp воспользуемся двумя командами:

npm install gulp
npm install gulp-cli

В данном курсе мы будем использовать именно пакет gulp-cli, так как он даёт набор команд для работы внутри терминала. Узнать установленную версию можно командой gulp --version. В курсе будут использованы следующие версии:

npx gulp --version

CLI version: 2.3.0
Local version: 4.0.2

Можно заметить, что устанавливается не только сам gulp, но и специальная CLI-оболочка к нему, именно поэтому при использовании gulp --version показывается версии двух различных пакетов.

Важно: в этом курсе рассматривается Gulp 4, что показывается в Local version. Убедитесь, что после установки версия Gulp не ниже четвёртой. Если вы используете третью версию, то некоторые примеры из этого курса могут не работать или работать некорректно

Организация файлов проекта

На протяжении всего курса мы будем работать с «проектом» по вёрстке. Изменять, компилировать файлы и так далее. Для этого стоит создать такой проект, начав с файловой структуры, то есть с расположения и именования директорий и файлов.

Нет строгих стандартов по тому, как должна называться та или иная директория. Gulp так же не даёт правил на этот счёт, но есть устоявшиеся нормы. Одной из них является разделение проекта на версию для разработки и версию для выкладки на сайт. Версия для разработки часто называется src, а готовая версия build. Именно такие директории и будут содержаться в проекте.

При этом директорию build «руками» трогать мы не будем — там автоматически будут появляться файлы и директории после обработки таск-менеджером Gulp.

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

По мере изучения в этот проект будут добавляться новые файлы и каталоги. Таким образом, шаг за шагом, мы рассмотрим работу таск-менеджера Gulp и научимся настраивать его для конкретного проекта. В качестве практики вы можете создать свою структуру и менять примеры под свой проект. Так вы сможете углубиться в тему работы Gulp.

Обратите внимание, что в директории лежит файл gulpfile.js. Это центральная часть всего нашего курса, так как именно в этом файле мы будем программировать задачи и именно его будет искать пакет Gulp, который мы установили.

Самостоятельная работа

• Создайте директорию layout-project для своего проекта
• Установите таск-менеджер Gulp и проверьте, чтобы версия была не ниже 4.0
• Создайте приблизительную структуру вашего проекта. Вы можете придумать её самостоятельно или взять пример из урока. Главное — наличие отдельных директорий под версию для разработки и версию после работы таск-менеджера Gulp

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты