Сборку делал по примеру автора youtube канала: Фрилансер по жизни
npm install
;npm run dev
;"production"
: npm run build
;"production"
: npm run preview
.production
;production
;production
сжимает CSS и делает копию без сжатия;.ttf
, и из .ttf
в woff/woff2
;src/scss/config/fonts.scss
, выглядит это так:@font-face {
font-family: Inter;
font-display: swap;
src: url('../fonts/Inter-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
Если в папке
src/scss/config
- уже есть файлfonts.scss
- тогда при добавлении новых шрифтов НУЖНО УДАЛИТЬ старый файлfonts.scss
. Не переживай, при повторном запуске сборки - Gulp все новые шрифты сконвертирует и создаст новый файлfonts.scss
.
Дальше, что еще умеет сборка:
.webp
и подключает их если браузер поддерживает этот формат;/static
с содержимым в финальную сборку. То есть любые файлы можно поместить в эту папку и она будет добавлена в финальную сборку без лишней обработки;npm run svgSprive
создает "svg спрайты";npm run zip
можно заархивировать финальную папку для заказчика с именем проекта;gulp
запускает сервер с автоматической перезагрузкой окна в браузере при изменении файлов в проекте;npm run deployFTP
финальный проект выгружается на хостинг. Опции для отправки проекта на нужный хостинг указываются в файле: gulp/config/ftp.js
;Inter-Regular[ |-|_|__][I|i]talic
" - такие названия Gulp правильно обработает и запишет в стили font-style: normal/italic
;src/fonts
от туда шрифты с расширением .woff2
переносятся в dist/fonts
. Если файл для подключения шрифтов уже создан - gulp просто перенесет шрифты *.woff2
в dist/fonts
без лишней трудозатратной конвертации.webpack
в данной сборке занимается обработкой файлов c JavaScript;import/export
;html
страницы, для этого в корне папки ./src/js
создай нужный тебе файл;.js
, так же если осуществляется импорт из файла index.js
необязательно это указывать:import * as helpers from './helpers' // './helpers/index.js'
webpack
c помощью esbuild-loader
позволяет тебе писать код на любимом ES6+;"production"
при финальной сборке файлы JS сжимаются, а лишние комментарии удаляются.main.css
и один файл скриптов main.js
- а столько, сколько тебе нужно. Для этого в папке ./src/js
в корне создай нужные файлы, а на выходе получишь их собранными.
Для стилей в папке ./src/scss
создай папку pages
и там создавай новые файлы стилей для новых страниц.Отдельной вишенкой является плагин gh-pages
для деплоя папки /dist
на отдельную ветку GitHub,
чтобы красиво развернуть свой проект на GitHub Pages.
Для этого в package.json
укажи в поле homepage ссылку на свою страницу gh-pages:
"homepage": "https://{UserName}.github.io/{NameRepo}",
С 05.05.2024 появилась возможность запустить финальный вариант для превью на свой компьютере,
для этого есть команда: npm run preview
.
По любым вопросам касающихся сборки пишите мне в Telegram.