Это сборщик, который имеет ряд заготовленных решений, для сборки вёрстки или WordPress шаблонов.
Сборщик использует Gulp для автоматизации процессов.
Сборщик собирает файлы, оптимизирует картинки и иконки.
- README.md - файл описание сборщика
- .vscode - настройки для редактора vscode
- .gitignore - файл в котором описано какие файлы и папки не загружать в git репозиторий
- package.json - файл в котором описано настройки проекта
- gulpfile.js - файл в котором описаны основные задачи сборки
- gulp - папка в которой хранятся файлы для конфигурации и задач gulp
- src - папка в которой хранятся основные папки и файлы из которых будет собираться готовый проект
- js - папка в которой хранятся файлы для сборки javascript скриптов
- scss - папка в которой хранятся файлы для сборки css стилей
- assets - папка в которой хранятся исходные картинки, иконки и шрифты
- favicons - папка в которой хранятся исходники favicons, которые можно сгенерировать с помощью сайта https://www.favicon-generator.org/
- fonts - папка в которой хранятся исходники fonts, которые можно сгенерировать с помощью сайта https://everythingfonts.com/font-face или https://transfonter.org/
- img - папка в которой хранятся исходники картинок. В проекте они будут оптимизированы и из них будут генерироваться картинки с расширениям WEBP и AVIF.
- svg-src - папка для исходников SVG иконок или картинок, из этих исходников будут делаться оптимизированные SVG и попадать в папку svg. И ещё делаться sprite и попадать в папку sprite + файл пример
- svg - папка в которой будут оптимизированные svg иконки
- sprite - папки в которой будет sprite и файл примера
- templates - папка в которой заготовлены готовые решения для: компонентов, вёрстки html или php и для wordpress. Файлы из этих папок надо перемещать в папку src
- components - папка в которой заготовлены готовые решения, для компонентов, таких как: слайдеры, попап, спойлеры и т.д.
- html - папка в которой заготовлены готовые решения, для сборки вёрстки в чистый HTML.
Эти файлы надо переместить в папку src.
И в package.json надо указать buildType равный html - php - папка в которой заготовлены готовые решения, для сборки вёрстки c использованием PHP.
Эти файлы надо переместить в папку src.
И в package.json надо указать buildType равный php - wordpress - папка в которой заготовлены готовые решения, для сборки wordpress шаблона.
Эти файлы надо переместить в папку src.
И в package.json надо указать: buildType равный wordpress, buildFolder равный локально установленной версии wordpress и в proxyURL равный локальному домену
У сборщика есть 2 файла для настройки
-
.vscode/settings.json - тут настроенны алиасы для путей и если мы используем сборщик для wordpress, то надо указать пути к локально версии wordpress, для того что бы редактор понимал что работает с wordpress. У вас может быть другой редактор, по этому надо будет сделать такие же настройки для вашего редактора.
-
package.json - тут есть ряд настроек для проекта:
- name - название проекта. Если выбран buildType равный wordpress, то это имя будет использоваться как имя шаблона.
- buildType - тип сборки проекта, может быть: html ИЛИ php ИЛИ wordpress
- buildFolder - путь для сборки, если не установленно будет собираться в папку build в корне проекта. Для buildType равный wordpress надо указывать путь к локальной версии wordpress в папку wp-content\themes\ПАПКА ШАБЛОНА
- proxyURL - URL к проекту на локальном сервере
- port - port для запуска сборки, по умолчанию 3000
Для старта вам необходимо:
- Сделать настройку в указанных выше файлах.
- Переместить файлы из заготовленных шаблонов из папки templates в src
- В терминале выполнить команду npm i. Убедиться что всё установилось без ошибок.
- После чего можно запускать сборку выполнив одну из следующих команд в терминале:
- npm run start - запустит сборку Веб севера и наблюдение за изменением файлов в папке src. Без оптимизации картинок, иконок, стилей, скриптов
- npm run dev - запустит сборку Веб севера и наблюдение за изменением файлов в папке src. С оптимизации картинок, иконок, стилей, скриптов
- npm run build - Сделает оптимизации картинок, иконок, стилей, скриптов. Сделает подключение минифицированных стилей и скриптов. И выгрузит это всё в папку для сборки
- npm run clear - удалил папку сборки
- npm run zip - выполнит сборку и соберёт её в zip архив с названием проекта