Сборщик проектов Gulp 4 | Типичный верстальщик

Современная 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
установите bem-tools-core глобально: yarn global add bem-tools-core
перейдите в скачанную папку со сборкой: cd gulp-scss-starter
скачайте необходимые зависимости: yarn
чтобы начать работу, введите команду: yarn run dev (режим разработки)
чтобы собрать проект, введите команду yarn run build (режим сборки)

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

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

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

gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

Корень папки:
- .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

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

blocks
├── modules
│   ├──header
│   │   ├── header.html
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать команду 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-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
```
import $ from "jquery";
```
- для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
- JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

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

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

entry: {
    main: "./src/js/index.js",
    pageA: "./src/js/import/pages/pageA.js",
    pageB: "./src/js/import/pages/pageB.js"
}

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

CSS-сетка smart-grid

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

SCSS

.items{
    @include row-flex();
    @include md(justify-content, center);
 
    .item{
        @include col();
        @include size(3);
        @include size-md(5);
        @include size-xs(10);
    }
}

Результат

.items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.items .item {
    box-sizing: border-box;
    margin-left: 15px;
    margin-right: 15px;
    word-wrap: break-word;
    width: calc(100% / 12 * 3 - 30px);
}
@media screen and (max-width: 992px) {
    .items {
        justify-content: center;
    }
    .items .item {
        width: calc(100% / 12 * 5 - 30px);
    }
}
@media screen and (max-width: 576px) {
    .items .item {
        width: calc(100% / 12 * 10 - 30px);
    }
}

Нужен SCSS + Pug?

Используйте эту сборку.

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