Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020

[@maxgraph]

Друзья, очень важное пояснение, я поработал с этой сборкой еще и заметил один нюанс - если допустить ошибку в js-коде - падает сборка. Я сделал следующее: .on('error', function (err) { console.error('WEBPACK ERROR', err); this.emit('end'); // Don't stop the rest of the task }) чтобы ловить ошибку, не допуская падения сборки. Конечно же, код обновил на GitHub. Спасибо!

[@tyuftyaev_official]

Привет. Спасибо за видео. А в какой момент вставить этот код?

[@nemercevroman]

@@tyuftyaev_official это в части scripts const scripts = () => { return src('./src/js/main.js') .pipe(webpackStream({ mode: 'development', output: { filename: 'main.js', }, module: { rules: [{ test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }] }, })) .on('error', function (err) { console.error('WEBPACK ERROR', err); this.emit('end'); // Don't stop the rest of the task }) .pipe(sourcemaps.init()) .pipe(uglify().on("error", notify.onError())) .pipe(sourcemaps.write('.')) .pipe(dest('./app/js')) .pipe(browserSync.stream()); } Перед пайпами, код из гита взят, без этих доработок действительно не запускался. Обратил ещё внимание на mode: 'development' в самом начале первого пайпа. Так же если возникнет ошибка как у меня err require esm то это из-за версии autoprefixer'a. Просто откатил до "npm i gulp-autoprefixer@7.0.1", что и у Максима. Перед этим конечно npm uninstal необходим.

[@KrZn104]

Отличная сборка! Хорошо что подружил gulp c webpack-ом, а именно работа с JS-модулями. А отправка проекта сразу на ftp через gulp, вообще нужная вещь! Спасибо!

[@marina-ej4qd9kc1wh]

Замечательное видео про Gulp - все спокойно и понятно.

[@kirillshapovalov495]

Спасибо огромное Вам за это видео! Все понятно и доходчиво! Успехов в развитии канала! Продолжайте в том же духе!

[@maxgraph]

Спасибо)

[@serhiiretsenko2237]

Макс, спасибо! Очень клевая сборка. Подача тоже на уровне. Так держать ;)

[@maxgraph]

Спасибо)

[@igr3943]

Блин, как же чётко ты всё делаешь! Спасибо за контент!

[@maxgraph]

Спасибо =)

[@lirrr6555]

Именно та сборка, которую я искал, да еще и максимально доступным объяснением. Спасибо за вашу работу. PS. Налепите себе стикер куда-нибудь с напоминанием об увеличении шрифта :D

[@maxgraph]

Да уж надо бы :D спасибо)

[@stasalsakhanov435]

@@maxgraph в твоей сборке есть pug?

[@maxgraph]

Нет

[@stasalsakhanov435]

@@maxgraph очень жаль. А в дальнейшем на твоем канале, планируется сборка с шаблонизатором Pug?

[@maxgraph]

Да, будет

[@RomanKhassazhirov]

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

[@СергейКулаков-ю6д]

спасибо за сборку. остальное буду делать сам по своему вкусу и потребностям )

[@maxgraph]

Пожалуйста :)

[@4ITTonik]

Webpack одной этой настройкой компилирует скрипты в сильное сжатие, с заменой имён функций и переменных, плюс ко всему частично заменяет на ES5. *output: { filename: 'main-script.js',}* То есть по сути никакой uglify и terser не нужен. Но вообще хотелось бы как-то этот момент контролировать, чтобы можно было компилировать скрипты сначала в несжатый вид но уже с babel для отладки его работы, в документации я не нашёл соответствующих настроек, может вы подскажете?

[@maxgraph]

По вебпаку не подскажу :)

[@alexandrgusletsov2567]

Супер просто и подробно объяснено! Доп вопросов не осталось))))

[@maxgraph]

рад помочь :)

[@viktormanoylo2764]

Максим здравствуйте! Есть вопрос. При выполнении watchFile всё срабытывает ОК, но после сохранения в main.scss выскакивает ошибка, 'TypeError: dest.on is not a function' и это только при выполнении styles, 36 минута видео, и такая же ситуация fileinclude. На просторах инета мало что есть. Хотелось бы с этой ошибкой разобраться.

[@maxgraph]

Надо смотреть, так сложно сказать

[@andrewpizzert4065]

Учусь делать сборку по этому видео, а потом уже посмотрю про обновления) Вот у меня пока такой вопрос. Когда устанавливаю плагины, то npm ругается. Вот пример его ругани 15 vulnerabilities (6 moderate, 6 high, 3 critical). Безопасно ли ставить и использовать в проектах? Ведь он вроде указывает, что есть дыры в безопасности. Я так понял, что он после каждой установки пишет общее количество уязвимостей, но фиксить командой не особо удается.

[@maxgraph]

Здравствуйте. Да, это все безопасно)

[@andrewpizzert4065]

@@maxgraph Спасибо) Доверюсь) А то начал переживать, что это может как-то навредить или моему компу или потом сайту.

[@alexdoronin9803]

Доброго времени суток, а когда включать билд версию? и для чего нужен тогда styles & scripts если мы потом прописали stylesBuild & scriptsBuild

[@maxgraph]

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

[@alexdoronin9803]

@@maxgraph получается, когда я разрабатываю, я все делаю через Стайлс, а перед тем как уже отправить заказчику, я делаю билд , все так?

[@maxgraph]

Да

[@b01kunatz]

Лучшее видео по GULP

[@Kot_off]

Большое спасибо! буду теперь пользоваться Gulp :)

[@maxgraph]

Рад помочь)

[@marmarisiris48]

Здравствуйте, подскажите, у меня при настройке del и скриптов это высвечивается: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\HP\Desktop\gulp руководство ode_modules\del\index.js from C:\Users\HP\Desktop\gulp руководство\gulpfile.js not supported. Instead change the require of index.js in C:\Users\HP\Desktop\gulp руководство\gulpfile.js to a dynamic import() which is available in all CommonJS modules. В чем может быть ошибка не подскажете?

[@maxgraph]

Видимо вы используете синтаксис импортов, по умолчанию галп не поддерживает это

[@marmarisiris48]

@@maxgraph не подскажете пожалуйста как решить 🙏

[@dimapanicov9420]

у меня была такая же ошибка, из-за модуля del просто поставил более старую версию npm i del@6.1.1 -D

[@Юрій-п7з]

Добрый день, спасибо за видео, все очень подробно обясняется! И отдельное спасибо за зборку! Подскажите пожалуйста ни как не могу разобратся как использовать в сборке медиа запросы @media для мобильной версии. Мжет есть видео или инструкция? Зарание спасибо!

[@maxgraph]

Добрый день! есть видео по sass на канале, там я показываю это

[@Юрій-п7з]

@@maxgraph Спасибо!

[@grokhotun]

Привет. Спасибо за видео. Автоматическую подстановку начертания можно делать исходят из названия шрифта. Например: Roboto-Light разбиваем название на две части Roboto, Light и проверяем условием если Light то ставим 300, если Bold, то соответственно уже будет 700 и тд

[@maxgraph]

Привет! Да, я примерно так и сделал)

[@reutoffreutoff4549]

@@maxgraph после запуска gulp сбрасывает опять на 400

[@daniilthegunner843]

а к многостраничному сайту ко всем страницам где нужен js подключать main.js и все? Если например на странице1 есть кнопка ,а на странице2 этой кнопки нет и я в main.js я накину обработчик на эту кнопку, то ошибки не будет ,что на странице2 нет это кнопки?

[@maxgraph]

Зависит от ваших предпочтений. Можете сделать разные файлы и подключать на разных страницах, можете в одном, но нужно проверку делать на наличие элемента на странице.

[@daniilthegunner843]

@@maxgraph а если например мне нужно на нескольких страницах одинаковую яндекс карту через апишку вызывать. Могу просто создать отдельный файл под нее и импортировать в нужные js файлы да?

[@maxgraph]

Да, это будет удобно

[@sysoev-dev]

Максим, не мог бы помочь мне разобраться кое с чем, создал себе тоже сборку галп, делал по документации и твоему уроку. Допустим я пишу в scss/components/_header.scss, задаю там путь к картинке, по сути он будет "../../images/images.jpg" и после билда, этот путь и сохраняется в main.min.css и он лежит уже в корне папки css и получается судя по его директории, путь нужен "../images/image.jpg" а не "../../' и получается картинка уже не работает, как победить эту проблему?

[@maxgraph]

А как устроены папки?

[@sysoev-dev]

@@maxgraph Структура проекта практически как у тебя, я в общем разобрался и причина в том, что scss файл находится чуть глубже, чем style.min.css, и получается придется каждый раз удалять ../ при задании пути в scss чтоб этот относительный путь был верным в css. В общем вернулся к прошлой плоской структуре scss как у меня была, все работает)

[@maxgraph]

Хорошо)

[@Sufferer12]

Доброй ночи, скажите пожалуйста как правильно добавлять аудио и видео файлы с gulp? Может есть видео или статья. Гуглил, находил, но не добавляются.

[@ktytar]

Максим, а есть возможность во время сборки спрайта убирать значения width, height и fill из всех svg что в него попадают ? Ведь в этом вся прелесть управлять этими стилями из css.

[@maxgraph]

Есть, я думаю. Но не искал)

[@artemsergeev4833]

Все понятно и волшебно!

[@maxgraph]

Отлично)

[@daniilthegunner843]

Про js модули. А если мне нужно сделать в header активные/неактивные классы по клику. И этот header на 10 страницах используется. И к каждой этой странице подключен уникальный js файл именно для работы с этой страницей. Значит нужно создать функцию с отдельном js файле и экспортнуть просто во все эти 10 файлов ?

[@maxgraph]

Скорее всего

[@daniilthegunner843]

@@maxgraph А скажи еще пожалуйста. Когда полностью сверстал сайт и нужно отдать заказчику, то пишешь gulp build и кидаешь заказчику папку app?

[@maxgraph]

да

[@sysoev-dev]

Я заметил в твоей сборке, что, если в двух местах записаны одинаковые медиавыражения (брейкпоинты px) они в main.min.css cклеиваются в одно выражение и просто два правила, не подскажешь что это делает в твоей сборке?

[@maxgraph]

Конкатенация, видимо

[@sysoev-dev]

@@maxgraph В твоем gulpfile в функции styles нету конката

[@tuRistst]

Как я могу сделать так, чтобы у меня main.js было несколько. Т.е. мне нужно чтобы для каждой страницы был свой отдельный так сказать main.js Для главной страницы - index.js Для другой страницы например catalog.js И для каждого отдельного файла index.js, catalog.js работал импорт модулей. Как такое можно реализовать?

[@EgorKalinov-s7q]

Очень благодарен, все доходчиво и понятно) Идея для виде: Подключение kendo for angular/jquery к проекту. Перерыл весь ютуб, нет ни одного РУ туториала, да и на инглише не густо...

[@nikitaspasatelev7049]

Совершенно случайно наткнулся на видео. Спасибо за пояснения и саму сборку, от души! Единственное, под конец, когда ты настроил webpack с babel, и есть autoprefixer хотелось бы узнать про BrowserList. На практике как это анализировать и выставить оптимальное?

[@maxgraph]

Зависит от проекта и поддержки. Я не поддерживаю ie, мне неважно

[@Андрій-т8р]

Вот прям то что нужно. Спасибо 👍

[@soko9005]

Спасибо за сборку, но после этой сборки не могу понять как достать папку со стилями (то есть slick.css) для slick-carousel. Куда его сохранять и как достать, если я скачал slick-carousel через npm ?

[@maxgraph]

Если через npm, папка не нужна

[@soko9005]

У меня теперь новая проблема. После gulp build картинки svg пропадают, в чем может быть проблема?

[@Shakhrom-b7d]

В чём разница dependencies от devDependencies? Если к примеру всё хранить в dependencies, то при (пере)использовании проекта, зависимости не установятся?

[@maxgraph]

Установятся. Но просто dependencies - это непосредственно то, что нужно в проекте, а не для сборки. Ну а devdependencies соответственно для сборки

[@Shakhrom-b7d]

@@maxgraph это как-то сказывается на исходных или build файлах, или это информация для разработчика и не более?

[@maxgraph]

Не сказывается

[@Shakhrom-b7d]

@@maxgraph спасибо 👍

[@Zadrot1080p]

Вопрос, как ты используешь шаблонизацию + бэм, например те же миксы?

[@maxgraph]

Да

[@sakosargsyan7516]

Привет Макс, делаю все по видео, но у меня выходит ошибка не могу понять почему. Якобы зависимости не подходят. Я уже готовый код с github взял, но тоже самое. npm ERR! code 1 npm ERR! gyp verb cli Кто нибудь сталкивался ? Подскажите как исправить

[@maxgraph]

Привет. Вставь ошибку в гугл, по первой же ссылке ответ)

[@MrKumckuu]

А при подключении просто шрифтов woff2, нужно что-то добавлять в gulpfile? Спасибо за ответ

[@maxgraph]

Нет

[@MrKumckuu]

@@maxgraph Ругается на это, как можно исправить? Шрифты в папке resources/fonts Error: no mixin named font-face on line 1 of src/scss/rules/_fonts.scss from line 3 of src/scss/main.scss >> @include font-face("Exo2-Bold", "../fonts/Exo2-Bold", 700, normal);

[@maxgraph]

У вас другая структура, не знаю

[@Zadrot1080p]

Макс, а как ты юзаешь svg спрайт в css в background?

[@maxgraph]

Никак, в видео про свг это говорил :)

[@it400]

А не планируется видоса про SVG, о том как лучше вставлять на страницу, изменять размер и цвет?)

[@maxgraph]

Будет, ближе к середине августа :)

[@alexandrgusletsov2567]

уже есть

[@СергейКулаков-ю6д]

вопросы: как мы можем подключать различные файлы стилей типа normalize.css.css в саму сборку gulp? И если у нас несколько js-файлов могут быть, то они в main.js все "сольются", ?

[@maxgraph]

Подключать css файлы можно через import Всё, что подключено в mainjs - сольется в один файл

[@ЛюдаГригорьева-ф5ф]

​Новое видео по обновленному GULP 5 будет на канале?

[@maxgraph]

У галпа последняя версия 4,что за 5?

[@worm8415]

Спасибо за видео! Может кто подскажет, при вводе gulp styles в windows powelshell выдает ошибку sass.sync is not a function, не могу найти решение проблемы

[@maxgraph]

Нужно переписать инициализацию sass, пример указан в доке

[@sofiyammmdova1398]

у меня то же самое, только при выполнении команды "gulp styles" пишет, что "gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правил ьность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp styles + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException"🌚 В программировании я не разбираюсь от слова совсем и поэтому не понимаю, как решить данную проблему

[@ВладиславТищенко-ф9й]

Очень хорошо рассказано, спасибо большое

[@maxgraph]

Спасибо)

[@alexandrberezovskiy6065]

44:50 В Watch Первым параметром можно указывать и массив, а не копипастить :)

[@b.7690]

это нормально что webpack при импорте функции console.log превращает ее в простынь из кода (*! no exports provided */function(module,__webpack_exports_) и тд?

[@maxgraph]

Да, нормально))

[@fortoviykentafarik8726]

Почему то приходится создавать 2 package.json один родителю другой в папке проекта. Если скачивать как на видео npm install --global gulp-cli то файл самый первый package.json не меняется. Что делать?

[@maxgraph]

Странно, не знаю даже.

[@alexandrgusletsov2567]

Магия)))) он все преобразовал

[@ИринаИванова-х6м3э]

Вот это я понимаю, класс!

[@maxgraph]

спасибо)

[@ivancoin2570]

Привет. Кто-нибудь подключал локально jquery и разные плагины? У вас все нормально работает? Подключаю jquery модулем в main.js, выдает ошибку. Через cdn в index.html подключаю, все ок. Спасибо за ответ

[@ivancoin2570]

import './vendor/jquery-3.5.1.min.js'; - Вот так подключаю в main.js, не работает

[@maxgraph]

импорт так не работает) лучше тогда уж через npm это сделать. либо через require.

[@Zadrot1080p]

Можно ли добавить класс к заинклюденному файлу в html (который добавляется через @include('file.html'))? Могло бы быть полезным для создания миксов.

[@maxgraph]

Добавить как? Js?

[@Zadrot1080p]

@@maxgraph Ну я имею ввиду с помощью include. Или это невозможно без js и вообще это не очень хорошая практика?

[@maxgraph]

не думаю, что так можно)

[@dobrMAV]

Подскажите пожалуйста начинающему,Gulp сначала установить глобально на компьютер ?

[@maxgraph]

Да

[@John_Walker.]

Возникает проблемка: "found 1 high severity vulnerability in 737 scanned packages". Началось всё при установке browser-sync. Уже пару раз удалял и устанавливал, отключал audit что бы хоть как-то установить его, после обратно включил. Теперь установливал file-include и эта же ошибка появляется и скорее всего из-за browser-sync. Как обойти эту проблему кто нибудь знает?

[@dimaburichin7726]

Отлично! Лайк!

[@СергейСеменов-ф5у]

Добрый день.Webstorm не видит gulp sass. Через Powershell все установилось.. В чем беда, подскажите?

[@maxgraph]

Добрый вечер. Не работал в вебшторм, не могу сказать

[@Zadrot1080p]

после запуска browset sync, не возможности что либо вводить в консоль, как это исправить?

[@maxgraph]

Никак, вотчинг же идёт

[@Zadrot1080p]

@@maxgraph А как отменить вотчинг, не перезапуская консоль?

[@Zadrot1080p]

@@maxgraph Прошу прощения, не заметил комбинацию ctrl + c + ^

[@Kot_off]

"gulp : Не возможно загрузить файл С:\ ...... , так как выполнение сценариев отключено в этой системе." Исправить можно так: 1. Запустить Windows PowerShell от имени Администратора. 2. Прописать Set-ExecutionPolicy Unrestricted p.s Не знаю, может только у меня была такая проблема...

[@maxgraph]

Спасибо :)

[@muborizDev]

спасибо)

[@rgspot1848]

@MaxGraph Максим, спасибо за Вашу деятельность, но на мой взгляд голос на всех видео, которые я посмотрел, звучит значительно тише, чем та же заставка.

[@maxgraph]

Ну по уровням в программе - все ровно)

[@rgspot1848]

@@maxgraph в наушниках все ок, а вот динамики в мониторе воспроизводят голос тихо, заставка существенно громче. Это собственно не критично, но все же.

[@АнтошкаРадов]

Ломаю голову как с помощью плагина webpack подключить один js файл в другой (к примеру: библиотеку jQuery всунуть в основной файл script.js). Ты в видео упоминал что это можно сделать с его помощью. Можешь подсказать?

[@maxgraph]

Через npm, можно прямо на странице jquery посмотреть

[@АнтошкаРадов]

@@maxgraph просто я пытаюсь соединить (пусть не jQuery, а любые другие файлы с основным) через gulp-concat но у меня валятся ошибки если далее в функции использую webpack.

[@maxgraph]

Посмотрите вёрстку интернет магазина, там я делаю такие подключения. Просто с телефона неудобно))

[@АнтошкаРадов]

@@maxgraph спасибо, гляну. как раз собирался этот плейлист смотреть

[@maxgraph]

@@АнтошкаРадов Приятного просмотра)

[@romannovak375]

Добрый день подскажите пожалуйста как прикрутить swiper slider с помощью импорта.

[@maxgraph]

Здравствуйте, есть видео на канале отдельное, не так давно вышло.

[@romannovak375]

@@maxgraph да есть(Лучший слайдер для сайта на чистом JS) видео я посмотрел у вас слидер подключен в index.html a можно как-то с помощи импорта из node_modules ?

[@maxgraph]

@@romannovak375 kzbin.info/www/bejne/Y4bOZHxniZiEj5Y - вот же)

[@romannovak375]

@@maxgraph большое спасибо заработал вы лучший 😎

[@stainerframe7607]

Жесткий билд!!!! Для настощих мужиков!!)))

[@kontorasb2754]

Все классно как всегда, но не работает gulp-svg-sprite. Что то изменилось с момента записи видоса?

[@maxgraph]

Нет

[@marishakarpova8278]

Тоже не работал sprite. Оказалось что файлы .svg нужно добавлять в папку src/img/svg/ После этого файл sprite.svg формируется и обновляется в папке app/img

[@battalov_u]

скажите пожалуйста мне как новичку, эта сборка еще актуальна в 2022 году?

[@maxgraph]

Да)

[@battalov_u]

@@maxgraph спасибо

[@nikitaskin6511]

Почему после ввода в консоль gulp watchFiles, командная строка перестает работать и не реагирует на ввод?

[@maxgraph]

Потому что запущен вотчинг Можно отменить через ctrl+c

[@nikitaskin6511]

Спасибо!! =)

[@miraigrafit7865]

Круто, спасибо!!!

[@maxgraph]

Пожалуйста)

[@bigboy3085]

Здравствуйте, сделал сборку как у вас и столкнулся с проблемой. Если использовать в коде async/await то webpack ломается и выдает ошибку. Пытался решить многими способами, но ничего не помогло.

[@maxgraph]

Здравствуйте. Не приходилось его использовать)

[@maxim_hj]

Вы крут

[@maxgraph]

Спасибо)

[@nikitaskin6511]

Хотелось бы узнать как сделать обновление Include файлов которые прописаны в index.html?

[@maxgraph]

Они же и так обновляются)

[@nikitaskin6511]

@@maxgraph Обновляются, только после сохранения главного файла index.html =(

[@nikitaskin6511]

@@maxgraph Добавил строку watch('./src/html/*.html', htmlInclude); Теперь все работает как надо.

[@DNValeria]

при работе с js возникла такая ошибка: Error [ERR_REQUIRE_ESM]: require() of ES Module G:\work\Kursov ode_modules\del\index.js from G:\work\Kursov\gulpfile.js not supported. Instead change the require of index.js in G:\work\Kursov\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (G:\work\Kursov\gulpfile.js:14:13) at async Promise.all (index 0) { code: 'ERR_REQUIRE_ESM' } Что с этим делать и как исправить? Потому что проект не собирается и не запускается.

[@maxgraph]

Проверьте версии всех плагинов, которые используются. Они должны совпадать с моими, можно глянуть в гите

[@reutoffreutoff4549]

да, у меня тоже вылезло, переустановил del - *npm i -D del@^5.1.0* интересно, как установить все пакеты из package.json с привязкой к версиям в этом файле?

[@dimapanicov9420]

@@reutoffreutoff4549 тоже самое, версия npm i del@6.1.1 -D помогла

[@reutoffreutoff4549]

@@dimapanicov9420 как вариант можно поставить старый nodejs 14 версии, должно все заработать

[@VladimirSalygin]

Спасибо за Труд!

[@maxgraph]

Пожалуйста)

[@_pheax]

круто, спасибо

[@maxgraph]

Пожалуйста)

[@dexterdragons]

hey, gulp-file-include for loop and json file how to? tutorial? help!

[@Zadrot1080p]

Недоработка сборки в том, что html-инклюды не обновляются без перезагрузки. Это очень легко пофиксить, нужно добавить watch('./src/html/**.html', HTML_INCLUDE); в функцию WATCH_FILES. В видео названия функций в camelCase, но кому надо, разберутся)

[@maxgraph]

Все прекрасно обновляется, у вас что-то не то. Покажу на марафоне)

[@Zadrot1080p]

@@maxgraph Значит я сам накосячил)

[@maxgraph]

Я проверю ещё конечно, но все работало, на проектах проверено)

[@serhiib16]

Поддерживаю! Не обновлялось

[@Zadrot1080p]

@@serhiib16 Так же в этой сборке не хватает преобразования изображений в webp. И проблему со шрифтами тоже нужно решить

[@detro1821]

почему таскам с html, css надо делать exports, а остальным нет?

[@maxgraph]

Потому что это не таски, а функции

[@arshavin0309]

спасибо!

[@maxgraph]

Пожалуйста)

[@ЯрославДмитриев-ю1ю]

Классный видос, спасибо

[@maxgraph]

спасибо)

[@dmitrijloskutnikov694]

17:00 gulp styles сработал, когда дописал так: const sass = require('gulp-sass')(require('sass'));

[@maxgraph]

Да, потому что новая версия вышла

[@dmitrijloskutnikov694]

@@maxgraph Это понятно. Вдруг у кого получаться не будет. Чтоб не искали.

[@DNValeria]

Что делать, если и после этого не работает? gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp styles + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@dmitrijloskutnikov694]

@@DNValeria из текущей папки выйди до рабочего стола. и там установи gulp глобально. А вообще всё сделай ровно так, как написано на оф страничке gulp. Я первый раз делал по какому то видео, пол дня промучился. Потом сделал npm uninstall gulp и заново всё установил как в оф. документации.

[@DNValeria]

@@dmitrijloskutnikov694 , большое спасибо)

[@JsMaster]

Что надо изучать, чтобы самому уметь настраивать все это, чтобы было понятно что и как работает тут? Как бы я понимаю поверхностно, когда автор объясняет, но сам с 0 настроить не смогу. Может быть надо уметь понимать документацию каждого плагина gulp? Так, если подумать, то стоит ли в это углубляться? Ведь 1 настроил и все, пользуйся. Такая же история с webpack...

[@maxgraph]

Нужно знать базовый синтаксис js и уметь работать с документацией

[@JsMaster]

@@maxgraph Спасибо

[@Zadrot1080p]

Макс, как дебажить js код, если он собран webpack'ом?

[@maxgraph]

он же выкидывает ошибки)

[@Zadrot1080p]

@@maxgraph Это да, но есть ли возможность ставить брейкпоинты и пробегаться построчно по коду?

[@maxgraph]

@@Zadrot1080p тут не в курсе

[@Zadrot1080p]

@@maxgraph Вы код только по ошибкам дебажите, построчно не проходите?

[@maxgraph]

Не требуется для работы

[@renkodima]

@MaxGraph - cайты как страсть Уже 3 дня сижу голову ламаю как пофиксить эту ошибку: ReferenceError: reguire is not defined, если знаешь скажи пожалуйста! Могу скрины скинуть. Реально жесть какая-то

[@maxgraph]

Лучше в личку в вк или телеграме) а там уже посмотрю ближе к вечеру

[@ivancoin2570]

Всем привет. Пытаюсь подключить slick слайдер и jquery. Выдает такую ошибку: ERROR in ./src/js/functions/slick.min.js Module not found: Error: Can't resolve 'jquery' in 'C:\Users\ivan_\Desktop\InternetStore0-1\src\js\functions'. Может кто знает в чем проблема? Не видит почему то jquery.

[@maxgraph]

Без кода сложно

[@ivancoin2570]

@@maxgraph Почему то именно jquery не подключается, с другими файлами все ок. Вот так подключаю import './jquery.min.js';

[@maxgraph]

Так нельзя, если через npm подключаете - тогда импорт другой

[@ivancoin2570]

WEBPACK ERROR [PluginError: ./src/js/functions/slick.min.js Module not found: Error: Can't resolve 'jquery' in 'C:\Users\ivan_\Desktop\InternetStore01\src\js\functions' resolve 'jquery' in 'C:\Users\ivan_\Desktop\InternetStore01\src\js\functions' Parsed request is a module using description file: C:\Users\ivan_\Desktop\InternetStore01\package.json (relative path: ./src/js/functions) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\Users\ivan_\Desktop\InternetStore01\src\js\functions ode_modules doesn't exist or is not a directory C:\Users\ivan_\Desktop\InternetStore01\src\js ode_modules doesn't exist or is not a directory C:\Users\ivan_\Desktop\InternetStore01\src ode_modules doesn't exist or is not a directory C:\Users\ivan_\Desktop ode_modules doesn't exist or is not a directory C:\Users\ivan_ ode_modules doesn't exist or is not a directory C:\Users ode_modules doesn't exist or is not a directory C: ode_modules doesn't exist or is not a directory looking for modules in C:\Users\ivan_\Desktop\InternetStore01 ode_modules using description file: C:\Users\ivan_\Desktop\InternetStore01\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: C:\Users\ivan_\Desktop\InternetStore01\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.wasm doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.json doesn't exist as directory C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery doesn't exist [C:\Users\ivan_\Desktop\InternetStore01\src\js\functions ode_modules] [C:\Users\ivan_\Desktop\InternetStore01\src\js ode_modules] [C:\Users\ivan_\Desktop\InternetStore01\src ode_modules] [C:\Users\ivan_\Desktop ode_modules] [C:\Users\ivan_ ode_modules] [C:\Users ode_modules] [C: ode_modules] [C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery] [C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.wasm] [C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.mjs] [C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.js] [C:\Users\ivan_\Desktop\InternetStore01 ode_modules\jquery.json] @ ./src/js/functions/slick.min.js 6:46-67 @ ./src/js/main.js] { plugin: 'webpack-stream', showProperties: true, showStack: false, __safety: { toString: [Function: bound ] } } [21:45:51] Version: webpack 4.43.0 Built at: 2020-12-20 21:45:51 Asset Size Chunks Chunk Names main.js 212 KiB main [emitted] main Entrypoint main = main.js ERROR in ./src/js/functions/slick.min.js Module not found: Error: Can't resolve 'jquery' in 'C:\Users\ivan_\Desktop\InternetStore01\src\js\functions' @ ./src/js/functions/slick.min.js 6:46-67 @ ./src/js/main.js

[@ivancoin2570]

@@maxgraph Дак я npm не подключаю. Просто скачал файлом его и подключил в main.js как остальные файлы. А какой другой импорт?

[@sysoev-dev]

А ведь в gulp-sass можно указать метод сжатия compressed, зачем тогда нужен gulp-clean-css?

[@maxgraph]

Может и можно =) привычка все равно

[@b.7690]

Как ты проверяешь поддержку своего проекта на safari?

[@maxgraph]

Пользуюсь виртуальной машиной :)

[@Kot_off]

А какой сборкой пользуешься её где найти? я про Gulp

[@maxgraph]

Есть видео по галп на канале)

[@Zadrot1080p]

Столкнулся с проблемой, если верстать многостраничный сайт, другие страницы кроме index.html из папки src не импортируются. Вот сразу решение: const HTML_INCLUDE = () => { return src(['./src/*.html']) .pipe(FILE_INCLUDE({ prefix: '@', basepath: '@file' })) .pipe(dest('./app')) .pipe(BROWSER_SYNC.stream()); }

[@KomarSuper]

модифицируй стрелочную функцию: return src(['./source/*.html', './source/template/*.html']) модифицируй watch: watch(['./source/*.html', './source/template/*.html'], htmlInclude);

[@vadimt9862]

Привет, а как настроить что б в конечную папку попадал fonts ttf

[@maxgraph]

Привет! В последней версии сборки отсутствует данный функционал. kzbin.info/www/bejne/eYrOfIikdr-fg6s

[@vadimt9862]

@@maxgraph я понимаю , но если передо мной стоит такая задача

[@maxgraph]

Ну просто вставьте ttf да и все, должно попасть)

[@vadimt9862]

@@maxgraph так а где в gulpfile написать что б в конечную папку проекта попадали не только woff а и ttf

[@vadimt9862]

@@maxgraph просто закинуть вручную в конечный проект это хорошо , но все равно есть ж какой то способ что б само попадало

[@John_Walker.]

20 минут смотрел с 300% увеличением содержимого на экране)

[@alexandrgusletsov2567]

Лайк

[@vollex_frontend]

Актуально сейчас?

[@maxgraph]

Конечно, галп же до сих пор 4

[@vollex_frontend]

Лучший!

[@ejafarow]

что за комп у тебя? почему все так мелко?

[@maxgraph]

От компьютера размер не зависит :)

[@ejafarow]

@@maxgraph тогда наверное у тебя монитор 4к, или не знаю, почему все так мелко, чуть ли не прижимаю лицо к экрану чтобы разглядеть код 🤣

[@maxgraph]

Даже если 4к, я делаю 200% увеличение :)

[@fatar_916]

Зачем sourcemaps нужен?

[@maxgraph]

Для помощи разработчику. Если написать код в разных scss-файлах - мы не сможем в браузере понять, где какой код. а sourcemaps поможет понять.

[@KrZn104]

Может кто подсказать почему плагин gulp-file-include некорректно выплёвывает html на выходе? Более подробно я описал здесь qna.habr.com/q/825403

[@maxgraph]

Прямо там написал

[@KrZn104]

@@maxgraph Да, прямо там подробно описал проблему, поскольку в двух словах не объяснить. Нужно кодом показывать. Могу ещё ссылку на репозиторий дать, вот github.com/logdog90/GulpStartTemplate

[@maxgraph]

Напишите в вк мне, завтра посмотрю

[@KrZn104]

@@maxgraph Спасибо, я решил проблему! Я просто допустил ошибку в коде по запарке.

[@svet0v]

А зачем ты вместо создания функций как в документации присваиваешь переменным стрелочные функции, в чем преимущества этого? gulpjs.com/docs/en/getting-started/creating-tasks/

[@maxgraph]

Просто так)

[@svet0v]

@@maxgraph спасибо за сборку

[@niklion9111]

Ничего не видно 🤷

[@gyxobkadev5089]

Непонятно почему автор посчитал, что не нужно включать в сборку шаблонизатор.

[@maxgraph]

Потому что сборка - это дело субъективное, я их не использую и не включил в сборку

[@semdevmaster]

Я работаю с Gulp уже много лет, и это не тянет на полное руководство. Ваша сборка не оптимальна для реальной работы, даже та, что обновлена на github Очень много хлама взято из третьей версии, который в 4 вообще не нужен, например sourcemaps уже есть из коробки и не нужно ставить никаких плагинов. Вотчеры умеют запускать таски перед тем как начинать следить за файлами, смотрите документацию. Также советую почитать про glob параметр в галпе, вы его используете крайне неэффективно. А ещё хорошо бы освоить lastRun(), symlink() и события добавления и удаления файлов - без этого вся сборка это "Эксперименты новичка" В итоге из фишек Gulp 4 использовано от силы процентов 10% - единственный совет - читать документацию полностью С точки зрения оформления видео - всё круто, таймкоды, описание, ссылки - за это спасибо

[@maxgraph]

Что значит "не оптимальна"? как "оптимальность" влияет на работу? =) Сборка работает, выполняет свою задачу, а все эти "хорошо бы освоить" - да, прикольно, но зачем?) Безусловно, вы в чем-то правы. Но у меня другой подход)

[@svet0v]

посоветуйте видео или статью где описывается как собрать хорошую сборку?

[@peterquill7120]

Здравствуйте, есть пару вопросов, был бы благодарен, если чем-то поможете. 1. Вы говорите, что "вотчеры умеют запускать таски перед тем как начинать следить за файлами". А какая практическая польза от этого? И я правильно понимаю, что этого можно достичь с помощью ignoreInitial со значением false? 2. События добавления и удаление файлов - это часть watched events в разделе watching files в документации? Если да, то там вроде и несильно объясняют про них.. 3. про symlink() чет вообще ничего не понял, можете в двух словах объяснить, что это за штуковина?

[@svet0v]

@@peterquill7120 если найдете ответы на свои вопросы, напишите их, пожалуйста, здесь

[@semdevmaster]

​@@peterquill7120 Приветствую! По пунктам: 1)Практическая польза в том, что вотчер перед тем как начать за чем-то следить, может запустить нужный таск. Но этим пользуются крайне редко, так как есть и другие способы запуска тасков. Здесь я упомянул про это чисто применительно к данному видосу. 2)Верно это про события наблюдения и их можно очень круто использовать в сборке, чтобы в ручную ничего не удалять. В доках согласен слабо описан этот момент, но в сети есть куча примеров как этим пользоваться. 3)Symlink - это когда сборка вместо того, чтобы записывать в конечную папку реальные файлы, записывает ярлыки на файлы, которые ничего не весят, а следовательно экономят ресурс SSD дисков, хотя в современных реалиях это уже не очень критично. Но всё равно это способ оптимизации сборки и скорости её работы. Многих смущают эти ярлыки, так как они думают - ну это же не реальные файлы, как браузер их будет отображать, а браузеру пофиг, он легко хавает и ярлыки и прекрасно показывает всё, что надо.

[@izzetsheyhaliev8129]

ужас что со звуком???

[@maxgraph]

Что со звуком?

[@izzetsheyhaliev8129]

Голос еле слышно!вообще ужас

[@maxgraph]

Стоит прибавить громкость

[@124vasya]

просто победитель по жизни скопировал весь код, и все равно куча ошибок) шрифт не видит , жс не копилит, секонд2 не отображает, пздц.... 3й день маюсь

[@maxgraph]

Ну смотреть надо))

[@xPyc9x]

Вот это тема хорошая

[@ДмитрийНормов-ю6ц]

Скачал сборку с недавней готовой версткой магазина - "youtube-creatix-marathon". Сделал "npm i", все как сказано в видео. В итоге ошибка: "Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\(тут пусть к файлу)\youtube-creatix-marathon-main ode_modules\gulp-image\index.js require() of ES modules is not supported. require() of E:\(тут пусть к файлу)\youtube-creatix-marathon-main ode_modules\gulp-image\index.js from E:\(тут пусть к файлу)\youtube-creatix-marat hon-main\gulpfile.js is an ES module file as it is a .js file whose nearest pare nt package.json contains "type": "module" which defines all .js files in that pa ckage scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import( ), or remove "type": "module" from E:\(тут пусть к файлу)\youtube-creatix-marathon-main ode_modules\gulp-image\pa ckage.json. at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13) 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) at require (internal/modules/cjs/helpers.js:74:18) at Object. (E:\(тут пусть к файлу)\youtube-creatix-marathon-main\gulpfile.js:18:15) 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) { code: 'ERR_REQUIRE_ESM'" Версия gulp: E:\(тут пусть к файлу)\youtube-creatix-marathon-main>gulp CLI version: 2.3.0 Local version: 4.0.2 Насколько понимаю, модули не поддерживаются? Может, еще что установить надо?

[@maxgraph]

Нужно предыдущую версию gulp-image ставить

[@ДмитрийНормов-ю6ц]

@@maxgraph, спасибо, попробую! А как же у вас и у других юзеров работает без предыдущей версии??

[@maxgraph]

у меня в сборке вообще сейчас другой плагин из-за этого)

[@ДмитрийНормов-ю6ц]

@@maxgraph Максим, вы так быстро меняете плагины ))) А из-за версий gulp и npm проблемы быть не может? gulp: CLI version: 2.3.0 Local version: 4.0.2 node: v12.22.9 windows 7 (без особых проблем).

[@maxgraph]

Вряд ли. Но можно попробовать обновиться

[@saxa2956]

Спасибо, крутая сборка !

[@maxgraph]

Пожалуйста)