Используется Gulp 4.0.2 и Webpack 5.74.0
- Компонентый подход к работе: структура файлов реализована компонентно
- Использование Css-препроцессора Sсss
- Оптимизиация итоговых HTML и CSS файлов
- Автоматическое форматирования стиля кода по заданым настройкам
- Контроль качества кода, проверка его на синтаксические и стилистические ошибки
- Мастабируемые и гибкие для кастомизации конфигурации с сборкой
- Использование Webpack для сборки javascript-модулей
- Использование полифила Babel для поддержки старых браузеров при использовании современного синтаксиса ES6 в javaScript
- Проверка js-кода на наличие ошибок линтером Eslint
- Конвертация изображений в современный веб-формат webp
- Автопрефикс и минимизация CSS и размещение его в build каталоге
Для работы сборки вам понадобится скачать и установить:
- Node.js (требуемая версия Node >= 14.0)
- Gulp 4
- Git Также установите систему контроля версии. Для работы сборки Git не обязателен, но для удобства установки и дальнейшей разработки лучше все же установить.
Для установки клонируйте репозиторий в текущую папку из консоли введите команду: git clone https://github.com/suchkovcode/gulp.git .
Все команды пишутся от корня проекта! После того как все исходники будут скачаны из удаленного репозитория, введите в консоли команду
npm installдля установки проекта. Все зависимости установятся автоматически.
Во избежании всевозможных ошибок вам необходимо установить gulp-cli глобально, но это в том случае если вы этого еще не делали в других проектах.
npm i gulp-cli -g
Эта процедура делается один раз и в следующий раз, когда будете разворачивать новый проект повторять эту команду не потребуется.
После этого вы можете использовать любую из предложенных команд сборки (итоговые файлы попадают в папку build корневой директории):
gulp - базовая команда, которая запускает сборку для разработки, используя browser-sync
gulp zip - команда собирает ваш готовый код в zip-архив.
Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.
Вся файловая структура генерируется автоматически. Руками ничего создавать не нужно!
Сборщик имеет следующую файловую структуру:
├── gulpfile.js # gulpfile сборщика
├── .gitignore # gitignore сборщика
├── .eslintrc.json # eslintrc конфигурации(по умолчанию пустой)
├── .eslintignore # eslintignore сборщика
├── .stylelintrc.json # Файл конфигурации стайлинта
├── .prettierrc.json # Файл конфигурации форматера кода prettier
├── .prettierignore # Файл игнорирования директорий и файлов для prettier
├── .htmlhintrc # Файл конфигураций плагина HTMLhint
├── package.json # Основные зависимости
├── babel.config.json # Базовые настройки конфигурации Babel
└── src # Исходная папка проекта
├───data # Данные для плагины gulp-file-include или других
├───fonts # Шрифты проекта
├───gulp # Настройки для gulp
│ ├───config # Файлы основных конфигураций
│ └───tasks # Файлы задач сборщика
│ ├───rev # Файлы задач для теста сборки
│ ├───pub # Файлы задач для public сборки
│ └───dev # Файлы задач для build сборки
├───html # Все исходные html файлы
│ ├───components # Компоненты для html
│ └───page # Уникальные страницы html
├───img # Папка с всеми картинками
│ ├───png # Отдельная папка для png
│ ├───md # Отдельная папка для картинок Markdown используемые в README
│ └───svg # Отдельная папка для svg
├───js # Папка с всеми скриптами
│ ├───class # Скрипты классов
│ ├───components # Скрипты компонентов
│ ├───function # Скрипты функций
│ ├───vendor.js # Файл для импортов стороних библиотек
│ └───script.js # Файл для импортов js файлов
├───scss # Папка с всеми scss файлами
│ ├───base # Базовые настройки стилей
│ │ ├───fonts # Подключенные локальные шрифты (пустой)
│ │ ├───global # Настройка глобальных стилей (пустой)
│ │ ├───reset # Сброс стилей браузера (пустой)
│ │ ├───mixin # Файл с миксинами для под медиазапросы(стартовые запросы)
│ │ └───var # Переменные (пустой)
│ ├───components # Стили компонентов
│ │ ├───header # Стартовый файл для header(пустой)
│ │ └───footer # Стартовый файл для footer(пустой)
│ ├───page # Стили страниц
│ ├───vendor.scss # Стили для импортрования сторонних библиотек
│ └───index.scss # Стили проекта
└───video # Папака с видео
Вы можете вызывать gulp-скрипты через npm.
npm start - запускает сборку проекта в режиме разработки в папку build, с запуском сервера и вотчера проекта.
npm run build:dev - запускает просто сборку в папку build, без запуска сервера и вотчера.
npm run build:prod - запускает сборку продакшен проекта в папку public, с минификацией файлов и изображений, а также добавление sitemap и удалением sourcemap.
npm run build:zip - запускает архиватор для для продакшен версии
npm run test - запускает проверку исходного кода через HTMLhint и ESlin
npm run test:check - запускает проверку исходного кода на ошибки через Prettier, ESlin и Stylelint
npm run test:fix - запускает исправление исходного кода на ошибки через Prettier, ESlin и Stylelint
npm run server - запускает сервер без вотчера
Используется последнии версии плагинов
husky # Плагин для прекомиит хуков
lint-staged # Плагин для запуска прекомитов под типы файлов
webpack-stream # Плагин webpack для использования импортов js
babel-loader # Плагин webpack для использования babel в своих конфигах
gulp # Сам gulp для работы сборщика
gulp-eslint # Плагин для подержки ESlint в сценариях gulp
gulp-autoprefixer # Добавляет автопрефикс в scss фацлы при компеляции в сборках dev и pub
gulp-clean # Удаляет директории при новой компеляции проекта в сборках dev и pub
gulp-csso # Минифицирует css файлы в сборке pub
gulp-purgecss # Удаляет неиспользованые стиили css в сборке pub(закоментировано)
gulp-group-css-media-queries # Групирует медиа запросы всех scss файлов в сборке pub
gulp-htmlmin # Минифицирует html страницы в сборке pub
gulp-htmlhint # Проверяет HTML на ошибки и соответсвие стилю согласно парамтерам
gulp-imagemin # Минифицирует изобрадения в сборке pub
gulp-file-include # Подключает html компоненты в сборках dev и pub
gulp-notify # Выводит подробные сообщения об ошибках в сборках dev и pub
gulp-rename # Переименовывает файлы в сборках dev и pub
gulp-shorthand # Групирует свойства css используя сокращения если это возможно в сборке pub
gulp-size # Выводит инофрмацию о размерах файлов в сборках dev и pub
gulp-sourcemaps # Генерирует исходную карту стилей в сборке dev
gulp-webp # Конвертирует png в webp в сборках dev и pub
gulp-zip # Архифирует проект работает только для сборки pub
gulp-load-plugins # Подключает все gulp плагины одной переменной в сборках dev и pub
gulp-sass # SASS препроцессор в сборках dev и pub
babel-cli # Babel для работы с командной строки
babel-core # Ядро Babel
babel-preset-env # Популярный пресет для компиляции
eslint # Ядро линтера для проверки синтакиса
eslint-plugin-import # Плагин для импортов дополнительных плагинов в линтер
eslint-config-prettier # Плагин конфигурации prettier для eslinta
eslint-plugin-prettier # Плагин для интеграции prettier и eslint
stylelint # Плагин для контроля качества стилей
stylelint-config-prettier-scss# Плагин для совместной работы prettier и stylelint
stylelint-config-standard-scss# Плагин конфигурации для scss синтаксиса
stylelint-order # Плагин для настройка сортировки свойств и элементов
prettier # Плагин для форматирования кода в единый стиль
browser-sync # Плагин для содания сервера разработки
require-dir # Подключает все таски одной переменной в сборках dev и pub
sass # SASS препроцессор в сборках dev и pub
Для получения дополнительной информации взгляните на файл package.json или посетите связанные сайты пакетов npm.
Для установки сторонних библиотек можно воспользоваться возможностями nodejs и npm. Например, установим библиотеку jquery - npm i jquery -D. При подобных установках все библиотеки копируются в папку node_modules. Далее для подключения файлов импортируем нужные типы:
- js - импортируем в файле для вендорных скриптов, где и вызываем данный плагин
import 'jquery'. Вообще, какие объекты импортировать смотрите в документации библиотек. - scss - ипортируем в файле vendor.scss (./src/scss/)
@import './jquery'
@import './jquery/jquery.slim.js'
Js-файлы всего проекта, разбитые на модуля, собирает webpack.
Сборка использует линтинг ESLint для Javascript (ES6) и линтинг stylelint для линтинга Sass, чтобы обеспечить согласованность кода во всем вашем проекте.
Конфигурации (/.eslintrc.json и /.stylelintrc.json соответственно) включают в себя прочную основу для построения, используя самые популярные стандартизированные плагины.
Сборка использует Prettier для обеспечения и упрощения согласованности кода. Если вы используете VS Code, ознакомьтесь с расширением Prettier VS Code. Если вы предпочитаете усовершенствовать свой код с помощью CLI, запустите npm run prettify в корне вашего проекта.
Сборка использует Husky и lint-staged для запуска ESLint, Stylelint и Prettier в качестве хуков перед фиксацией, гарантируя, что только чистый код попадает в систему контроля версий.
Автопроверка с stylelint и плагинами. См. .stylelintrc.
- БЭМ-именование:
__— разделитель элемента,--— разделитель модификатора. - Один Блок = один стилевой файл.
- Очередность селекторов:
- Элементы блока
- Стилевые правила сущности
- Модификаторы блока
- Псевдоселекторы и псевдоэлементы
- Сторонние вложенные селекторы
- Инклуды примесей
- Медиаусловия
- шрифты находятся в папке
src/fonts- используйте форматы
.woffи.woff2 - шрифты подключаются в файл
src/scss/base/_fonts.scss - сконвертировать локальные шрифты можно с помощью данного сервиса
- используйте форматы
Поддерживаемые типы изображений:
- PNG
- GIF
- SVG
Изображения находятся в папке src/img
- изображения автоматически конвертируются в формат
.webp. - Если вам не нужен формат webp, то переходим в таск images
gulp/tasks/{dev/pub}/transfer.jsи комментируем строку.pipe($.app.webp()). - изображение для генерации фавиконок должно находиться в папке
src/img/iconи иметь размер не менее1024px x 1024px
Для создания архива файлов проекта необходимо в консоли написать команду:
npm run zip
Сообщайте мне о багах, ставьте звёздочку в правом верхнем углу.
Спасибо всем, кто использует сборку! Если вы заметили какую-либо ошибку, пришлите пожалуйста ишью с подробным описанием проблемы, я все смотрю и постараюсь решить. Спасибо!
Copyright (c) 2022, Nikita Suchkov