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

 

 

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

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

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

Особенности

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

Установка

Установите Yarn.

Yarn — это современная альтернатива npm. Yarn работает с тем же файлом package.json и так же скачивает необходимые модули в папку node_modules, но делает это намного быстрее.

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

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

Что включает в себя сборка?

  • browser-sync — живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта
  • webpack-stream — интеграция Webpack с Gulp
  • bem-tools — инструменты для работы с файлами по методологии БЭМ
  • eslint — линтер для JS-файлов
  • gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use
  • gulp-uglify — минификация JS-файлов
  • gulp-sass — компиляция SCSS в CSS
  • gulp-group-css-media-queries — группировка @media
  • gulp-clean-css — минификация CSS-файлов
  • gulp-sourcemaps — карта стилей
  • gulp-rename — переименование файлов, добавление суффиксов и префиксов (например, добавление суффикса .min к минифицированным файлам)
  • gulp-imagemin — сжатие изображений PNG, JPG, GIF и SVG (включая дополнительные плагины для оптимизации)
  • gulp-webp — конвертация изображений в современный формат WebP
  • gulp-favicons — генератор фавиконок для вашего проекта
  • gulp-if — запуск заданий только тогда, когда это нужно
  • gulp-svg-sprite — создание SVG-спрайтов
  • gulp-replace — замена строк
  • gulp-rigger — позволяет вставлять содержимое из отдельных файлов в основной
  • gulp-plumber — оповещения в командной строке (например, ошибки в SCSS/Sass)
  • gulp-debug — отладка в терминале
  • gulp-watch — отслеживание изменений в ваших файлах проекта
  • gulp-clean — удаление файлов и папок
  • yargs — получение аргументов командной строки в Node.js.

Режим разработки

Исходники

  • HTML-файлы находятся в папке src/views
    • компоненты (например, спрайты или формы) к HTML-файлам находятся в src/views/components
    • остальные компоненты (например, шапка, футер) могут находиться в src/views/layouts
  • SCSS-файлы находятся в папке src/styles
    • основные компоненты (типография, переменные, миксины) к SCSS-файлам находятся в src/styles/base
    • компоненты (например, спрайты, кнопки) находятся в src/styles/components
    • остальные компоненты (от других разработчиков) находятся в src/styles/vendor
  • JS-файлы находятся в папке src/js
  • Изображения находятся в папке src/img
    • векторные изображения для создания спрайтов находятся в src/img/icons/svg
    • единичное изображение для генерации фавиконок находится в src/img/icons/favicon.png (данное изображение может иметь формат .jpg.png или .gif)

Готовые файлы

  • HTML-файлы находятся в папке dist/;
  • минифицированные CSS-файлы находятся в папке dist/styles;
  • минифицированные JS-файлы с поддержкой ES6 находятся в папке dist/js;
  • сжатые изображения находятся в папке dist/img.

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

gulp-scss-starter
├── dist
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── pages
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
└── .gitignore
  • Корень папки:
    • .babelrc.js — настройка ES6
    • .bemrc.js — настройка БЭМ
    • .eslintrc.json — настройка ESLint
    • .gitignore – запрет на отслеживание файлов Git’ом
    • gulpfile.babel.js — настройки Gulp
    • webpack.config.js — настройки Webpack
    • package.json — список зависимостей
  • Папка src — используется во время разработки:
    • БЭМ-блоки: src/blocks
    • шрифты: src/fonts
    • изображения: src/img
    • JS-файлы: src/js
    • страницы сайта: src/pages
    • SCSS-файлы: src/styles
    • HTML-файлы: src/views
    • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
  • Папка dist — папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)

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

  • придерживайтесь изначальной структуры папок и файлов
  • придерживайтесь компонентного подхода к разработке сайтов
    • каждый БЭМ-блок имеет свою папку внутри src/blocks/
    • папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
    • HTML-файл блока импортируется в файл src/views/index.html
    • SCSS-файл блока импортируется в файл src/blocks/_blocks.scss, который в свою очередь импортируется в файл src/styles/main.scss
    • JS-файл блока импортируется в src/js/import/blocks.js, который в свою очередь импортируется в файл src/js/index.js
  • из всех SCSS-файлов компилируется только main.scss. Остальные стилевые файлы импортируются в него
  • страницы сайта находятся в папке src/pages
    • главная страница: src/views/index.html
  • шрифты находятся в папке src/fonts
  • изображения находятся в папке src/img
    • изображение для генерации фавиконок должно находиться в папке src/img и иметь размер не менее 100px x 100px
  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой yarn add package_name
    • для подключения JS-файлов библиотек импортируйте их в JS-файл БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
     import $ from "jquery";
    • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/_libs.scss (который в свою очередь импортируется в файл src/styles/main.scss)
  • в вёрстку подключаются только минифицированные CSS и JS-файлы.

БЭМ

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

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);
    }
}

WebP

В сборщик включена поддержка WebP. WebP — это формат графики, разработанный Google в 2010 году. Он был создан как альтернатива PNG и JPG и отличается от них гораздо меньшим размером при том же качестве изображения. Подробная информация по использованию тут.

Нужен Pug + SCSS?

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

 


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