- 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
- Gulp:
- Скачайте сборку с помощью 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
- Псевдоним для быстрого запускаю dev server:
- Чтобы собрать проект, введите команду
npm run build
(режим сборки)
Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.
- Шрифты формата .ttf закидываем по адресу
"app/fonts/ttf/"
- Запускаем конвертацию в формат .woff(.woff2)
npm run ttfToWoff
- Подключаем шрифты в mixin scss
"app/styles/fonts.scss"
командойnpm run fontsInStyle
- Для путей
.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
- конвертация шрифтов из ttf2woffgulp fontsInStyle
илиnpm run fontsInStyle
- подключение шрифтов в fonts.scss (Пример названия шрифта:Montserrat-AlternatesBlack
)
- Данную сборку использую для личных проектов, могут присутствовать наработки под быстрый старт проекта или тестовые модификации
Сообщайте мне о багах