basic-site-assembler
Выполнил - Паярели Александр
Описание проекта:
Базовая сборка сайта для ускоренной верстки. По мере необходимости, сборка будет редактироваться, дополняться. Для наглядной демонстрации работы сборки можете посетить проект, работающий на этой сборке: https://github.com/Magistr19/mandarin-mania.io
Описание файловой структуры:
source/ Всю разработку сайта выполнять только в source
| - fonts Папка для шрифтов. Формата .woff и .woff2
| - img Папка для изображений .jpg .png .svg
| - inline-icons Папка для svg, которые нужно конвертировать в единный спрайт. После выполнения сборки, выдаст этот файл в папке build/img/sprite.svg
| - towebp Папка для jpg и png, которые нужно конвертировать в webp. После выполнения сборки, выдаст эти файлы в папке build/img/*.webp
| - js Папка для скриптов. Внимание! Сборка не конкатенирует отдельные JavaScript файлы в единный
| -sass Папка для .scss. Содержит главный style.scss файл, где подключен нормалайзер, переменные, примеси и scaffolding(подключение шрифтов, задание уникальных классов и общие надстройки страницы). Внимание! Не нужно подключать через @import .scss файлы из папки blocks в style.scss. Сборка сделает это за вас
| -basic Содержит основные .scss файлы, общие надстройки страниц. Нужно вручную подключать их в style.scss, порядок подключения важен
| -blocks Содержит .scss файлы непосредственно вашего сайта. Важно понимать, что при верстке по БЭМ их порядок подключения не важен, соответственно сборщик сам их сконкантенирует
| - index.html Базовая разметка страницы, все html файлы кидать в корень папки source
.editorconfig Файл с настройками для редактора, внутри инструкция как его подключить
.gitattributes Предоставляет attributes для путей. Лучше не редактировать его
.gitignore Говорит гиту, какие файлы не замечать. Лучше не редактировать его
csscomb.json Настройки для плагина csscomb, которые можно скачать в любой популярный редактор. Автоматически подключается после установки csscomb
gulpfile.js Описывает как работает сборка. Все содержание закомментированно, для легкого редактирования
package.json Описывает пакеты, которые были подключены в проект
package-lock.json Описывает зависимости, которые требуют пакеты из package.json. Лучше не редактировать его
Особенности сборки:
Благодаря GULP таск раннера, сборка умеет:
- Автоматически минимизировать изображения jpg, png, svg без потери качества, и конвертировать отдельные изображения в webp с легкой потерей качества
- Автоматически минимизировать скрипты, стили и html файлы
- Поддерживать include шаблонизатор для вставки содержимого одного документа в другой
- Конвертировать отдельные svg изображения в один спрайт
- Конвертировать .scss в .css без использования @import в главном .scss файле
- Отслеживать любые изменения в папке разработки, обновлять браузер при необходимости
- Работать без прерываний на протяжении всего рабочего процесса
Запуск сборки
- Скачайте и установите Node.js
- Скачайте и установите Git Bash
- Создайте и зайдите в папку для проекта. Нажмите правой кнопкой мыши на пустую область папки и выберите Git Bash Here
- Загрузите сборку локально себе на компьютер с помощью команды:
git clone https://github.com/Magistr19/basic-site-assembler.git . - Установите все вспомогательные пакеты, которые были использованные в проекте:
npm i - Выполните сборку проекта
npm run build
В папке проекта появится папка build, которая содержит скомпилированный проект на выпуск в продакшн.
Для выполнения компиляции и запуска локального сервера с автообновлением браузера и build на изменения, используйте команду npm start.
Внимание! Не редактируйте содержимое папки build. Все изменение вносите в папку разработки - source
Не удаляйте и не обращайте внимание на файлы:
.gitattributes, .gitignore, .gulpfile.js, package-lock.json, package.json.