Video Systems

Тестовое задание. Вёрстка корпоративного сайта провайдера услуг видеонаблюдения, интернета и телевидения.

Описание

Video Systems - многостраничный сайт телекоммуникационной компании из Ноябрьска. Включает разделы с тарифами на интернет и телевидение, услугами видеонаблюдения (городские, дворовые и персональные камеры), каталогом оборудования, новостями и вакансиями. На сайте присутствует навигация с выпадающими меню, sticky-кнопка оплаты и адаптивная вёрстка под мобильные устройства.

Технологии

• HTML, SCSS, JavaScript
• Gulp 4 — сборка проекта: компиляция SCSS, автопрефиксер, минификация CSS, HTML-инклуды, оптимизация изображений, конвертация в WebP, живая перезагрузка
• Webpack через webpack-stream — бандлинг JavaScript
• Babel с @babel/preset-env — транспиляция
• Browserslist — поддержка последних 5 версий браузеров

Структура проекта

video-systems/
├── src/           # Исходные файлы (HTML, SCSS, JS, изображения)
├── build/         # Скомпилированные файлы
├── docs/          # Сборка для GitHub Pages
├── gulp/          # Модули Gulp-задач
├── gulpfile.js    # Конфигурация Gulp
├── webpack.config.js
└── package.json

Запуск

Требования: Node.js и npm

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

npm install

Запуск dev-сервера с живой перезагрузкой:

npx gulp

Сборка для продакшена:

npx gulp docs

Продакшен-сборка выводится в папку docs/, которая используется для деплоя на GitHub Pages.