Сборку делал по примеру автора youtube канала: Фрилансер по жизни
- Для установки всех зависимостей:
$ npm install
; - Для запуска сборщика Gulp нужно использовать:
$ npm run dev
; - Для сборки проекта в режиме
"production"
:$ npm run build
;
В сборке используется плагин "gulp-fonter"
для конвертации шрифтов из .ttf
в .woff
и при сборке проекта - шрифты в формате .woff
коряво будут переименованы и перенесутся в неправильную папку. Чтобы решить этот баг, сразу после установки зависимостей перейди в папку node_modules
- найди там папку и файл: gulp-fonter/dist/index.js
22-я строка кода будет выглядеть вот так:
newFont.path = source.dirname + '\\' + source.stem + '.' + type;
Тебе нужно её заменить на эту строку:
newFont.path = source.dirname + '/' + source.stem + '.' + type;
Автор этого плагина допустил однажды ошибку и из за этого при установке зависимостей плагин скачивается с маленькой ошибкой в коде. Автору предложил пофиксить этот баг и даже письмо написал, но он до сих пор не отвечает.
- сжимает HTML в режиме
production
; - удаляет комментарии из HTML в режиме
production
; - собирает SCSS файлы, добавляет вендорные префиксы;
- удаляет комментарии из SCSS файлов;
- в режиме
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"), url("../fonts/Inter-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
Если в папке
src/scss/config
- уже есть файлfonts.scss
- тогда при добавлении новых шрифтов НУЖНО УДАЛИТЬ старый файлfonts.scss
. Не переживай, при повторном запуске сборки Gulp все новые шрифты сконвертирует и создаст новый файлfonts.scss
.
Дальше, что еще умеет сборка:
- сжимает изображения и конвертирует их дополнительно в формат
.webp
и подключает их если браузер поддерживает этот формат; - копирует папку
/files
с содержимым в финальную сборку. То есть любые файлы можно поместить в эту папку и она будет добавлена в финальную сборку; - отдельной коммандой
$ npm run svgSprive
cоздает "svg cпрайты"; - перед каждым запуском сборщика чистит папку с финальным проектом, чтобы не собирать муссор;
- отдельной коммандой
$ npm run zip
можно заархивировать финальную папку для заказчика с именем проекта; - так же для разработи
gulp
запускает сервер с автоматической перезагрузкой окна в браузере при изменении файлов в проекте; - отдельной коммандой
$ npm run deployFTP
финальный проект выгружается на хостинг. Опции для отправки проекта на нужный хостинг указываются в файле:gulp/config/ftp.js
.
- именно
webpack
в данной сборке занимается обработкой файлов c JavaScript; - поддерживается модульное подключение скриптов
import/export
; - при импорте нет необходимости писать расширение файла
.js
, так же если осуществляется импорт из файлаindex.js
не обязательно это указывать:
import * as flsFunctions from './modules' // './modules/index.js'
webpack
c помощьюbabel
позволяет тебе писать код на любимом ES6+;- в режиме
"production"
при финальной сборке файлы JS сжимаются, а лишние комментарии удаляются.
Отдельной вишенкой является плагин gh-pages
для деплоя папки /dist
на отдельную ветку GitHub, чтобы красиво развернуть свой проект на GitHub Pages. Для этого в package.json
укажи в поле homepage ссылку на свою страницу gh-pages:
"homepage": "https://{UserName}.github.io/{NameRepo}",
По любым вопросам касающихся сборки пишите мне в Telegram.