Сборка Gulp + Webpack для фронтенд-разработки

Установка

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

  npm i

Запуск проекта

Для запуска проекта пропишите в терминале данную команду:

  npm run dev

*Если у вас имеются svg иконки в папке "svgicons", то откройте ещё один терминал и пропишите данную команду:

  npm run svgSprive

Преимущества

• Компонентый подход к работе: структура файлов компонентов реализована по БЭМ
• Автоматические создание директории компонента с файлами при помощи инструмента [bem-tools-create]
• Использование Html-препроцессора Pug
• Использование Css-препроцессора Scss
• Использование Webpack для сборки javascript-модулей
• Сборка иконок в спрайты: svg, png
• Конвертация изображений в современный веб-формат webp

Структура файлов проекта

gulp-Webpack
|— build
|— gulp
|— src
|    |— base
|    |    |— fonts.scss
|    |— fonts
|    |    |— ***
|    |— components
|    |    |— ***
|    |    |— ***
|    |    |— ***
|    |    |— app.js
|    |    |— classes.scss
|    |    |— normalize.scss
|    |    |— style.scss
|    |    |— vars.scss
|    |— img
|    |    |— icons
|    |    |    |— png
|    |    |    |— svg
|    |    |— favicon-lg.png
|    |    |— favicon-sm.png
|    |— layots
|    |    |— ***
|    |— mixins
|    |    |— pug
|    |    |— sass
|    |— svgicons
|    |    |— ***
|    index.pug
| package.json
| gulpfile.js
| .bemrc.js
| .gitignore

• build — конечная папка с версткой.
• gulp — здесь лежат все задачи сборщика gulp
• src — папка с исходниками проекта
• package.json — файл с настройками проекта с указанием списка зависимостей для установки
• gulpfile.js — файл настроек для сборщика Gulp
• .bemrc.js — настройки инструмента bem-tools-create
• .gitignore — список исключений для Git

Компонентный подход

Каждый блок, который необходимо сверстать создается в качестве компонента. Все компоненты лежат в директории src/components. Компонент включает в себя 3 типа файла - .pug, .scss, .js (если необходимо писать скрипт на js). Название имен файлов совпадает с названием компонента. Все это сделано для легкого переиспользования. Например, компоненты при таком подходе легко копируются из проекта в проект. Вот пример создания структуры компонента header с его файлами.

|— header
|   |— header.pug
|   |— header.scss
|   |— header.js
| ***
| ***

Файлы pug подключаются в том файле, где это необходимо. Файлы sass компонентов подключаются вручную в файле _components.sass, который лежит в директории src/components/. Файлы js компонентов подключаются вручную в файле components.js, который лежит в директории src/components/.

Автоматизация создания компонентов при помощи bem-tools-create

Чтобы в ручную постоянно не создавать файлы и папки компонента мы можем ускорить данный процесс. Первым делом следует установить плагин bem-tools-core глобально, иначе мы можем получить ошибку о том, что команда bem не распознана. npm i bem-tools-core -g Эта команда пишется один раз для всех проектов. Больше повторять не нужно. Для создания компонента необходимо написать команду в консоли: bem create component-name В данном случае "component-name" - это название создаваемого компонента. После данной команды в директории src/components появится папка с созданным компонентом. В папке компонента по умолчанию создаются 3 типа файла с аналогичным названием - pug, scss, js. То есть в данном случае, component-name.pug, component-name.scss, component-name.js. Если необходимо исключить какой-либо файл, то необходимо задать команду: bem create component-name -n js После данной команды создаться компонент с файлами .pug и .scss, js-файл будет исключен. Если необходимо создать только один тип файла, например, только scss, то пишем: bem create component-name -T scss Подробнее про bem-tools-creators можно почитать тут.

Шрифты

Шрифты подключаются в файле src/base/scss/fonts.scss. По умолчанию подключен шрифт Montserrat из google fonts. По возможности подключайте шрифты именно из google fonts.