- можно строить модульную структуру, так как для сборки модулей у нас есть плагин webpack. Также весь код будет переведен из нового стандарту в старый зачет babel.
Html
- `img src= "" alt=""` картинки можно писать так, есть модуль который автоматически будет создавать тег picture. Будет 2 картинки одна формата который в папке src/img, другой webp.
Sass
- сжимаются файлы и переводятся в css.
Images
- создает картинки формата webp, и сжимает базовую картинку оба файла кладутся в dist/img.
Svg
- создает svg sprite, файл стилей и + папка с svg.
Fonts
- можно переводить с помощью команды, шрифты otf в ttf. Также, чтобы автоматически создать стили под шрифты в файл style-min.css - нужно при запущенном gulp прописать npm run fontStyle.
❗Шрифты обновляются только когда кладем их в папку src/fonts. При запуске gulp, шрифты не подтянутся.❗
Все шрифты формата ttf переводят в woff || woff2. Также есть автоматическое удаление всех шрифтов с dist/fonts.
📁css – содержит папку svg где хранятся svg картинки + файл sprite.css - где создаются классы на svg
📁fonts – шрифты только формата woff || woff2
📁img – картинки только формата webp + сжатые базовые картинки
index.html – сжатый файл html
min.js - сжатый файл javaScript
style-min.css - сжатый файл стилей
Команды:
👉 npm run:
▫ gulp - запуск gulp.
▫ fontStyle - создание стилей со шрифтами(берет все шрифты с папки dist/fonts и создает стили в src/sass/fonts, затем после обновлнеие стилей в style-min.css появятся шрифты).
▫ otf2ttf – перевод шрифтов в otf в ttf. Кладутся в папку src/fonts.
В будущем буду обновлять этот конфиг.
🙋♂️ Если есть вопросы пишите в телеграмм.