https://pagespeed.web.dev/analysis/https-rnkuchin-github-io-mike/t39h4glvm4?form_factor=mobile
Для работы с данной сборкой в новом проекте, склонируйте все содержимое репозитория
git clone <this repo>
Затем, находясь в корне проекта, запустите команду npm i
, которая установит все находящиеся в package.json зависимости.
После этого вы можете использовать любую из предложенных команд сборки (итоговые файлы попадают в папку docs корневой директории):
gulp
- базовая команда, которая запускает сборку для разработки, используя browser-sync
gulp build
- команда для продакшн-сборки проекта. Все ассеты сжаты и оптимизированы для выкладки на хостинг.
├── src/ # Исходники
│ ├── js # Скрипты
│ │ └── main.js # Главный скрипт
│ │ ├── _vars.js # файл с переменными проекта
│ │ ├── _vendor.js # файл с подключениями библиотек
│ │ ├── _functions.js # файл с готовыми функциями на js
│ │ ├── _components.js # файл с подключениями компонентов
│ │ ├── components # js-компоненты
│ │ ├── vendor # папка для загрузки локальных версий библиотек
│ ├── scss # Стили сайта (препроцессор sass в scss-синтаксисе)
│ │ └── main.scss # Главный файл стилей
│ │ └── vendor.scss # Файл для подключения стилей библиотек из папки vendor
│ │ └── _fonts.scss # Файл для подключения шрифтов (можно использовать миксин)
│ │ └── _mixins.scss # Файл для подключения миксинов из папки mixins
│ │ └── _vars.scss # Файл для написания css- или scss-переменных
│ │ └── _settings.scss # Файл для написания глобальных стилей
│ │ ├── components # scss-компоненты
│ │ ├── mixins # папка для сохранения готовых scss-компонентов
│ │ ├── vendor # папка для хранения локальных css-стилей библиотек
│ ├── partials # папка для хранения html-частей страницы
│ ├── img # папка для хранения картинок
│ │ ├── svg # специальная папка для преобразования svg в спрайт
│ ├── resources # папка для хранения иных ассетов - php, видео-файлы, favicon и т.д.
│ │ ├── fonts # папка для хранения шрифтов в формате woff2
│ └── index.html # Главный html-файл
└── gulpfile.js # файл с настройками Gulp
└── package.json # файл с настройками сборки и установленными пакетами
└── .editorconfig # файл с настройками форматирования кода
└── .ecrc # файл с настройками пакета editorconfig-checker (исключает ненужные папки)
└── .stylelintrc # файл с настройками stylelint
└── README.md # документация