gulp-scss-starter

Если вам нравится то, что я делаю, был бы рад поддержке в виде любой суммы 🍺

Особенности

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

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

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

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)

БЭМ

В сборке используется компонентный подход к разработке сайтов по методолгии БЭМ, когда каждый БЭМ-блок имеет свою папку, внутри которой находятся один 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 и отличается от них гораздо меньшим размером при том же качестве изображения. Подробная информация по использованию тут.

Нужен SCSS + Pug?

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

Контакты

ВКонтакте: @andreyalexeich
Telegram: @andreyalexeich

DenisAvilov/gulp-scss-starter