Друзья, очень важное пояснение, я поработал с этой сборкой еще и заметил один нюанс - если допустить ошибку в js-коде - падает сборка. Я сделал следующее: .on('error', function (err) { console.error('WEBPACK ERROR', err); this.emit('end'); // Don't stop the rest of the task }) чтобы ловить ошибку, не допуская падения сборки. Конечно же, код обновил на GitHub. Спасибо!
@@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 необходим.
Отличная сборка! Хорошо что подружил gulp c webpack-ом, а именно работа с JS-модулями. А отправка проекта сразу на ftp через gulp, вообще нужная вещь! Спасибо!
Именно та сборка, которую я искал, да еще и максимально доступным объяснением. Спасибо за вашу работу. PS. Налепите себе стикер куда-нибудь с напоминанием об увеличении шрифта :D
Макс, спасибо за твои видео, очень информативно и интересно. Можно пожалуйста вынести видео по gulp в отдельный плейлист, ибо мне(и не только мне) сложно ориентироваться по видео, откуда начать и чем закочить...
Привет. Спасибо за видео. Автоматическую подстановку начертания можно делать исходят из названия шрифта. Например: Roboto-Light разбиваем название на две части Roboto, Light и проверяем условием если Light то ставим 300, если Bold, то соответственно уже будет 700 и тд
Очень благодарен, все доходчиво и понятно) Идея для виде: Подключение kendo for angular/jquery к проекту. Перерыл весь ютуб, нет ни одного РУ туториала, да и на инглише не густо...
Совершенно случайно наткнулся на видео. Спасибо за пояснения и саму сборку, от души! Единственное, под конец, когда ты настроил webpack с babel, и есть autoprefixer хотелось бы узнать про BrowserList. На практике как это анализировать и выставить оптимальное?
Как я могу сделать так, чтобы у меня main.js было несколько. Т.е. мне нужно чтобы для каждой страницы был свой отдельный так сказать main.js Для главной страницы - index.js Для другой страницы например catalog.js И для каждого отдельного файла index.js, catalog.js работал импорт модулей. Как такое можно реализовать?
вопросы: как мы можем подключать различные файлы стилей типа normalize.css.css в саму сборку gulp? И если у нас несколько js-файлов могут быть, то они в main.js все "сольются", ?
Webpack одной этой настройкой компилирует скрипты в сильное сжатие, с заменой имён функций и переменных, плюс ко всему частично заменяет на ES5. *output: { filename: 'main-script.js',}* То есть по сути никакой uglify и terser не нужен. Но вообще хотелось бы как-то этот момент контролировать, чтобы можно было компилировать скрипты сначала в несжатый вид но уже с babel для отладки его работы, в документации я не нашёл соответствующих настроек, может вы подскажете?
"gulp : Не возможно загрузить файл С:\ ...... , так как выполнение сценариев отключено в этой системе." Исправить можно так: 1. Запустить Windows PowerShell от имени Администратора. 2. Прописать Set-ExecutionPolicy Unrestricted p.s Не знаю, может только у меня была такая проблема...
а к многостраничному сайту ко всем страницам где нужен js подключать main.js и все? Если например на странице1 есть кнопка ,а на странице2 этой кнопки нет и я в main.js я накину обработчик на эту кнопку, то ошибки не будет ,что на странице2 нет это кнопки?
Зависит от ваших предпочтений. Можете сделать разные файлы и подключать на разных страницах, можете в одном, но нужно проверку делать на наличие элемента на странице.
@@maxgraph а если например мне нужно на нескольких страницах одинаковую яндекс карту через апишку вызывать. Могу просто создать отдельный файл под нее и импортировать в нужные js файлы да?
Учусь делать сборку по этому видео, а потом уже посмотрю про обновления) Вот у меня пока такой вопрос. Когда устанавливаю плагины, то npm ругается. Вот пример его ругани 15 vulnerabilities (6 moderate, 6 high, 3 critical). Безопасно ли ставить и использовать в проектах? Ведь он вроде указывает, что есть дыры в безопасности. Я так понял, что он после каждой установки пишет общее количество уязвимостей, но фиксить командой не особо удается.
Возникает проблемка: "found 1 high severity vulnerability in 737 scanned packages". Началось всё при установке browser-sync. Уже пару раз удалял и устанавливал, отключал audit что бы хоть как-то установить его, после обратно включил. Теперь установливал file-include и эта же ошибка появляется и скорее всего из-за browser-sync. Как обойти эту проблему кто нибудь знает?
Максим здравствуйте! Есть вопрос. При выполнении watchFile всё срабытывает ОК, но после сохранения в main.scss выскакивает ошибка, 'TypeError: dest.on is not a function' и это только при выполнении styles, 36 минута видео, и такая же ситуация fileinclude. На просторах инета мало что есть. Хотелось бы с этой ошибкой разобраться.
Добрый день, спасибо за видео, все очень подробно обясняется! И отдельное спасибо за зборку! Подскажите пожалуйста ни как не могу разобратся как использовать в сборке медиа запросы @media для мобильной версии. Мжет есть видео или инструкция? Зарание спасибо!
Максим, а есть возможность во время сборки спрайта убирать значения width, height и fill из всех svg что в него попадают ? Ведь в этом вся прелесть управлять этими стилями из css.
Здравствуйте, подскажите, у меня при настройке 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. В чем может быть ошибка не подскажете?
Привет Макс, делаю все по видео, но у меня выходит ошибка не могу понять почему. Якобы зависимости не подходят. Я уже готовый код с github взял, но тоже самое. npm ERR! code 1 npm ERR! gyp verb cli Кто нибудь сталкивался ? Подскажите как исправить
Про js модули. А если мне нужно сделать в header активные/неактивные классы по клику. И этот header на 10 страницах используется. И к каждой этой странице подключен уникальный js файл именно для работы с этой страницей. Значит нужно создать функцию с отдельном js файле и экспортнуть просто во все эти 10 файлов ?
Недоработка сборки в том, что html-инклюды не обновляются без перезагрузки. Это очень легко пофиксить, нужно добавить watch('./src/html/**.html', HTML_INCLUDE); в функцию WATCH_FILES. В видео названия функций в camelCase, но кому надо, разберутся)
Спасибо за сборку, но после этой сборки не могу понять как достать папку со стилями (то есть slick.css) для slick-carousel. Куда его сохранять и как достать, если я скачал slick-carousel через npm ?
Почему то приходится создавать 2 package.json один родителю другой в папке проекта. Если скачивать как на видео npm install --global gulp-cli то файл самый первый package.json не меняется. Что делать?
В чём разница dependencies от devDependencies? Если к примеру всё хранить в dependencies, то при (пере)использовании проекта, зависимости не установятся?
это нормально что webpack при импорте функции console.log превращает ее в простынь из кода (*! no exports provided */function(module,__webpack_exports_) и тд?
@MaxGraph Максим, спасибо за Вашу деятельность, но на мой взгляд голос на всех видео, которые я посмотрел, звучит значительно тише, чем та же заставка.
Я заметил в твоей сборке, что, если в двух местах записаны одинаковые медиавыражения (брейкпоинты px) они в main.min.css cклеиваются в одно выражение и просто два правила, не подскажешь что это делает в твоей сборке?
Максим, не мог бы помочь мне разобраться кое с чем, создал себе тоже сборку галп, делал по документации и твоему уроку. Допустим я пишу в scss/components/_header.scss, задаю там путь к картинке, по сути он будет "../../images/images.jpg" и после билда, этот путь и сохраняется в main.min.css и он лежит уже в корне папки css и получается судя по его директории, путь нужен "../images/image.jpg" а не "../../' и получается картинка уже не работает, как победить эту проблему?
@@maxgraph Структура проекта практически как у тебя, я в общем разобрался и причина в том, что scss файл находится чуть глубже, чем style.min.css, и получается придется каждый раз удалять ../ при задании пути в scss чтоб этот относительный путь был верным в css. В общем вернулся к прошлой плоской структуре scss как у меня была, все работает)
Здравствуйте, сделал сборку как у вас и столкнулся с проблемой. Если использовать в коде async/await то webpack ломается и выдает ошибку. Пытался решить многими способами, но ничего не помогло.
Привет. Кто-нибудь подключал локально jquery и разные плагины? У вас все нормально работает? Подключаю jquery модулем в main.js, выдает ошибку. Через cdn в index.html подключаю, все ок. Спасибо за ответ
@@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);
Что делать, если и после этого не работает? gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp styles + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@@DNValeria из текущей папки выйди до рабочего стола. и там установи gulp глобально. А вообще всё сделай ровно так, как написано на оф страничке gulp. Я первый раз делал по какому то видео, пол дня промучился. Потом сделал npm uninstall gulp и заново всё установил как в оф. документации.
Что надо изучать, чтобы самому уметь настраивать все это, чтобы было понятно что и как работает тут? Как бы я понимаю поверхностно, когда автор объясняет, но сам с 0 настроить не смогу. Может быть надо уметь понимать документацию каждого плагина gulp? Так, если подумать, то стоит ли в это углубляться? Ведь 1 настроил и все, пользуйся. Такая же история с webpack...
Ломаю голову как с помощью плагина webpack подключить один js файл в другой (к примеру: библиотеку jQuery всунуть в основной файл script.js). Ты в видео упоминал что это можно сделать с его помощью. Можешь подсказать?
@@maxgraph просто я пытаюсь соединить (пусть не jQuery, а любые другие файлы с основным) через gulp-concat но у меня валятся ошибки если далее в функции использую webpack.
@@maxgraph да есть(Лучший слайдер для сайта на чистом JS) видео я посмотрел у вас слидер подключен в index.html a можно как-то с помощи импорта из node_modules ?
Столкнулся с проблемой, если верстать многостраничный сайт, другие страницы кроме index.html из папки src не импортируются. Вот сразу решение: const HTML_INCLUDE = () => { return src(['./src/*.html']) .pipe(FILE_INCLUDE({ prefix: '@', basepath: '@file' })) .pipe(dest('./app')) .pipe(BROWSER_SYNC.stream()); }
Спасибо за видео! Может кто подскажет, при вводе gulp styles в windows powelshell выдает ошибку sass.sync is not a function, не могу найти решение проблемы
у меня то же самое, только при выполнении команды "gulp styles" пишет, что "gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правил ьность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp styles + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException"🌚 В программировании я не разбираюсь от слова совсем и поэтому не понимаю, как решить данную проблему
@MaxGraph - cайты как страсть Уже 3 дня сижу голову ламаю как пофиксить эту ошибку: ReferenceError: reguire is not defined, если знаешь скажи пожалуйста! Могу скрины скинуть. Реально жесть какая-то
Тоже не работал sprite. Оказалось что файлы .svg нужно добавлять в папку src/img/svg/ После этого файл sprite.svg формируется и обновляется в папке app/img
Всем привет. Пытаюсь подключить 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.
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
А зачем ты вместо создания функций как в документации присваиваешь переменным стрелочные функции, в чем преимущества этого? gulpjs.com/docs/en/getting-started/creating-tasks/
@@maxgraph Да, прямо там подробно описал проблему, поскольку в двух словах не объяснить. Нужно кодом показывать. Могу ещё ссылку на репозиторий дать, вот github.com/logdog90/GulpStartTemplate
Я работаю с Gulp уже много лет, и это не тянет на полное руководство. Ваша сборка не оптимальна для реальной работы, даже та, что обновлена на github Очень много хлама взято из третьей версии, который в 4 вообще не нужен, например sourcemaps уже есть из коробки и не нужно ставить никаких плагинов. Вотчеры умеют запускать таски перед тем как начинать следить за файлами, смотрите документацию. Также советую почитать про glob параметр в галпе, вы его используете крайне неэффективно. А ещё хорошо бы освоить lastRun(), symlink() и события добавления и удаления файлов - без этого вся сборка это "Эксперименты новичка" В итоге из фишек Gulp 4 использовано от силы процентов 10% - единственный совет - читать документацию полностью С точки зрения оформления видео - всё круто, таймкоды, описание, ссылки - за это спасибо
Что значит "не оптимальна"? как "оптимальность" влияет на работу? =) Сборка работает, выполняет свою задачу, а все эти "хорошо бы освоить" - да, прикольно, но зачем?) Безусловно, вы в чем-то правы. Но у меня другой подход)
Здравствуйте, есть пару вопросов, был бы благодарен, если чем-то поможете. 1. Вы говорите, что "вотчеры умеют запускать таски перед тем как начинать следить за файлами". А какая практическая польза от этого? И я правильно понимаю, что этого можно достичь с помощью ignoreInitial со значением false? 2. События добавления и удаление файлов - это часть watched events в разделе watching files в документации? Если да, то там вроде и несильно объясняют про них.. 3. про symlink() чет вообще ничего не понял, можете в двух словах объяснить, что это за штуковина?
@@peterquill7120 Приветствую! По пунктам: 1)Практическая польза в том, что вотчер перед тем как начать за чем-то следить, может запустить нужный таск. Но этим пользуются крайне редко, так как есть и другие способы запуска тасков. Здесь я упомянул про это чисто применительно к данному видосу. 2)Верно это про события наблюдения и их можно очень круто использовать в сборке, чтобы в ручную ничего не удалять. В доках согласен слабо описан этот момент, но в сети есть куча примеров как этим пользоваться. 3)Symlink - это когда сборка вместо того, чтобы записывать в конечную папку реальные файлы, записывает ярлыки на файлы, которые ничего не весят, а следовательно экономят ресурс SSD дисков, хотя в современных реалиях это уже не очень критично. Но всё равно это способ оптимизации сборки и скорости её работы. Многих смущают эти ярлыки, так как они думают - ну это же не реальные файлы, как браузер их будет отображать, а браузеру пофиг, он легко хавает и ярлыки и прекрасно показывает всё, что надо.
при работе с 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' } Что с этим делать и как исправить? Потому что проект не собирается и не запускается.
да, у меня тоже вылезло, переустановил del - *npm i -D del@^5.1.0* интересно, как установить все пакеты из package.json с привязкой к версиям в этом файле?
Скачал сборку с недавней готовой версткой магазина - "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 и npm проблемы быть не может? gulp: CLI version: 2.3.0 Local version: 4.0.2 node: v12.22.9 windows 7 (без особых проблем).
Друзья, очень важное пояснение, я поработал с этой сборкой еще и заметил один нюанс - если допустить ошибку в js-коде - падает сборка. Я сделал следующее:
.on('error', function (err) {
console.error('WEBPACK ERROR', err);
this.emit('end'); // Don't stop the rest of the task
})
чтобы ловить ошибку, не допуская падения сборки.
Конечно же, код обновил на GitHub.
Спасибо!
Привет. Спасибо за видео. А в какой момент вставить этот код?
@@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 необходим.
Отличная сборка! Хорошо что подружил gulp c webpack-ом, а именно работа с JS-модулями. А отправка проекта сразу на ftp через gulp, вообще нужная вещь! Спасибо!
Замечательное видео про Gulp - все спокойно и понятно.
Спасибо огромное Вам за это видео! Все понятно и доходчиво! Успехов в развитии канала! Продолжайте в том же духе!
Спасибо)
Именно та сборка, которую я искал, да еще и максимально доступным объяснением. Спасибо за вашу работу. PS. Налепите себе стикер куда-нибудь с напоминанием об увеличении шрифта :D
Да уж надо бы :D спасибо)
@@maxgraph в твоей сборке есть pug?
Нет
@@maxgraph очень жаль. А в дальнейшем на твоем канале, планируется сборка с шаблонизатором Pug?
Да, будет
Блин, как же чётко ты всё делаешь! Спасибо за контент!
Спасибо =)
Макс, спасибо! Очень клевая сборка. Подача тоже на уровне. Так держать ;)
Спасибо)
Макс, спасибо за твои видео, очень информативно и интересно. Можно пожалуйста вынести видео по gulp в отдельный плейлист, ибо мне(и не только мне) сложно ориентироваться по видео, откуда начать и чем закочить...
Супер просто и подробно объяснено! Доп вопросов не осталось))))
рад помочь :)
спасибо за сборку. остальное буду делать сам по своему вкусу и потребностям )
Пожалуйста :)
Привет. Спасибо за видео. Автоматическую подстановку начертания можно делать исходят из названия шрифта. Например: Roboto-Light разбиваем название на две части Roboto, Light и проверяем условием если Light то ставим 300, если Bold, то соответственно уже будет 700 и тд
Привет! Да, я примерно так и сделал)
@@maxgraph после запуска gulp сбрасывает опять на 400
Большое спасибо! буду теперь пользоваться Gulp :)
Рад помочь)
Лучшее видео по GULP
Очень благодарен, все доходчиво и понятно)
Идея для виде: Подключение kendo for angular/jquery к проекту. Перерыл весь ютуб, нет ни одного РУ туториала, да и на инглише не густо...
Все понятно и волшебно!
Отлично)
44:50 В Watch Первым параметром можно указывать и массив, а не копипастить :)
Магия)))) он все преобразовал
Вот прям то что нужно. Спасибо 👍
Доброй ночи, скажите пожалуйста как правильно добавлять аудио и видео файлы с gulp? Может есть видео или статья. Гуглил, находил, но не добавляются.
Совершенно случайно наткнулся на видео. Спасибо за пояснения и саму сборку, от души! Единственное, под конец, когда ты настроил webpack с babel, и есть autoprefixer хотелось бы узнать про BrowserList. На практике как это анализировать и выставить оптимальное?
Зависит от проекта и поддержки. Я не поддерживаю ie, мне неважно
Очень хорошо рассказано, спасибо большое
Спасибо)
Как я могу сделать так, чтобы у меня main.js было несколько.
Т.е. мне нужно чтобы для каждой страницы был свой отдельный так сказать main.js
Для главной страницы - index.js
Для другой страницы например catalog.js
И для каждого отдельного файла index.js, catalog.js работал импорт модулей.
Как такое можно реализовать?
Жесткий билд!!!! Для настощих мужиков!!)))
вопросы: как мы можем подключать различные файлы стилей типа normalize.css.css в саму сборку gulp? И если у нас несколько js-файлов могут быть, то они в main.js все "сольются", ?
Подключать css файлы можно через import
Всё, что подключено в mainjs - сольется в один файл
Webpack одной этой настройкой компилирует скрипты в сильное сжатие, с заменой имён функций и переменных, плюс ко всему частично заменяет на ES5.
*output: {
filename: 'main-script.js',}*
То есть по сути никакой uglify и terser не нужен. Но вообще хотелось бы как-то этот момент контролировать, чтобы можно было компилировать скрипты сначала в несжатый вид но уже с babel для отладки его работы, в документации я не нашёл соответствующих настроек, может вы подскажете?
По вебпаку не подскажу :)
"gulp : Не возможно загрузить файл С:\ ...... , так как выполнение сценариев отключено в этой системе."
Исправить можно так:
1. Запустить Windows PowerShell от имени Администратора.
2. Прописать Set-ExecutionPolicy Unrestricted
p.s Не знаю, может только у меня была такая проблема...
Спасибо :)
спасибо)
а к многостраничному сайту ко всем страницам где нужен js подключать main.js и все? Если например на странице1 есть кнопка ,а на странице2 этой кнопки нет и я в main.js я накину обработчик на эту кнопку, то ошибки не будет ,что на странице2 нет это кнопки?
Зависит от ваших предпочтений. Можете сделать разные файлы и подключать на разных страницах, можете в одном, но нужно проверку делать на наличие элемента на странице.
@@maxgraph а если например мне нужно на нескольких страницах одинаковую яндекс карту через апишку вызывать. Могу просто создать отдельный файл под нее и импортировать в нужные js файлы да?
Да, это будет удобно
Учусь делать сборку по этому видео, а потом уже посмотрю про обновления) Вот у меня пока такой вопрос. Когда устанавливаю плагины, то npm ругается. Вот пример его ругани 15 vulnerabilities (6 moderate, 6 high, 3 critical). Безопасно ли ставить и использовать в проектах? Ведь он вроде указывает, что есть дыры в безопасности. Я так понял, что он после каждой установки пишет общее количество уязвимостей, но фиксить командой не особо удается.
Здравствуйте. Да, это все безопасно)
@@maxgraph Спасибо) Доверюсь) А то начал переживать, что это может как-то навредить или моему компу или потом сайту.
Возникает проблемка: "found 1 high severity vulnerability in 737 scanned packages". Началось всё при установке browser-sync. Уже пару раз удалял и устанавливал, отключал audit что бы хоть как-то установить его, после обратно включил. Теперь установливал file-include и эта же ошибка появляется и скорее всего из-за browser-sync. Как обойти эту проблему кто нибудь знает?
Максим здравствуйте! Есть вопрос. При выполнении watchFile всё срабытывает ОК, но после сохранения в main.scss выскакивает ошибка, 'TypeError: dest.on is not a function' и это только при выполнении styles, 36 минута видео, и такая же ситуация fileinclude. На просторах инета мало что есть. Хотелось бы с этой ошибкой разобраться.
Надо смотреть, так сложно сказать
Доброго времени суток, а когда включать билд версию? и для чего нужен тогда styles & scripts если мы потом прописали stylesBuild & scriptsBuild
Привет. Когда нужно получить сжатые файлы)
Стайлс нужен для сборки в режиме разработки
@@maxgraph получается, когда я разрабатываю, я все делаю через Стайлс, а перед тем как уже отправить заказчику, я делаю билд , все так?
Да
Вот это я понимаю, класс!
спасибо)
Добрый день, спасибо за видео, все очень подробно обясняется! И отдельное спасибо за зборку!
Подскажите пожалуйста ни как не могу разобратся как использовать в сборке медиа запросы @media для мобильной версии.
Мжет есть видео или инструкция?
Зарание спасибо!
Добрый день! есть видео по sass на канале, там я показываю это
@@maxgraph
Спасибо!
Максим, а есть возможность во время сборки спрайта убирать значения width, height и fill из всех svg что в него попадают ? Ведь в этом вся прелесть управлять этими стилями из css.
Есть, я думаю. Но не искал)
hey, gulp-file-include for loop and json file how to? tutorial? help!
Здравствуйте, подскажите, у меня при настройке 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 не подскажете пожалуйста как решить 🙏
у меня была такая же ошибка, из-за модуля del
просто поставил более старую версию
npm i del@6.1.1 -D
Отлично! Лайк!
Привет Макс, делаю все по видео, но у меня выходит ошибка не могу понять почему. Якобы зависимости не подходят. Я уже готовый код с github взял, но тоже самое.
npm ERR! code 1
npm ERR! gyp verb cli
Кто нибудь сталкивался ? Подскажите как исправить
Привет. Вставь ошибку в гугл, по первой же ссылке ответ)
Про js модули. А если мне нужно сделать в header активные/неактивные классы по клику. И этот header на 10 страницах используется. И к каждой этой странице подключен уникальный js файл именно для работы с этой страницей. Значит нужно создать функцию с отдельном js файле и экспортнуть просто во все эти 10 файлов ?
Скорее всего
@@maxgraph А скажи еще пожалуйста. Когда полностью сверстал сайт и нужно отдать заказчику, то пишешь gulp build и кидаешь заказчику папку app?
да
Недоработка сборки в том, что html-инклюды не обновляются без перезагрузки. Это очень легко пофиксить, нужно добавить watch('./src/html/**.html', HTML_INCLUDE); в функцию WATCH_FILES. В видео названия функций в camelCase, но кому надо, разберутся)
Все прекрасно обновляется, у вас что-то не то. Покажу на марафоне)
@@maxgraph Значит я сам накосячил)
Я проверю ещё конечно, но все работало, на проектах проверено)
Поддерживаю! Не обновлялось
@@serhiib16 Так же в этой сборке не хватает преобразования изображений в webp. И проблему со шрифтами тоже нужно решить
Спасибо за сборку, но после этой сборки не могу понять как достать папку со стилями (то есть slick.css) для slick-carousel. Куда его сохранять и как достать, если я скачал slick-carousel через npm ?
Если через npm, папка не нужна
У меня теперь новая проблема. После gulp build картинки svg пропадают, в чем может быть проблема?
Вы крут
Спасибо)
Почему то приходится создавать 2 package.json один родителю другой в папке проекта. Если скачивать как на видео npm install --global gulp-cli то файл самый первый package.json не меняется. Что делать?
Странно, не знаю даже.
В чём разница dependencies от devDependencies? Если к примеру всё хранить в dependencies, то при (пере)использовании проекта, зависимости не установятся?
Установятся. Но просто dependencies - это непосредственно то, что нужно в проекте, а не для сборки.
Ну а devdependencies соответственно для сборки
@@maxgraph это как-то сказывается на исходных или build файлах, или это информация для разработчика и не более?
Не сказывается
@@maxgraph спасибо 👍
это нормально что webpack при импорте функции console.log превращает ее в простынь из кода (*! no exports provided */function(module,__webpack_exports_) и тд?
Да, нормально))
@MaxGraph Максим, спасибо за Вашу деятельность, но на мой взгляд голос на всех видео, которые я посмотрел, звучит значительно тише, чем та же заставка.
Ну по уровням в программе - все ровно)
@@maxgraph в наушниках все ок, а вот динамики в мониторе воспроизводят голос тихо, заставка существенно громче. Это собственно не критично, но все же.
А не планируется видоса про SVG, о том как лучше вставлять на страницу, изменять размер и цвет?)
Будет, ближе к середине августа :)
уже есть
20 минут смотрел с 300% увеличением содержимого на экране)
Я заметил в твоей сборке, что, если в двух местах записаны одинаковые медиавыражения (брейкпоинты px) они в main.min.css cклеиваются в одно выражение и просто два правила, не подскажешь что это делает в твоей сборке?
Конкатенация, видимо
@@maxgraph В твоем gulpfile в функции styles нету конката
Круто, спасибо!!!
Пожалуйста)
Новое видео по обновленному GULP 5 будет на канале?
У галпа последняя версия 4,что за 5?
Подскажите пожалуйста начинающему,Gulp сначала установить глобально на компьютер ?
Да
Почему после ввода в консоль gulp watchFiles, командная строка перестает работать и не реагирует на ввод?
Потому что запущен вотчинг
Можно отменить через ctrl+c
Спасибо!! =)
Максим, не мог бы помочь мне разобраться кое с чем, создал себе тоже сборку галп, делал по документации и твоему уроку. Допустим я пишу в scss/components/_header.scss, задаю там путь к картинке, по сути он будет "../../images/images.jpg" и после билда, этот путь и сохраняется в main.min.css и он лежит уже в корне папки css и получается судя по его директории, путь нужен "../images/image.jpg" а не "../../' и получается картинка уже не работает, как победить эту проблему?
А как устроены папки?
@@maxgraph Структура проекта практически как у тебя, я в общем разобрался и причина в том, что scss файл находится чуть глубже, чем style.min.css, и получается придется каждый раз удалять ../ при задании пути в scss чтоб этот относительный путь был верным в css. В общем вернулся к прошлой плоской структуре scss как у меня была, все работает)
Хорошо)
Вопрос, как ты используешь шаблонизацию + бэм, например те же миксы?
Да
Добрый день.Webstorm не видит gulp sass. Через Powershell все установилось.. В чем беда, подскажите?
Добрый вечер. Не работал в вебшторм, не могу сказать
Здравствуйте, сделал сборку как у вас и столкнулся с проблемой. Если использовать в коде async/await то webpack ломается и выдает ошибку. Пытался решить многими способами, но ничего не помогло.
Здравствуйте. Не приходилось его использовать)
Привет. Кто-нибудь подключал локально jquery и разные плагины? У вас все нормально работает? Подключаю jquery модулем в main.js, выдает ошибку. Через cdn в index.html подключаю, все ок. Спасибо за ответ
import './vendor/jquery-3.5.1.min.js'; - Вот так подключаю в main.js, не работает
импорт так не работает) лучше тогда уж через npm это сделать. либо через require.
Спасибо за Труд!
Пожалуйста)
Классный видос, спасибо
спасибо)
А при подключении просто шрифтов woff2, нужно что-то добавлять в gulpfile? Спасибо за ответ
Нет
@@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);
У вас другая структура, не знаю
Можно ли добавить класс к заинклюденному файлу в html (который добавляется через @include('file.html'))? Могло бы быть полезным для создания миксов.
Добавить как? Js?
@@maxgraph Ну я имею ввиду с помощью include. Или это невозможно без js и вообще это не очень хорошая практика?
не думаю, что так можно)
скажите пожалуйста мне как новичку, эта сборка еще актуальна в 2022 году?
Да)
@@maxgraph спасибо
после запуска browset sync, не возможности что либо вводить в консоль, как это исправить?
Никак, вотчинг же идёт
@@maxgraph А как отменить вотчинг, не перезапуская консоль?
@@maxgraph Прошу прощения, не заметил комбинацию ctrl + c + ^
почему таскам с html, css надо делать exports, а остальным нет?
Потому что это не таски, а функции
круто, спасибо
Пожалуйста)
Макс, а как ты юзаешь svg спрайт в css в background?
Никак, в видео про свг это говорил :)
17:00
gulp styles сработал, когда дописал так: const sass = require('gulp-sass')(require('sass'));
Да, потому что новая версия вышла
@@maxgraph Это понятно. Вдруг у кого получаться не будет. Чтоб не искали.
Что делать, если и после этого не работает?
gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку.
строка:1 знак:1
+ gulp styles
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
@@DNValeria из текущей папки выйди до рабочего стола.
и там установи gulp глобально.
А вообще всё сделай ровно так, как написано на оф страничке gulp.
Я первый раз делал по какому то видео, пол дня промучился. Потом сделал npm uninstall gulp и заново всё установил как в оф. документации.
@@dmitrijloskutnikov694 , большое спасибо)
Что надо изучать, чтобы самому уметь настраивать все это, чтобы было понятно что и как работает тут? Как бы я понимаю поверхностно, когда автор объясняет, но сам с 0 настроить не смогу. Может быть надо уметь понимать документацию каждого плагина gulp? Так, если подумать, то стоит ли в это углубляться? Ведь 1 настроил и все, пользуйся. Такая же история с webpack...
Нужно знать базовый синтаксис js и уметь работать с документацией
@@maxgraph Спасибо
Хотелось бы узнать как сделать обновление Include файлов которые прописаны в index.html?
Они же и так обновляются)
@@maxgraph Обновляются, только после сохранения главного файла index.html =(
@@maxgraph Добавил строку watch('./src/html/*.html', htmlInclude);
Теперь все работает как надо.
Вот это тема хорошая
А ведь в gulp-sass можно указать метод сжатия compressed, зачем тогда нужен gulp-clean-css?
Может и можно =) привычка все равно
Ломаю голову как с помощью плагина webpack подключить один js файл в другой (к примеру: библиотеку jQuery всунуть в основной файл script.js). Ты в видео упоминал что это можно сделать с его помощью. Можешь подсказать?
Через npm, можно прямо на странице jquery посмотреть
@@maxgraph просто я пытаюсь соединить (пусть не jQuery, а любые другие файлы с основным) через gulp-concat но у меня валятся ошибки если далее в функции использую webpack.
Посмотрите вёрстку интернет магазина, там я делаю такие подключения. Просто с телефона неудобно))
@@maxgraph спасибо, гляну. как раз собирался этот плейлист смотреть
@@АнтошкаРадов Приятного просмотра)
Добрый день подскажите пожалуйста как прикрутить swiper slider с помощью импорта.
Здравствуйте, есть видео на канале отдельное, не так давно вышло.
@@maxgraph да есть(Лучший слайдер для сайта на чистом JS) видео я посмотрел у вас слидер подключен в index.html a можно как-то с помощи импорта из node_modules ?
@@romannovak375 ruclips.net/video/-Uk3I1T3QY4/видео.html - вот же)
@@maxgraph большое спасибо заработал вы лучший 😎
спасибо!
Пожалуйста)
Столкнулся с проблемой, если верстать многостраничный сайт, другие страницы кроме index.html из папки src не импортируются. Вот сразу решение:
const HTML_INCLUDE = () => {
return src(['./src/*.html'])
.pipe(FILE_INCLUDE({
prefix: '@',
basepath: '@file'
}))
.pipe(dest('./app'))
.pipe(BROWSER_SYNC.stream());
}
модифицируй стрелочную функцию: return src(['./source/*.html', './source/template/*.html'])
модифицируй watch: watch(['./source/*.html', './source/template/*.html'], htmlInclude);
Спасибо за видео! Может кто подскажет, при вводе gulp styles в windows powelshell выдает ошибку sass.sync is not a function, не могу найти решение проблемы
Нужно переписать инициализацию sass, пример указан в доке
у меня то же самое, только при выполнении команды "gulp styles" пишет, что "gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правил
ьность написания имени, а также наличие и правильность пути, после чего повторите попытку.
строка:1 знак:1
+ gulp styles
+ ~~~~
+ CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException"🌚
В программировании я не разбираюсь от слова совсем и поэтому не понимаю, как решить данную проблему
@MaxGraph - cайты как страсть Уже 3 дня сижу голову ламаю как пофиксить эту ошибку: ReferenceError: reguire is not defined, если знаешь скажи пожалуйста! Могу скрины скинуть. Реально жесть какая-то
Лучше в личку в вк или телеграме) а там уже посмотрю ближе к вечеру
Как ты проверяешь поддержку своего проекта на safari?
Пользуюсь виртуальной машиной :)
Лайк
Все классно как всегда, но не работает gulp-svg-sprite.
Что то изменилось с момента записи видоса?
Нет
Тоже не работал sprite. Оказалось что файлы .svg нужно добавлять в папку src/img/svg/ После этого файл sprite.svg формируется и обновляется в папке app/img
А какой сборкой пользуешься её где найти? я про Gulp
Есть видео по галп на канале)
Макс, как дебажить js код, если он собран webpack'ом?
он же выкидывает ошибки)
@@maxgraph Это да, но есть ли возможность ставить брейкпоинты и пробегаться построчно по коду?
@@Zadrot1080p тут не в курсе
@@maxgraph Вы код только по ошибкам дебажите, построчно не проходите?
Не требуется для работы
Актуально сейчас?
Конечно, галп же до сих пор 4
Лучший!
Всем привет. Пытаюсь подключить 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 Почему то именно jquery не подключается, с другими файлами все ок. Вот так подключаю import './jquery.min.js';
Так нельзя, если через npm подключаете - тогда импорт другой
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
@@maxgraph Дак я npm не подключаю. Просто скачал файлом его и подключил в main.js как остальные файлы. А какой другой импорт?
Привет, а как настроить что б в конечную папку попадал fonts ttf
Привет! В последней версии сборки отсутствует данный функционал. ruclips.net/video/CYkKUnAZlMI/видео.html
@@maxgraph я понимаю , но если передо мной стоит такая задача
Ну просто вставьте ttf да и все, должно попасть)
@@maxgraph так а где в gulpfile написать что б в конечную папку проекта попадали не только woff а и ttf
@@maxgraph просто закинуть вручную в конечный проект это хорошо , но все равно есть ж какой то способ что б само попадало
Зачем sourcemaps нужен?
Для помощи разработчику. Если написать код в разных scss-файлах - мы не сможем в браузере понять, где какой код. а sourcemaps поможет понять.
что за комп у тебя? почему все так мелко?
От компьютера размер не зависит :)
@@maxgraph тогда наверное у тебя монитор 4к, или не знаю, почему все так мелко, чуть ли не прижимаю лицо к экрану чтобы разглядеть код 🤣
Даже если 4к, я делаю 200% увеличение :)
Ничего не видно 🤷
А зачем ты вместо создания функций как в документации присваиваешь переменным стрелочные функции, в чем преимущества этого?
gulpjs.com/docs/en/getting-started/creating-tasks/
Просто так)
@@maxgraph спасибо за сборку
Может кто подсказать почему плагин gulp-file-include некорректно выплёвывает html на выходе? Более подробно я описал здесь qna.habr.com/q/825403
Прямо там написал
@@maxgraph Да, прямо там подробно описал проблему, поскольку в двух словах не объяснить. Нужно кодом показывать. Могу ещё ссылку на репозиторий дать, вот github.com/logdog90/GulpStartTemplate
Напишите в вк мне, завтра посмотрю
@@maxgraph Спасибо, я решил проблему! Я просто допустил ошибку в коде по запарке.
Непонятно почему автор посчитал, что не нужно включать в сборку шаблонизатор.
Потому что сборка - это дело субъективное, я их не использую и не включил в сборку
ужас что со звуком???
Что со звуком?
Голос еле слышно!вообще ужас
Стоит прибавить громкость
Я работаю с Gulp уже много лет, и это не тянет на полное руководство. Ваша сборка не оптимальна для реальной работы, даже та, что обновлена на github
Очень много хлама взято из третьей версии, который в 4 вообще не нужен, например sourcemaps уже есть из коробки и не нужно ставить никаких плагинов.
Вотчеры умеют запускать таски перед тем как начинать следить за файлами, смотрите документацию.
Также советую почитать про glob параметр в галпе, вы его используете крайне неэффективно. А ещё хорошо бы освоить lastRun(), symlink() и события добавления и удаления файлов - без этого вся сборка это "Эксперименты новичка"
В итоге из фишек Gulp 4 использовано от силы процентов 10% - единственный совет - читать документацию полностью
С точки зрения оформления видео - всё круто, таймкоды, описание, ссылки - за это спасибо
Что значит "не оптимальна"? как "оптимальность" влияет на работу? =)
Сборка работает, выполняет свою задачу, а все эти "хорошо бы освоить" - да, прикольно, но зачем?)
Безусловно, вы в чем-то правы. Но у меня другой подход)
посоветуйте видео или статью где описывается как собрать хорошую сборку?
Здравствуйте, есть пару вопросов, был бы благодарен, если чем-то поможете.
1. Вы говорите, что "вотчеры умеют запускать таски перед тем как начинать следить за файлами". А какая практическая польза от этого? И я правильно понимаю, что этого можно достичь с помощью ignoreInitial со значением false?
2. События добавления и удаление файлов - это часть watched events в разделе watching files в документации? Если да, то там вроде и несильно объясняют про них..
3. про symlink() чет вообще ничего не понял, можете в двух словах объяснить, что это за штуковина?
@@peterquill7120 если найдете ответы на свои вопросы, напишите их, пожалуйста, здесь
@@peterquill7120 Приветствую! По пунктам:
1)Практическая польза в том, что вотчер перед тем как начать за чем-то следить, может запустить нужный таск. Но этим пользуются крайне редко, так как есть и другие способы запуска тасков. Здесь я упомянул про это чисто применительно к данному видосу.
2)Верно это про события наблюдения и их можно очень круто использовать в сборке, чтобы в ручную ничего не удалять. В доках согласен слабо описан этот момент, но в сети есть куча примеров как этим пользоваться.
3)Symlink - это когда сборка вместо того, чтобы записывать в конечную папку реальные файлы, записывает ярлыки на файлы, которые ничего не весят, а следовательно экономят ресурс SSD дисков, хотя в современных реалиях это уже не очень критично. Но всё равно это способ оптимизации сборки и скорости её работы. Многих смущают эти ярлыки, так как они думают - ну это же не реальные файлы, как браузер их будет отображать, а браузеру пофиг, он легко хавает и ярлыки и прекрасно показывает всё, что надо.
просто победитель по жизни скопировал весь код, и все равно куча ошибок) шрифт не видит , жс не копилит, секонд2 не отображает, пздц.... 3й день маюсь
Ну смотреть надо))
при работе с 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'
}
Что с этим делать и как исправить? Потому что проект не собирается и не запускается.
Проверьте версии всех плагинов, которые используются. Они должны совпадать с моими, можно глянуть в гите
да, у меня тоже вылезло, переустановил del - *npm i -D del@^5.1.0*
интересно, как установить все пакеты из package.json с привязкой к версиям в этом файле?
@@reutoffreutoff4549 тоже самое, версия npm i del@6.1.1 -D помогла
@@dimapanicov9420 как вариант можно поставить старый nodejs 14 версии, должно все заработать
Скачал сборку с недавней готовой версткой магазина - "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
Насколько понимаю, модули не поддерживаются? Может, еще что установить надо?
Нужно предыдущую версию gulp-image ставить
@@maxgraph, спасибо, попробую!
А как же у вас и у других юзеров работает без предыдущей версии??
у меня в сборке вообще сейчас другой плагин из-за этого)
@@maxgraph
Максим, вы так быстро меняете плагины )))
А из-за версий gulp и npm проблемы быть не может?
gulp:
CLI version: 2.3.0
Local version: 4.0.2
node:
v12.22.9
windows 7 (без особых проблем).
Вряд ли. Но можно попробовать обновиться
Спасибо, крутая сборка !
Пожалуйста)