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

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

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

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

• 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.

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