Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, автопрефиксы

У меня все получилось!😁

Всё замечательно Юрий!!! Но почему мы не подключили конвертацию шрифтов?

компетентный дядячека, вполне академичненько

Хватит галпа, ребят) Лучше сделайте сборку на вайте

Спасибо чувак за то что ты делаешь, респект тебе и здоровья конечно)))

Привет, столкнулся с такой проблемой

Верстаю сайт многостраничник на этой сборке галпа, но очень интересно то, что при создании еще одной страницы для редиректа, index.bundle.js не работает вне index.html, кто нибудь знает почему?

Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!

в папке дист появляется папка css со стилями, footer и header вместе но сами стили не применяются, точнее если запустить index.html из дист через опен сервер то все работает со стилями, если через галп сервер то стилей нет

Подскажите цветовую тему VS Code у Вас и шрифт пожалуйста

Стал устанавливать на Ubuntu, столкнулся с ошибкой при настройке gulp-server-livereload.

В конфигурации где:
livereload: true
open: true

Терминал выдает ошибку:
TypeError [ERR_FEATURE_UNAVAILABLE_ON_PLATFORM]: The feature watch recursively is unavailable on the current platform, which is being used to run Node.js

Если удалить livereload или указать false в качестве значения, то "таск" срабатывает и сервер запускается.
В чём проблема и как её решить так и не понял, просто закомментировал строку с livereload))

@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍

Спасибо, очень понятно и интересно😊

Юрий,еще раз здравствуйте! снова я только в другом ролике😆 У вас macOS но команды я так понимаю все для windows? потому что на macOS многие эти команды вызовут ошибку проверял недавно тк в нем просит sudo команду а так же где то видел многие используют на маке yarn. Хотелось бы услышать вас как правильно все сделать на маке. Очень бы хотелось увидеть от вас установку gulp именно на MacOS так как. это всё же несколько отличается от win сам процесс установки того де git bash. Еще сейчас есть npm 9,8,1 версия, нужно ли обновляться ? Спасибо большое за урок! И заранее спасибо за ответ! 🙏

ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!

Добрый день, извините за тупой вопрос но как в эту сборку добавить browsersync?

Respect !!!

Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!

Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?

Категорически настаиваю на подобном мануале по Vitejs

Автор, ты Человечище.

Неужели находятся люди, которые старательно переписывают весь код в этом видео? 😂

почему не на es6 и импортах?

Я хочу готовую папку build (ранее dist) задеплоить на gh-pages: использую пакет gulp-gh-pages и таск
gulp.task('deploy', function () {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
При этом у меня создается еще одна папка ./publish, в которую почему-то складываются все папки и файлы, что есть в проекте, но на ветку gh-pages собранный build не попадает (даже пыталась создать ее вручную). Подскажите, пож, на что смотреть, я уже перелопатила все интернеты, не работает

Big thanks, bro! Your zip helped a lot.

Добротный курс, не хватает переменных scss

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

У меня инклуд не заменяется на хедер и футер, ошибок не пишет

честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!

искал серебро, а нашёл золото!! это точно оно! этот канал и это видео золото!

Ставил через "npm i", просто скачав и распаковав архив. Ошибок при установке не было, но при запуске с помощью команды gulp появились ошибки:
"
Error: Cannot find module 'webpack/lib/ProgressPlugin'
Require stack:
- E:\Programs\...\node_modules\webpack-stream\index.js
- E:\Programs\...\gulp\dev.js
- E:\Programs\...\gulpfile.js
- C:\Users\...node_modules\gulp-cli\lib\shared\require-
or-import.js
- C:\Users\...npm\node_modules\gulp-cli\lib\versioned\^4.0.
0\index.js
- C:\Users\...\npm\node_modules\gulp-cli\index.js
- C:\Users\...\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (E:\Programs\...\node_modules\webpack-strea
m\index.js:10:24)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'E:\\...\\node_modules\\webpack-stream\\index.js',
'E:\\......\\gulp\\dev.js',
'E:\\...\\gulpfile.js',
'C:\\...\\npm\\node_modules\\gulp-cli\\lib\\sha
red\\require-or-import.js',
'C:\\...\\npm\\node_modules\\gulp-cli\\lib\\ver
sioned\\^4.0.0\\index.js',
'C:\\...\\npm\\node_modules\\gulp-cli\\index.js
',
'C:\\Users\\....\npm\\node_modules\\gulp-cli\\bin\\gul
p.js'

"

Надо еще вручную отдельно ставить модули Вебпака? windows7, версия gulp - 4.0.2

Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?

Приветствую!
Вот скачал сборку с телеграма, можно ведь всё установить командой "npm i --save-dev"?
Ведь не обязательно перечислять все пакеты при установке? Оно автоматически подхватить все нужные пакеты из package.json?

Добрый день. Так и не смог запустить другие сторонние плагины с этой сборкой... к примеру rateYo. Кто что может подсказать?

как можно делать сборку, без свг спрайта.....

А если в режиме docs сообщает об ошибке при подключении шрифтов через импорт это норм? В режиме gulp ошибки нет

вместо --save-dev можно просто написать -D Всегда пожалуйста , не благодарите)))

Что прописывать для режима продакш и режима сборки?

спасибо за видео.

коммент по поводу clean. Если убрать trailing slash ('./dist' вместо './dist/'), а также использовать опцию allowEmpty, то не необходимости проверять, существует ли папка:

gulp.task('clean', function () {
return gulp.src('./dist', { allowEmpty: true }).pipe(clean());
});

линки на группы в телеге не работают

Юрий, сборка огонь, спасибо большое, НО перестал работать livereload почему-то, работал все время, в сборке вообще ничего не менял, вдруг перестал работать. У кого то есть идеи почему, сборку конечную не трогал, все прекрасно работало, но в конце после недели верстки откал релоад, ошибок в консоле нет.

на подключении сервера gulp-server-livereload выдает ошибку "The feature watch recursively is unavailable on the current platform, which is being used to run Node.js". Можете подсказать, что делать?

Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)

Спасибо))

Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs.
Спасибо за работу!

Делать столько файлов html.. Ради чего?

Спасибо за урок!
Я не совсем могу понять в чем разница между папками build и docs?
Заранее спасибо за ответ.

npm i gulp gulp sass sass gulp-file-include gulp-clean gulp-server-livereload gulp-sourcemaps gulp-plumber gulp-notify gulp-group-css-media-queries -D