Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gulp.js

Объединяем Pattern Lab c Gulp

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Работаете-ли вы, или ваша команда со стайлгайдами (styleguides, руководства стилей)? Есть-ли у вас документация к вашим модулям? Если нет, не переживайте. В данном туториале я покажу одну из возможностей, как улучшить продуктивность работы в команде. Мы рассмотрим концепции предложенные Brad Frost и Dave Olsen, используя Pattern Lab для создания стайлгайдов и настроим Gulp для обработки ресурсов. Давайте начнём!

Что такое Gulp?

Gulp.js - система сборки, в своей основе использующая стримы. Важная концепция данного инструмента - у вас есть стримы, для которых вы указываете различные действия, которые необходимо совершить над файлами. Это быстрее чем делать все действия вручную, сохраняет уйму времени и нервов. К примеру, в этом туториале мы пропустим все наши Sass файлы через так называемый pipe (процесс, поток, программный канал):

  • скомпилируем Sass в CSS,
  • объединим CSS файлы,
  • минифицируем результат,
  • и перенесём его в другое место

Чтобы узнать больше об основах Gulp, взгляните на путеводитель для начинающих от Kezz Bracey's - Командная строка в веб-дизайне: автоматизация с Gulp.

Что такое Pattern Lab?

Pattern Lab - концепция о создании систем атомного дизайна (atomic design systems); создание модулей вместо создания непосредственно страниц. Данная концепция определяет несколько составных частей:

  • атомы
  • молекулы
  • организмы
  • шаблоны
  • страницы

Вы начнёте с самого маленького элементы и со временем создадите более крупные части, пока не будут созданны целые страницы. Подобный подход сохранит вам время, позволит продуктивно взаимодействовать с другими членами команды, а также гарантирует цельную структуру.

Атомы

Атомы не могут быть разбиты на более мелкие составляющие.

Это самые простые блоки, включая фундаментальные теги (к примеру списки), цвета, шрифты, анимации и так далее.

Молекулы

Молекулы - группы различных элементов (атомов), которые функционируют вместе подобно единому модулю.

К примеру, тизер с заголовком, изображение, параграф, а также ссылка "Читать полностью". Одиночные элементы объединённые вместе представляют из себя молекулу; часть более сложной и крупной системы.

Организмы

Организмы - группы элементов (атомов и молекул) и работают подобно разделам, секциям вашего веб-сайта.

Представьте, к примеру, шапку сайта. Это более крупная система, построенная из молекул, таких как форма поиска и навигация, обе из которых были созданы из более мелких атомов.

patternlab header organism
Организм - шапка Pattern Lab, показан на маленьком экране

Изучите примеры интерфейса и почувствуйте что представляет из себя вся система.

Приступим к магии!

Теперь пришло время соединить обе этих системы и настроить рабочий процесс для вашей команды. Pattern Lab предоставит нам HTML и простые элементы интерфейса, Gulp же в свою очередь будет обрабатывать необходимые нам ресурсы.

Ключевые особенности:

  • Компиляция Sass (с помощью Libsass)
  • Сервер (Browser-Sync)
  • Livereload
  • Минификация (Javascript, CSS и изображений)
  • Развёртывание на удалённом сервере
    • Обновление номера версии
    • Теги
    • Отправка файлов и тегов в конечное место назначения (endpoint)
    • Отправка файлов с помощью rsync на сервер

Введение

Перед тем как использовать Gulp у вас должен быть установлен node.js, на компьютере. Если его нет, взгляните на статью Kezz Bracey - Командная строка для веб-дизайна: работа со сторонними библиотеками, там вы найдёте инструкции по установке.

Давайте начнём установив глобально Gulp.js. В терминале введите:

Теперь нам надо клонировать репозиторий Patternlab, чтобы у нас была основа, с которой можно работать.

Далее нам нужно настроить задачи (tasks) в gulp файле. Создайте gulpfile.js в корне нашего проекта. После этого нам нужен конфигурационный файл, где мы указываем все пути, так что создайте в этой папке также build.config.json.

Помимо этого нам понадобятся следующие файлы:

  • .bowerrc
  • package.json
  • bower.json

После всех начальных шагов, мы будем обладать основной структурой нашего проекта. Теперь давайте начнём описывать необходимые нашему рабочему процессу задачи.

Начнём с Gulpfile

На верху файла gulpfile.js мы запрашиваем (require) каждую зависимость. После установки плагина, вам нужно "запросить" его и дать ему имя.

Начнём с gulp и нашего файла конфигурации, в котором указаны все пути и настройки.

Во время процесса разработки нам не нужно минифицировать код (это пустая трата времени до тех пор, пока мы не будем готовы отправлять проект на сервер). Благодаря переменной production мы можем включать и выключать определённые задачи. Позже вы увидите это в действии.

Теперь когда всё настроено, мы можем начать описывать задачи, которые помогут нам во время разработки!

Задача 1: отчистка всех ресурсов 

Если удалить изображение из папки "source/", можно заметить что в папке "public/" также есть копия данного изображения. По причине подобного дублирования, нам нужно выполнить небольшие шаги, чтобы убрать изображение из "public/".

Задача 2: обработка скриптов

При переносе проекта на сервер, важно иметь лишь один файл со всеми скриптами. Для этого мы используем плагин под названием gulp-concat и объединим все скрипты в application.js файл. Если переменная production равна true, тогда application.js будет минифицирован и получит новое имя: application.min.js.

Задача 3: шрифты

Эта задача отправит все шрифты в папку public. И ничего больше.

Задача 4: изображения

Для этого шага нам понадобится плагин gulp-imagemin. Как только мы его запросим, можно будет его использовать для сжатия изображений. Данная задача уменьшит размер изображения и положительно повлияет на производительность.

Если переменная production равна true, в этом случае все изображения будут сжаты. После того как это будет сделано, мы перенесём их в конечную папку.

Задача 5: обработка Sass

Давайте установим и добавим зависимости gulp-sass и gulp-cssmin.

Теперь мы возьмём все файлы, используем плагин Sass для компиляции их в CSS, после чего, если переменная production равна true, cssmin выполнит свою работу.

Задача 6: сервер Pattern Lab

У Pattern Lab есть собственный сервер, который можно запустить простой командой. Для запуска данной команды нам понадобится плагин gulp-shell.

На этом этапе мы скопируем папку styleguide из core в public. Теперь вы сможете увидеть в браузере целостный фронтенд.

Задача 7: запуск сервера и отслеживание файлов

Pattern Lab имеет встроенный сервер, но Browser-Sync меняет CSS без перезагрузки страницы.

Watch позаботится об отслеживании изменений и будет запускать определённые задачи. После этого browser-sync обновит страницу в браузере.

Мы указали файлы для watch и указали необходимые задачи, которые сработают во время события изменения файлов.

Задача 8: задача по умолчанию

После запуска команды gulp в командной строке будет запущена задача по умолчанию. Но перед тем как Gulp запустит её, будет произведена отчистка (clean:before), тем самым будет удалены файлы в папке public.

Задача 9: начальный процесс

Давайте создадим задачу для создания стайлгайда, без минификации ресурсов. Будет запущен browser-sync, обработаны все ресурсы, после чего запустится отслеживание изменений файлов.

Задача 10: публикация и теги

Для этой задачи нам потребуются несколько новых плагинов.

  • Плагин gulp-bump для обновления номера версии.
  • gulp-filter позволит вам получить определённый файл из стрима
  • gulp-git позволяет использовать git команды в gulp
  • И gulp-tag-version для генерации тега.

Теперь мы опишем gulp-task под названием release, зададим переменную production равную true (в данном случае потребуется минификация) и откроем стрим. Необходимо взять все файлы с номером версии, использовать плагин bump, также указать тип версии (patch, minor или major) с помощью параметра командной строки.

Если выполнить release-task без типа версии, тогда gulp-bump выдаст - x.x.1. После этого мы перенесём файлы в корень проекта и закоммитим изменения. Теперь пришло время сгенерировать новый тег проекта. В этом случае потребуется файл package.json, чтобы получить текущую версию для нового тега.

Ну и наконец, мы отправим все файлы и теги в репозиторий origin, используя какую захочется ветку.

Задача 11: развёртывание на сервере

Мы можем отправить все файлы на сервер с помощью rsync; данный подход очень быстр и удобен. Введите gulp deploy в терминале и после нескольких секунд, ваш локальный проект окажется на сервере. Не нужно вручную перетаскивать файлы и папки. Следует всё что можно автоматизировать. Хост и путь к папке, которую хотите отправить на сервер в build.config.js.

Конечный Gulpfile

Вы написали так много кода и вот вам финальный результат! Если захотите можно поместить каждую задачу в отдельный файл. Чтобы не усложнять, в данном туториале мы описали все задачи в одном gulp файле:

Файл конфигурации

Теперь укажем необходимые пути в файле с конфигурацией. Данный файл служит в качестве указателя путей и различных настроек проекта:

Заключение

Я люблю работать с комбинацией Gulp и Pattern Lab. Мне довелось работать в различных командах и создавать подобную основу для каждого проекта. Отзывы от других членов команды всегда были положительны в связи с простотой данного процесса. Каждый может воспользоваться цельной основой проекта, выбрать необходимый модуль и использовать его. Для отзывов и вопросов используйте форму для комментариев ниже.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.