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

Настройка сборщика для сборки Pug/Stylus, создания SVG-спрайтов и ещё чего-то там. Если интересно — читай.

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

Посмотреть, поковырять, скачать себе мою сборку можно с GitHub.

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

Установка.

Скачиваем gulpfile.js, package.json и mkdir.bat.

  1. Переходим в папку с проектом, на Windows удерживаем Shift и кликаем правой кнопкой где-нибудь в папке, выбираем «Открыть окно команд». Открывается командная строка. Вводим «npm install», ждём пока плагины из package.json установятся.
  2. Чтобы вручную не создавать папки, запускаем mkdir.bat и скрипт сам всё создаёт.
  3. Чтобы использовать TinyPNG, регистрируемся у них на сайте, получаем ключ и вводим его в gulpfile.js в таске «tinypng».

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

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

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

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

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

Deploy.

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

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь