Skip to content

Latest commit

 

History

History
115 lines (93 loc) · 5.55 KB

README.md

File metadata and controls

115 lines (93 loc) · 5.55 KB
Raw

gulp-v5-starter

🔥 Особенности

  • Gulp v5
  • Webpack для обработки js и ts
  • Единый config.mjs
  • Псевдонимы путей для .scss,.ts,.js файлов
  • Небольшой вес node_modules (Только необходимое)
  • Автоматическая генерация
    • Для создания компонента, элемента или секции gulp create --component || element || section --test
    • Флаг на добавление файлов .js, .ts, gulp create --component --test --ts || --js
  • PUG опционально
    • (По умолчанию - включен)
  • TypeScript опционально
    • (По умолчанию - включен)
  • Svg sprite
    • <svg> <use href="./sprite/sprite.svg#test-1"></use> </svg>
  • Импорт .ts .js .mjs
  • Swiper включен в сборку

🛠️ Установка

  • Установите NodeJS
  • Установите глобально:
    • Gulp: npm i -g gulp gulp-cli
  • Скачайте сборку с помощью Git: git clone https://github.com/Alekseevich-psk/gulp-v5-starter.git
  • Скачайте необходимые зависимости: npm i
  • Выберите режим работы HTML или PUG npm run initPUG или npm run initHTML
    • Данные команды удалят .html или .pug файлы
    • По умолчанию PUG - включен, файлы .html можно удалить вручную
    • Если выключить Pug то, для конкатенации html файлов используется плагин gulp-file-include
  • Выберите режим работы TS или JS npm run initTS или npm run initJS
  • Чтобы начать работу, введите команду: npm run start (режим разработки)
    • Псевдоним для быстрого запускаю dev server: gulp
  • Чтобы собрать проект, введите команду npm run build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

🚩 Быстрое подключение шрифтов

  • Шрифты формата .ttf закидываем по адресу "app/fonts/ttf/"
  • Запускаем конвертацию в формат .woff(.woff2) npm run ttfToWoff
  • Подключаем шрифты в mixin scss "app/styles/fonts.scss" командой npm run fontsInStyle

❗️ Alias

  • Для путей .scss,.ts,.js файлов работают псевдонимы
  • Задавать по адресу: ./gulp/config/config.mjs
    scss: {
        "@Sections": "./../pages/sections",
        "@Components": "./../pages/components",
        "@Elements": "./../pages/elements",
    },
    js: {
        "@Sections": path.resolve(__dirname, "../../" + paths.sections),
        "@Components": path.resolve(__dirname, "../../" + paths.components),
        "@Elements": path.resolve(__dirname, "../../" + paths.elements),
    },

Примеры: import '@Element/test/test.ts'; import 'Components/test/test.ts';

📂 Файловая структура

gulp-v5-starter
├── app
│   ├── fonts
│   ├── images
│   ├── pages
│   ├── scripts
│   ├── styles
│   ├── svg
│   └── video
├── dist
├── package.json
├── ignore.d.ts
├── tsconfig.json
├── gulpfile.mjs
├── README.md
└── .gitignore

💣 Режимы сборки

  • gulp switchMode --html или npm run switchMode --html - HTML режим
  • gulp switchMode --pug или npm run switchMode --pug - Pug режим
  • gulp switchMode --js или npm run switchMode --js - javaScript режим
  • gulp switchMode --ts или npm run switchMode --ts - typeScript режим

⌨️ Команды

  • gulp или npm run start - запуск сервера для разработки проекта
  • gulp build или npm run build - собрать проект с оптимизацией без запуска сервера
  • gulp zipDist или npm run zipDist - заархивировать dist папку (Для отправки интегратору)
  • gulp ttfToWoff или npm run ttfToWoff - конвертация шрифтов из ttf2woff
  • gulp fontsInStyle или npm run fontsInStyle - подключение шрифтов в fonts.scss (Пример названия шрифта: Montserrat-AlternatesBlack)

👉 Нюансы

  • Данную сборку использую для личных проектов, могут присутствовать наработки под быстрый старт проекта или тестовые модификации

💛 Нравится проект?

Сообщайте мне о багах

⚠️ Сборка собрана на версии node.js - 20.14.0