Gulp: инструкция для начинающих

Этой статье сто лет в обед. Возможно, что-то изменилось/сломалось/отвалилось. Имей в виду.

Рассказывать про то, что такое Gulp, как установить Node.js и прочее не буду. Инфы итак вагон и маленькая тележка. Лучше сфокусируемся на нужном.

1. Что используется и что происходит?

  • Шаблонизатор — Pug(Jade), файлы компилируются в обычный HTML.
  • Препроцессор — Stylus, так же компилируются в обычный CSS.
  • С помощью autoprefixer, в стилях расставляются префиксы.
  • Стили и JS собираются, минимизируются.
  • SVG-иконки собираются в спрайт.
  • Шрифты конвертируются из ttf в woff и woff2.
  • Картинки оптимизируются через TinyPNG (нужно зарегистрироваться и указать ключ).
  • Используется browser-sync. При изменении каких-то файлов, страница автоматически перезагружается.
  • Если допустить ошибку в .styl/.pug — выводится ошибка.
  • Gulp следит не только за изменением файлов, но и за добавлением новых.

2. Что там по папкам?

У меня файловая структура имеет такой вид:

  • dev
    • blocks
      • _mixins
    • fonts (шрифты в формате ttf)
    • images
      • icons (SVG-иконки для спрайта)
    • js
    • libs
    • pages
    • styles
      • helpers
  • public
    • css
    • fonts
    • images
    • js

Все задачи делятся на две категории. Задачи из первой используются при разработке и постоянно выполнятся. Из второй (конвертация шрифтов, оптимизация картинок, минификация CSS/JS) — запускаются один раз, после окончания разработки.

Давайте пробежимся по gulpfile.js и посмотрим какие таски что делают.

BrowserSyns.
Запукает сервер, при изменении каких-то файлов — перезагружает страницу.

Images/Fonts/Scripts.
Переносит картинки, шрифты и скрипты.

Pages.
Компилирует .pug файлы в HTML.

Styles.
Компилирует стили (использую stylus), расставляет префиксы.

SvgSpriteBuild.
Собирает спрайт из SVG-иконок из папки images/icons.

TinyPNG.
Прогоняет jpg, jpeg, png файлы через сервис TinyPNG.

ttf2woff/ttf2woff2.
Генерирует woff и woff2 файлы из ttf.

cssMin/jsMin.
Минифицирует CSS/JS файлы и сохраняет их с суффиксом «.min».

Рабочий процесс

В командной строке вводим «gulp». По умолчанию, gulp запускает сервер, открывает в браузере страницу, компилирует и переносит всё, что надо и начинает следить за изменением файлов.

Кроме того, gulp следит не только за изменением файлов, но и за добавлением новых. То есть, если вы создали новую страницу, файл стилей или скриптов или добавили новую иконку, не нужно перезагружать всё. Gulp автоматом их подхватит.

Так же создастся SVG-спрайт. ID для элементов спрайта берутся из названий файлов иконок (как использовать и как создавать его вручную писал тут).

Создаём pug-страницы в /dev/pages, styl-стили — в styles, SVG-иконки кидаем в /images/icons, а шрифты, в формате ttf, — в папку /fonts.

Deploy

После окончания вёрстки, вводим команду «gulp deploy». TTF-шрифты в папке конвертируются в woff и woff2, картинки прогонятся через TinyPNG (нужно предварительно зарегистрироваться у них на сайте, получить клюс и ввести его в gulpfile.js), а CSS и JS — минимизируются.

Комментариев ещё нет. Оставьте первый!