сборка gulp фрилансер по жизни
Современная сборка 2020 для frontend. Gulp4
Начало
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Поехали!
Начнем с главного в нашей сборке.
С pipe можно выстраивать любые цепочки.
Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task() :
Экспортирование функций позволяет разделять на публичные и приватные задачи.
Более подробная информация здесь, здесь и здесь.
Структура проекта
Если они не установлены, следуйте инструкциям здесь.
Создадим три папки:
Первые шаги
У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.
Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.
Новичкам советую обратить внимание еще на несколько возможностей:
Разделяем HTML
Разберем все более подробно.
Пройдемся по файлам:
Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.
Автоматизируем первую задачу
Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.
Стили
Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy
Пройдемся по каждому плагину:
Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки
Серьёзно и профессионально я начал заниматься вёрсткой в 2019 году, хотя до этого ещё со школы интересовался данной темой как любитель. Поэтому новичком мне себя назвать сложно, но и профессионалом с опытом 5+ лет я тоже не являюсь. Тем не менее, я успел познакомиться со сборщиком Gulp, его плагинами и сделал для себя хорошую, как по мне, сборку для работы. О её возможностях сегодня и расскажу.
ВАЖНО! В этой статье речь пойдёт о самой последней версии сборки. Если вы пользуетесь версиями сборки, вышедшими до публикации этой статьи, информация будет для вас не релевантна, но полезна.
Какие задачи решает эта сборка?
вёрстка компонентами (вам не нужно в каждую страницу копировать head, header, footer и другие повторяющиеся элементы, вплоть до кнопок или кастомных чекбоксов);
вёрстка с препроцессорами (SASS/SCSS);
конвертация шрифтов из ttf в eot, woff, woff2;
лёгкое (почти автоматическое) подключение шрифтов;
лёгкое (почти автоматическое) создание псевдоэлементов-иконок;
обработка изображений «на лету»;
минификация html/css/js файлов;
возможность вёрстки с использованием php;
выгрузка файлов на хостинг по FTP;
несколько мелких задач с помощью миксинов.
Собственно создание сборки
Начнём собирать нашу сборку (простите за тавтологию). Предварительно нам потребуется уже установленная на компьютере LTS-версия Node.js и NPM (входит в пакет Node.js) либо Yarn. Для нашей задачи не имеет значения, какой из этих пакетных менеджеров использовать, однако я буду объяснять на примере NPM, соответственно, для Yarn вам потребуется нагуглить аналоги NPM-команд.
После этого npm задаст нам несколько стандартных вопросов по типу названия проекта, автора, версии и т.д. Отвечаем на них как душе угодно. Для нашей задачи это не имеет никакого значения.
Далее будет намного удобнее работать через Visual Studio Code (поскольку у него есть встроенный терминал) или любой другой удобный вам редактор + терминал.
После того, как Gulp установился, имеет смысл создать в корне проекта управляющий файл gulpfile.js, в котором мы и будем писать задачи для сборщика.
После этого нам нужно подключить Gulp в нашем файле, для того чтобы он исполнялся. Это делается с помощью require:
Первая задача
Давайте проверим, всё ли мы правильно сделали. Создадим в директории tasks файл модуля с именем hello.js. В созданном файле напишем простейшую функцию, которая будет выводить в консоль строку «Hello Gulp!» (можете придумать что-то менее банальное, если хотите).
Теперь вернёмся в gulpfile.js и зададим там задачу hello:
Файловая структура
Теперь, когда мы создали первую функцию, можно подумать о том, какая структура будет у наших проектов. Я предпочитаю использовать директорию (папку) /src для хранения исходных файлов и директорию /build для готовых файлов проекта.
В директории src/ нам понадобятся следующие поддиректории:
Получиться в итоге должно приблизительно следующее:
Добавление задач и настройка плагинов
Основной целью Gulp является автоматизация рутинных действий в разработке, которые мы можем запрограммировать с помощью задач и плагинов. Первую тестовую задачу мы с вами уже написали. Давайте теперь напишем настоящие задачи, которые будут нам помогать в работе.
Задачи стилей
Теперь создадим в директории tasks/ файл модуля, в котором опишем, что нужно делать галпу с scss-файлами. От gulp нам понадобятся src и dest, а остальные плагины подключим полностью:
Далее экспортируем функцию:
Давайте определим порядок действий:
Взять файлы scss из директорий scss/
Инициализировать карту исходных файлов (sourcepams)
Скомпилировать в css
Расставить вендорные префиксы
Очистить от лишнего
Склеить в единый файл style.css
Записать карту исходных файлов в получившемся файле
Положить его в build
Итогом (return) нашей функции как раз и будет результат всей последовательности действий, которые мы определили. Это и запишем:
Пояснение каждой строки кода отдельно
С клинером вообще всё просто: выставляю уровень очистки (level) в значение 2 и готово.
Что такое bs и для чего он нужен я опишу ниже, в соответствующем разделе.
Как итог, в файле tasks/style.js у нас будет следующее:
Прогнать всё через sass
Подчистить неиспользуемый css (в библиотеках это особенно важно)
Сконкатенировать файлы в один
Сложить в директорию build/css
А так же нам понадобится плагин chalk для раскрашивания сообщения в консоли, чтобы мы обратили на неё внимание. Принципиально этот плагин не будет влиять на работу задачи, только разукрашивать консоль, примерно так:
В результате, файл tasks/libs_style.js будет выглядеть так:
Задачи для JavaScript
C JavaScript всё будет немного сложнее. Для разработки нам понадобится чистый, не редактированный и не минимизированный код. При этом, в готовом проекте мы будем прогонять код через babel, который не только приводит код к стандарту ES5, но и скоращает его, путём замены имён переменных и функций на более короткие (одно-двух символьные). Поэтому, нам потребуется три разные задачи: для нашего JS-кода, для плагинов/библиотек и для билда.
Для начала, опишем процесс работы с кодом:
Определить источники (sources)
Склеить в один файл
Минифицировать полученны файл
Записать источники в файл
Положить итоговый файл в build/js/
Теперь можем приступать к написанию файлов задач. Они будут максимально похожи друг на друга, поэтому нет смысла описывать каждый отдельно. Разница будет лишь в задаче build, как я уже писал выше.
Задачи для HTML/PHP
Устанавливаем gulp-file-include и пишем задачу для html:
Создадим аналогичную задачу для php. Абсолютно такую же, один в один., кроме исключений. Они нам в этой задаче не потребуются.
Задачи для изображений
Здесь всё будет несколько сложнее. Нам потребуется как минимум две задачи для svg, две для растровых изображений. Что нам нужно:
Сжимать растровые изображения.
Конвертировать растровые изображения в webp.
Объединять svg в спрайт.
Включать svg в виде класа с фоном в CSS и cоздавать для svg класс с псевдоэлементами ::after и ::before
Это всё мы будем делать разными задачами и тут нам понадобится просто тонна разных плагинов! Их так много, что я решил оформить их названия в отдельный список и убрать под спойлер.
Плагины для изображений
Теперь создадим webp-дубликаты этих изображений. Эти дубликаты мы будем делать одновременно и в директорию src, и в build, банально для того, чтобы path-intellisense подсказывал нам пути к ним.
Прежде всего, нам нужно очистить наш svg от всего лишнего. Для этого я буду использовать gulp-svgmin.
И так, мы будем брать файлы из директории src/svg/css и обрабатывать нашими плагинами, получая на выходе файл svg.scss и положим его в директорию src/scss/base. Полный файл этой задачи будет выглядеть так:
Теперь напишем задачу для svg-спрайта. Смысл спрайта в том, что он объединяет svg в один файл, который содержит набор векторных картинок. К этим картинкам можно обращаться по ID и вставлять их в нужное место с возможностью изменять их (например цвет) средствами css. Установим плагин gulp-svg-sprite и создадим под него вот такую задачу:
На выходе мы получим файл src/img/sprite.svg внутри которого и будут все наши svg. Обратиться к ним в html можно будет так: 
или так:
Если же иконка находилась во вложенной директории (например, как в нашем случае, в директории css), то перед именем файла нужно поставить имя этой директории и два дефиса. Вот так:
Чуть позже покажу ещё и третий способ вставлять svg в html с помощью сборки. Вы можете использовать любой из этих способов или их комбинировать, в зависимости от задач, которые нужно решить.
Задачи для шрифтов
Здесь у нас будет две задачи. Первая направлена на конвертацию шрифтов из формата ttf в форматы woff и woff2. Во всех остальных форматах в 2021 году не вижу никакого смысла, поскольку поддержка формата woff простирается аж до Internet Explorer 9. Давно ли вы видели компьютеры с IE9 на борту? Конвертиролвать будем с помощью двух плагинов: gulp-ttftowoff2 и gulp-ttf2woff, соответственно. Файл задачи для конвертации шрифтов будет выглядеть так:
В этот миксин нам нужно будет передать такие параметры:
На выходе мы получим уже подключенный файл шрифта, но с ним потребуются некоторые манипуляции вручную, которые я опишу чуть ниже.
Дальнейший код этой функции я честно скопировал у Максима Васяновича ( @MaxGraph ), с его урока про Gulp и немного переписал. В итоге, у нас получится вот такая функция:
Когда мы добавляем шрифты, чаще всего, у нас есть отдельные файлы для разной жирности шрифта и для разных стилей начертания (наклонные и прямые, тонкие и жирные и т.п.). Каждый такой файл шрифта создаст отдельный вызов миксина и на выходе мы получим файл src/scss/_local-fonts.scss примерно такого содержания:
Автоматическое обновление и синхронизация браузеров
Параметр host отвечает за IP-адрес компьютера, с которого сайт будет раздаваться на другие устройства в сети. Важно, чтобы там был указан именно IP-адрес вашего компьютера в локальной сети, если хотите иметь доступ к разрабатываемому сайту со всех устройств. Коллбэк-функция отвечает за открытие страницы 404, если она есть и если не найдена запрашиваемая (по умолчанию это страница index.html). Все остальные параметры вы вольны настраивать как вашей душе угодно, согласно документации.
Для php мы напишем гораздо более простую задачу. Она будет только обновлять браузер в случае изменений, а локальный сервер Вы будете запускать с помощью сторонней программы: openserver, wamp или любой другой.
Перезагружать страницу нам придётся при изменении html, scss и js, php, а так же растровых картинок. Соответственно, в эти задачи я уже добавил нужный pipe.
Обратите внимание на имя нашей функции. Поскольку переменная watch уже занята методом галпа, мы назвали свою функцию несколько иначе.
Вот и всё. Мы научили Gulp следить за файлами и выполнять те или иные задачи в тот момент, когда эти файлы изменились.
Деплой на хостинг по FTP
Написание GULP- и NPM-сценариев
Теперь нам нужно составить несколько gulp-сценариев, то есть поочерёдного запуска задач для того, чтобы собирать воедино наш проект.
Для этого у нас будет две gulp-задачи: default и php, с той лишь разницей, что мы будем запускать тот или иной сервер, а так же несколько сценариев npm для запуска разработки, запуска сборки проекта и для деплоя на хостинг.
Для начала нам необходимо задать все написанные ранее функции в gulpfile.js, чтобы они были доступны в gulp. Делать мы это будем так же, как мы делали с функцией hello:
После этого создадим сценарии, которые будем выполнять при запуске Gulp с теми или иными параметрами:
Итоговый gulpfile.js будет выглядеть так:
Теперь перейдём в файл package.json и напишем несколько npm-сценариев, которые будут последовательно выполнять задачи и запускать сборку. В объекте «scripts» мы можем задавать в формате ключ-значение имя и наборы задач для запуска. Я сделаю пять сценариев:
html будет запускать Gulp для разработки в html-версии;
php будет запускать Gulp для разработки в php-версии;
build будет поочерёдно запускать задачи для сборки проекта в build без запуска вотчинга и сервера;
build-ftp поочерёдно выполнит build и ftp сценарии.
Создание базовых шаблонов
Для разработки нам потребуются стартовые шаблоны html, кое-какие стили и несколько миксинов, которыми мы будем пользоваться в разработке. Начнём с html. Создадим индексный файл (index.html) со стандартной базовой разметкой:
Теперь уберём в компонент то, что будет повторяться на всех страницах:
. и подключим этот компонент вместо обычного head страницы:
_header.html
_footer.html
_scripts.html
И теперь подключим их все в индексный файл:
Теперь при запуске Gulp на выходе мы получим готовую страницу, с прописанным head, header, footer и подключенными скриптами. Если после запуска gulp посмотреть на индексный файл в директории build, то мы увидим вполне обычный html-файл:
build/index.html
Теперь перейдём к созданию базовых стилей. Для начала, я подключу все необходимые директории с файлами в style.scss. Здесь важен порядок импорта стилей, поскольку стили, которые будут ниже в итоговом файле имеют приоритет:
Далее создам в директории src/scss/base файл _01_normalize.scss Именно так: с подчёркиванием и номером файла. Это нужно для того, чтобы стили из этого файла оказались в самом верху и их можно было перебить другими стилями, если это понадобится. Далее в этот файл я скопирую стили из normalize.css. Безусловно, можно подключить normalize в качестве плагина, но я выбрал именно этот способ, в том числе, для демонстрации принципов подключения файлов со стилями.
Теперь перейдём к файлу src/scss/base/_mixins.scss. Добавим сюда несколько миксинов, чтобы было удобно задавать быстрые стили:
Этот миксин поможет нам с фоновыми картинками. Достаточно нужному классу написать @include bg и на выходе мы получим вот это:
Далее идёт миксин для сброса стилей кнопки. Очень часто такой необходим.
Следующий миксин достаточно спорный, но я исплоьзую. Он делает transition:
И ещё один миксин для контейнеров:
Теперь перейдём в файл src/scss/global/_global.scss и создадим несколько «служебных» классов и общих стилей. Я и не припомню проекта, где они не были бы мне нужны.
Во-первых, установим box-sizing: border-box для всех элементов страницы:
Во-вторых, распишем стили для флексов:
В-третьих, для html и body заранее установим некоторые стили:
И далее момент спорный, но я использую. Это сброс отступов у некоторых блочных элементов:
И того, у нас должны получиться файлы:
Вот, собственно и всё. Поздравляю! Наша сборка готова к работе.
Краткое howto
Первое что следует сказать, что с помощью @@include-функции вы можете вставлять не только html файлы, но и любые другие, в которых есть текстовая информация. Например, вы можете вставлять инлайновые svg в html, не загромождая код.
Третье. Старайтесь дробить свой код на как можно большее количество компонентов. Так вам будет удобнее разрабатывать свои проекты. В директории components можно создавать вложенные директории, в которых хранить шаблоны html, scss и js отдельного компонента (например, слайдера). Scss и js из этой директории подтянутся в выходные файлы, можете об этом не переживать.
Вместо послесловия
Если вы дочитали аж до сюда, значит статья была для вас интересной и познавательной. Поэтому, пожалуйста, пройдите по этой ссылке и поставьте звезду моей сборке. Вам это 10 секунд времени, а мне будет приятно и я буду понимать, что есть запрос на дальнейшее развитие сборки.
Если же Вы знаете, как можно улучшить сборку, отрефакторить какую-то задачу, то напишите об этом в комментариях, а лучше, оставьте свой pull-request в репозитории. Я всегда открыт к улучшениям и готов обсуждению.
Современная сборка 2020 для frontend. Gulp4
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Поехали!
Начнем с главного в нашей сборке.
С pipe можно выстраивать любые цепочки.
Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task() :
Экспортирование функций позволяет разделять на публичные и приватные задачи.
Более подробная информация здесь, здесь и здесь.
Структура проекта
Если они не установлены, следуйте инструкциям здесь.
Создадим три папки:
Первые шаги
У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.
Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.
Новичкам советую обратить внимание еще на несколько возможностей:
Разделяем HTML
Разберем все более подробно.
Пройдемся по файлам:
Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.
Автоматизируем первую задачу
Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.
Стили
Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy
Пройдемся по каждому плагину: