git clone https://github.com/andreyalexeich/gulp-scss-starter.gitgulp глобально: yarn global add gulp-clibem-tools-core глобально: yarn global add bem-tools-corecd gulp-scss-starteryarnyarn 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 — настройки Gulpwebpack.config.js — настройки Webpackpackage.json — список зависимостейsrc - используется во время разработки:
src/blockssrc/fontssrc/imgsrc/jssrc/views/pagessrc/stylessrc/viewssrc/.htaccessdist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)gulp-tasks - папка с Gulp-таскамиyarn run lint:styles - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm
или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint (ошибки будут исправлены автоматически при сохранении файла)yarn run lint:styles --fix - исправить ошибки в SCSS-файлахyarn run lint:scripts - проверить JS-файлыyarn run lint:scripts --fix - исправить ошибки в JS-файлахyarn run dev - запуск сервера для разработки проектаyarn run build - собрать проект с оптимизацией без запуска сервераyarn run build:views - собрать HTML-файлыyarn run build:styles - скомпилировать SCSS-файлыyarn run build:scripts - собрать JS-файлыyarn run build:images - собрать изображенияyarn run build:webp - сконвертировать изображения в формат .webpyarn run build:sprites- собрать спрайтыyarn run build:fonts - собрать шрифтыyarn run build:favicons - собрать фавиконкиyarn run build:gzip - собрать конфигурацию Apacheyarn run bem-m - добавить БЭМ-блокyarn run bem-c - добавить компонентsrc/blocks/modulessrc/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)src/blocks/modules/_modules.scsssrc/js/import/modules.jsПример структуры папки с БЭМ-блоком:
blocks
├── modules
│ ├──header
│ │ ├── header.html
│ │ ├── header.js
│ │ ├── header.scssЧтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующие команды:
yarn run bem-m my-block - для создания БЭМ-блока в src/block/modules (для основных БЭМ-блоков), где my-block - имя БЭМ-блока; yarn run bem-с my-component - для создания компонента в src/blocks/components (для компонентов), где my-component - имя компонентаsrc/views/pages
src/views/index.htmlsrc/fonts
.woff и .woff2src/styles/base/_fonts.scsssrc/img
src/img/favicon и иметь размер не менее 1024px x 1024px.webp. Подробная информация по использованию тут.node_modules
yarn add package_nameimport $ from "jquery";src/styles/vendor/_libs.scss:warning: Если в вашем проекте используется несколько библиотек, которые необходимо подключать на нескольких страницах, во избежании ошибок нужно:
src/js/import создать папку pagespages создать 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"
}В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. Инструкция по использованию здесь.