TiroZit / practice-shop

Gulp-Vituum - сборка Xpage

Используется Vite, Vituum и Gulp v4

Начало работы

Установка npm зависимостей

npm install

Запуск в режиме разработчика

npm run dev

Собрать проект

npm run build

Собрать проект с форматированием картинок в WebP

npm run buildWithWebP

Деплой проекта в html.xpager.ru

npm run deployFTPHtml

Деплой проекта в html.xpager.ru с форматированием картинок в WebP

npm run deployFTPHtmlWebP

Деплой проекта на боевой сайт

npm run deployFTPServer

Деплой проекта на боевой сайт с форматированием картинок в WebP

npm run deployFTPServerWebP

Собрать svg sprite

npm run sprite

Перезаписать шрифты (Если появились новые)

npm run fonts

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

├── .vscode/                      # настройки VSCode
│   └── snippets/                 # сниппеты
├── dist/                         # собранный проект
├── config/                       # настройки сборщика
│   └── gulp-tasks/               # задачи gulp
│   └── gulp-settings.js          # пути
│   └── gulp-plugins.js           # общие плагины
├── src/                          # исходники
|   ├── assets/                   #
│   │   └── fonts/                # шрифты
│   │   └── img/                  # папка для хранения картинок
│   │   └── svg-sprite/           # папка для преобразования svg в спрайт
│   ├── scripts/                  # скрипты
│   │   └── modules/              # модули
│   │   └── libs/                 # библиотеки
│   │   └── utils/                # утилиты
│   │   └── index.js               # главный скрипт
│   ├── templates/                # Разметка
│   │   └── blocks/               # общие блоки
│   │   └── pages/                # страницы
│   │   │   └── index.pug         # главная страница
│   │   └── sections/             # секции страниц
│   ├── styles/                   # стили сайта
│   │   └── main.scss             # главный файл стилей
│   │   └── base/                 # базовые стили
│   │   │   └── mixins            # миксины
│   │   │   └── _null.sass        # файл для обнуление стилей браузера
│   │   │   └── _fonts.sass       # файл для подключения шрифтов (подключаются автоматически)
│   │   │   └── _variables.sass   # файл для написания css- или sass-переменных
│   │   │   └── _animations.sass  # файл анимаций
│   │   │   └── _base.sass        # файл общих стилей (настройки)
│   │   └── blocks/               # стили общих блоков
│   │   │   └── form/             # стили форм (checkbox, input, ...)
│   │   └── libs/                 # стили различных библиотек (плагинов)
│   │   └── pages/                # стили страниц
│   │   └── sections/             # стили секций
│   └── views/                    # страницы
└── gulpfile.js                   # gulp
└── vite.config.dev.js            # vite конфиг
└── package.json                  # файл с установленными пакетами
└── .editorconfig                 # файл с настройками форматирования кода
└── .ecrc                         # файл с настройками пакета editorconfig-checker (исключает ненужные папки)
└── README.md                     # документация сборки

Плагины для Vite, Vituum

1. vite
2. vituum
3. @vituum/pug
4. @rollup/plugin-alias
5. @rollup/plugin-replace
6. vite-plugin-html-minifier

Плагины для Gulp

1. gulp
2. gulp-fonter-fix
3. gulp-if
4. gulp-newer
5. gulp-notify
6. gulp-plumber
7. gulp-rename
8. gulp-sharp-responsive
9. gulp-svg-sprite
10. gulp-ttf2woff
11. gulp-run
12. gulp-ttf2woff2
13. vinyl-ftp

Общие плагины

1. autoprefixer
2. cssnano
3. sass
4. postcss
5. postcss-short
6. postcss-sort-media-queries
7. postcss-sass
8. stylelint
9. stylelint-config-standard-scss
10. stylelint-order

Зависимости

1. swiper
2. @fancyapps/ui
3. inputmask
4. nouislider
5. photoswipe
6. focus-visible
7. vanilla-lazyload
8. slim-select