Сборка gulp для верстки

Современная Frontend разработка предполагает использование препроцессора стилей SCSS или LESS, препроцессора и шаблонизатора HTML — Pug, сжатие изображение, JS и CSS файлов, в целях оптимизации загрузки веб-страниц и многоe многое другое. Чтобы упросить этот процесс, мы предлагаем вам воспользоваться сборкой проектов Gulp 4, которую постоянно совершенствует Андрей Горохов. Ниже будут представлены ссылки на скачивание, а пока пройдемся по основным моментам: описанию и установке.

Сборщик проектов Gulp

Gulp — это сборщик проектов, инструмент для автоматизации задач, которые описаны выше. Он поможет вам ускорить вашу работу и грамотно подготовить проект к релизу.

Скачать сборку можно с репозитория Github или через командную строку Git. В дальнейшем вы сможете настроить её под свои задачи.

Особенности

• именование классов по БЭМ
• используется БЭМ-структура
• используется препроцессор SCSS
• используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
• используется Webpack для сборки JavaScript-модулей
• используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
• используется жёсткий кодгайд

Установка

• установите NodeJS (если требуется) и Yarn
• скачайте сборку с помощью Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• установите gulp глобально: yarn global add gulp-cli
• перейдите в скачанную папку со сборкой: cd gulp-scss-starter
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn run dev (режим разработки)
• чтобы собрать проект, введите команду yarn run build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

Если у тебя возникли проблемы с установкой, то посмотри этот ролик:

Файловая структура

• Корень папки:

• .babelrc.js — настройки Babel
• .bemrc.js — настройки БЭМ
• .eslintrc.json — настройки ESLint
• .gitignore – запрет на отслеживание файлов Git’ом
• .stylelintrc — настройки Stylelint
• .stylelintignore – запрет на отслеживание файлов Stylelint’ом
• gulpfile.babel.js — настройки Gulp
• webpack.config.js — настройки Webpack
• package.json — список зависимостей

Папка src — используется во время разработки:

БЭМ-блоки: src/blocks

шрифты: src/fonts

изображения: src/img

JS-файлы: src/js

страницы сайта: src/views/pages

SCSS-файлы: src/styles

HTML-файлы: src/views

конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess

Папка dist — папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev )

Папка gulp-tasks — папка с Gulp-тасками

Команды

• yarn run lint:style — проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks — Style Sheets — Stylelint (ошибки будут исправлены автоматически при сохранении файла)
• yarn run lint:style —fix — исправить ошибки в SCSS-файлах
• yarn run dev — запуск сервера для разработки проекта
• yarn run build — собрать проект с оптимизацией без запуска сервера
• yarn run build views — скомпилировать Pug-файлы
• yarn run build styles — скомпилировать SCSS-файлы
• yarn run build scripts — собрать JS-файлы
• yarn run build images — собрать изображения
• yarn run build webp — сконвертировать изображения в формат .webp
• yarn run build sprites — собрать спрайты
• yarn run build fonts — собрать шрифты
• yarn run build favicons — собрать фавиконки
• yarn run build gzip — собрать конфигурацию Apache

Рекомендации по использованию

Компонентный подход к разработке сайтов

• аждый БЭМ-блок имеет свою папку внутри src/blocks/modules
• папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)

• HTML-файл блока импортируется в файл src/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)
• SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
• JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду bem create my-block — для создания папки БЭМ-блока, где my-block — имя БЭМ-блока

Страницы проекта

• страницы проекта находятся в папке src/views/pages

• главная страница: src/views/index.html

Шрифты

• шрифты находятся в папке src/fonts

• используйте форматы .woff и .woff2
• шрифты подключаются в файл src/styles/base/_fonts.scss
• сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

• изображения находятся в папке src/img

• изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px
• изображения автоматически конвертируются в формат .webp . Подробная информация по использованию тут.

Сторонние библиотеки

• все сторонние библиотеки устанавливаются в папку node_modules

• для их загрузки воспользуйтеcь командой yarn add package_name
• для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:

• для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
• JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

⚠️ Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:

• по пути src/js/import создать папку pages
• в папке pages создать js-файл для страницы, например, pageA.js , и импортировать туда библиотеку, которая будет использоваться только на этой странице

• аналогично проделать шаг для дополнительных страниц

в файле webpack.config.js в точку входа добавить js-файлы страниц, пример:

• подключить скомпилированные js-файлы на необходимых страницах

В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. Пример использования:

SCSS

Результат

Нужен SCSS + Pug?

Данная сборка постоянно дорабатывается и улучшается, поэтому всю самую актуальную информацию вы найдете в Github репозитории. Будем рады предложениям, пишите их в телеграм чат. Там вы обязательно найдете автора сборки Андрея Горохова.

Основный список инструментов

Список инструментов, посредством которых создадим окружение для разработки фронтенд составляющей проекта (сайта):

• Node.js (среда для выполнения JavaScript приложений);
• npm (пакетный менеджер, входящий в Node.js, его будем использовать для загрузки Gulp, плагинов к нему и Bower);
• Git (система контроля версий, необходима для работы Bower);
• Bower (пакетный менеджер, будем использовать для загрузки таких библиотек как Bootstrap, jQueryи Popover);
• Gulp (инструмент, который будем использовать для сборки проекта и выполнения других веб задач).

Файловая структура проекта

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого он её создаёт.

В данном уроке будем придерживаться следующей структуры:

Bootstrap 4 — Файловая структура проекта, сборку которого будем осуществлять с помощью Gulp

Для этого в корне проекта создадим папку assets , файлы gulpfile.js (будет содержать задачи для сборщика проекта Gulp) и .bowerrc (конфигурационный файл для менеджера Bower с помощью которого будем загружать Bootstrap, jQuery и Popper). В папке assets создадим ещё 2 папки: src (для исходных кодов), build (для готовых файлов, их в эту папку будет помещать сборщик Gulp). В папке src создадим ещё 6 каталогов ( bower_components , fonts , img , js , style и template ) и 1 файл ( index.html ).

Директорию bower_components отведём под компоненты, которые будем загружать с помощью Bower.

Директорию fonts будем использовать под шрифты.

В директорию img будем помещать исходные файлы изображений.

Директорию js будем использовать для js-файлов: main.js и my.js . Файл my.js будем использовать для написания своих скриптов, а main.js – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге build ).

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, можно, например, с помощью дополнительного SCSS файла main.scss . Другими словами именно с помощью этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к данному файлу можно также подключить файл с переопределёнными переменными Bootstrap, а также SCSS файл (например, my.scss ), в котором вы будете описывать свои стили.

Содержимое файла main.scss (пример):

Список js-файлов (находятся в каталоге ./js/dist/ ):

Определять какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, будем посредством main.js .

Импортирование нужных файлов в main.js будем осуществлять посредством Gulp плагина gulp-rigger(он будет установлен и подключен к проекту позже), используя следующую конструкцию:

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и свои js-файлы.

Содержимое файла main.js (пример):

Установка инструментов

Установим инструменты "Node.js", "Git", "Gulp" и "Bower". С помощью их будем создавать окружение для комфортной разработки фронтенд проекта.

Установка Gulp. Для установки Gulp необходимо открыть командную консоль и выполнить в ней команду:

Ключ -g указывает npm, что пакет необходимо загружать не в текущую, а в основную папку.

Установка Bower. Установка Bower выполняется также как и Gulp.

Инициализация проекта и установка зависимостей

Начинается разработка проекта обычно с создания файла package.json (манифеста).

Файл package.json будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:

Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:

Ключ —save-dev необходим, чтобы при установке пакета, информация о нём, автоматически прописывалась в секцию devDependencies файла package.json .

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

Если вы не хотите выполнять все перечисленные действия, то достаточно создать в корневой папке файл package.json с вышепредставленным содержимым и ввести команду:

После этого все зависимости проекта будут установлены автоматически.

Инициализация Bower и установка зависимостей

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:

Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Создание сборщика проекта (gulpfile.js)

Все действия, выполненные до этого, были подготовительными. Весь функционал, который будет выполнять создаваемое окружение, будет определяться файлом gulpfile.js .

Файл gulpfile.js представляет собой список задач, которые будут выполнять следующие действия:

• сбор нескольких файлов стилей в один, компиляция полученного scss в css, добавление автопрефиксов, минимизация CSS и создание source map;
• импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
• сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

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

Откроем файл gulpfile.js и вставим в него следующее содержимое:

Код файла gulpfile.js содержит большое количество комментариев. С помощью них, если потребуется, можно будет очень просто разобраться с тем, что выполняет та или иная часть кода.

Синтаксис создания задач на Gulp очень прост:

Функционал же задачи в большинстве случаев состоит из следующих действий:

• выборки исходных файлов;
• вызова различных плагинов, которые делают что-то с этими файлами;
• выгрузки полученных файлов в папку назначения.

Как использовать окружение

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp.

После ввода этой команды запустится задача по умолчанию ( default ). Эта задача запустит задачи build , webserver и watch . Задача build осуществит сборку проекта для продакшена. Все полученные файлы она поместит в папку build . Задача webserver запустит локальный веб-сервер с «живой перезагрузкой» страниц. Задача watch будет отслеживать изменения исходных файлов в папке src и автоматически запускать необходимые задачи. В результате содержимое папки build всегда будет находиться в актуальном состоянии.