Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020
Вставка
- Опубліковано 27 чер 2024
- Привет!
В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является Gulp.
Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое.
В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. Поехали!
ctrl+c два раза - для остановки сборки.
У этого видео есть обновление - добавление новых функций в сборку. Ссылка - • Gulp. Обновление сборк...
Содержание:
00:00 - вступление
01:40 - про Node.js и npm
02:57 - создаем папку проекта
03:26 - открываем консоль в конкретной папке
03:45 - создаем файл package.json
05:10 - установка gulp
09:17 - создаем папку исходников - src
10:24 - создаем файл gulpfile.js для написания тасков
11:28 - работа со стилями
27:47 - вотчинг и browsersync (для стилей)
32:36 - обработка html через file-include (и вотчинг)
42:08 - простая перегонка картинок (пока без обработки)
46:10 - работа с svg-спрайтами
52:19 - работа со шрифтами
1:04:15 - простая перегонка ресурсов
1:07:45 - работа с js (webpack-stream)
1:19:48 - делаем build-версию (сжимаем все сильнее + подключаем tinypng)
1:27:52 - деплой верстки на хостинг
1:32:17 - как пользоваться Gulp на других проектах, как запустить сборку в другом месте
1:34:44 - показываю устройство моих файлов в базовой сборке
1:38:00 - заключение
ВАЖНО! Я изменил сборку совсем чуть-чуть, после видео, когда протестил ее побольше и увидел небольшую проблемку - при любой ошибке js-кода сборка вылетала. Исправление уже есть по ссылке на github ниже. Я добавил следующий код, чтоб ловить ошибки, не убивая сборку:
.on('error', function (err) {
console.error('WEBPACK ERROR', err);
this.emit('end'); // Don't stop the rest of the task
})
Полезные ссылки:
clck.ru/Pjikc - исходники из видео на GitHub
nodejs.org/en/ - сайт node.js
gulpjs.com/ - сайт gulp
/ gulp-webpack-jquery - по настройке webpack-stream
Использованные плагины:
www.npmjs.com/package/browser...
www.npmjs.com/package/babel-l...
www.npmjs.com/package/del
www.npmjs.com/package/gulp-au...
www.npmjs.com/package/gulp-cl...
www.npmjs.com/package/gulp-fi...
www.npmjs.com/package/gulp-no...
www.npmjs.com/package/gulp-re...
www.npmjs.com/package/gulp-sass
www.npmjs.com/package/gulp-so...
www.npmjs.com/package/gulp-sv...
www.npmjs.com/package/gulp-ti...
www.npmjs.com/package/gulp-tt...
www.npmjs.com/package/gulp-tt...
www.npmjs.com/package/gulp-ug...
www.npmjs.com/package/gulp-util
www.npmjs.com/package/vinyl-ftp
www.npmjs.com/package/webpack
www.npmjs.com/package/webpack...
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #gulp #верстка
Друзья, очень важное пояснение, я поработал с этой сборкой еще и заметил один нюанс - если допустить ошибку в 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 :)
Рад помочь)
спасибо за сборку. остальное буду делать сам по своему вкусу и потребностям )
Пожалуйста :)
Замечательное видео про Gulp - все спокойно и понятно.
Лучшее видео по GULP
Макс, спасибо за твои видео, очень информативно и интересно. Можно пожалуйста вынести видео по gulp в отдельный плейлист, ибо мне(и не только мне) сложно ориентироваться по видео, откуда начать и чем закочить...
Вот прям то что нужно. Спасибо 👍
Все понятно и волшебно!
Отлично)
Отлично! Лайк!
Спасибо, крутая сборка !
Пожалуйста)
Очень хорошо рассказано, спасибо большое
Спасибо)
Магия)))) он все преобразовал
Именно та сборка, которую я искал, да еще и максимально доступным объяснением. Спасибо за вашу работу. PS. Налепите себе стикер куда-нибудь с напоминанием об увеличении шрифта :D
Да уж надо бы :D спасибо)
@@maxgraph в твоей сборке есть pug?
Нет
@@maxgraph очень жаль. А в дальнейшем на твоем канале, планируется сборка с шаблонизатором Pug?
Да, будет
Круто, спасибо!!!
Пожалуйста)
Очень благодарен, все доходчиво и понятно)
Идея для виде: Подключение kendo for angular/jquery к проекту. Перерыл весь ютуб, нет ни одного РУ туториала, да и на инглише не густо...
Вот это я понимаю, класс!
спасибо)
Классный видос, спасибо
спасибо)
Привет. Спасибо за видео. Автоматическую подстановку начертания можно делать исходят из названия шрифта. Например: Roboto-Light разбиваем название на две части Roboto, Light и проверяем условием если Light то ставим 300, если Bold, то соответственно уже будет 700 и тд
Привет! Да, я примерно так и сделал)
@@maxgraph после запуска gulp сбрасывает опять на 400
круто, спасибо
Пожалуйста)
Лайк
44:50 В Watch Первым параметром можно указывать и массив, а не копипастить :)
Жесткий билд!!!! Для настощих мужиков!!)))
Спасибо за Труд!
Пожалуйста)
спасибо!
Пожалуйста)
Вы крут
Спасибо)
Совершенно случайно наткнулся на видео. Спасибо за пояснения и саму сборку, от души! Единственное, под конец, когда ты настроил webpack с babel, и есть autoprefixer хотелось бы узнать про BrowserList. На практике как это анализировать и выставить оптимальное?
Зависит от проекта и поддержки. Я не поддерживаю ie, мне неважно
@MaxGraph Максим, спасибо за Вашу деятельность, но на мой взгляд голос на всех видео, которые я посмотрел, звучит значительно тише, чем та же заставка.
Ну по уровням в программе - все ровно)
@@maxgraph в наушниках все ок, а вот динамики в мониторе воспроизводят голос тихо, заставка существенно громче. Это собственно не критично, но все же.
Максим, а есть возможность во время сборки спрайта убирать значения width, height и fill из всех svg что в него попадают ? Ведь в этом вся прелесть управлять этими стилями из css.
Есть, я думаю. Но не искал)
А не планируется видоса про SVG, о том как лучше вставлять на страницу, изменять размер и цвет?)
Будет, ближе к середине августа :)
уже есть
У кого выдает ошибку при создании папки App (написании в консоле "gulp styles"), в строку const sass = require('gulp-sass')
добавьте это(require('sass'));
20 минут смотрел с 300% увеличением содержимого на экране)
Webpack одной этой настройкой компилирует скрипты в сильное сжатие, с заменой имён функций и переменных, плюс ко всему частично заменяет на ES5.
*output: {
filename: 'main-script.js',}*
То есть по сути никакой uglify и terser не нужен. Но вообще хотелось бы как-то этот момент контролировать, чтобы можно было компилировать скрипты сначала в несжатый вид но уже с babel для отладки его работы, в документации я не нашёл соответствующих настроек, может вы подскажете?
По вебпаку не подскажу :)
Максим здравствуйте! Есть вопрос. При выполнении watchFile всё срабытывает ОК, но после сохранения в main.scss выскакивает ошибка, 'TypeError: dest.on is not a function' и это только при выполнении styles, 36 минута видео, и такая же ситуация fileinclude. На просторах инета мало что есть. Хотелось бы с этой ошибкой разобраться.
Надо смотреть, так сложно сказать
Доброй ночи, скажите пожалуйста как правильно добавлять аудио и видео файлы с gulp? Может есть видео или статья. Гуглил, находил, но не добавляются.
Учусь делать сборку по этому видео, а потом уже посмотрю про обновления) Вот у меня пока такой вопрос. Когда устанавливаю плагины, то npm ругается. Вот пример его ругани 15 vulnerabilities (6 moderate, 6 high, 3 critical). Безопасно ли ставить и использовать в проектах? Ведь он вроде указывает, что есть дыры в безопасности. Я так понял, что он после каждой установки пишет общее количество уязвимостей, но фиксить командой не особо удается.
Здравствуйте. Да, это все безопасно)
@@maxgraph Спасибо) Доверюсь) А то начал переживать, что это может как-то навредить или моему компу или потом сайту.
Вопрос, как ты используешь шаблонизацию + бэм, например те же миксы?
Да
вопросы: как мы можем подключать различные файлы стилей типа normalize.css.css в саму сборку gulp? И если у нас несколько js-файлов могут быть, то они в main.js все "сольются", ?
Подключать css файлы можно через import
Всё, что подключено в mainjs - сольется в один файл
Как я могу сделать так, чтобы у меня main.js было несколько.
Т.е. мне нужно чтобы для каждой страницы был свой отдельный так сказать main.js
Для главной страницы - index.js
Для другой страницы например catalog.js
И для каждого отдельного файла index.js, catalog.js работал импорт модулей.
Как такое можно реализовать?
Я заметил в твоей сборке, что, если в двух местах записаны одинаковые медиавыражения (брейкпоинты px) они в main.min.css cклеиваются в одно выражение и просто два правила, не подскажешь что это делает в твоей сборке?
Конкатенация, видимо
@@maxgraph В твоем gulpfile в функции styles нету конката
Добрый день, спасибо за видео, все очень подробно обясняется! И отдельное спасибо за зборку!
Подскажите пожалуйста ни как не могу разобратся как использовать в сборке медиа запросы @media для мобильной версии.
Мжет есть видео или инструкция?
Зарание спасибо!
Добрый день! есть видео по sass на канале, там я показываю это
@@maxgraph
Спасибо!
Макс, а как ты юзаешь svg спрайт в css в background?
Никак, в видео про свг это говорил :)
а к многостраничному сайту ко всем страницам где нужен js подключать main.js и все? Если например на странице1 есть кнопка ,а на странице2 этой кнопки нет и я в main.js я накину обработчик на эту кнопку, то ошибки не будет ,что на странице2 нет это кнопки?
Зависит от ваших предпочтений. Можете сделать разные файлы и подключать на разных страницах, можете в одном, но нужно проверку делать на наличие элемента на странице.
@@maxgraph а если например мне нужно на нескольких страницах одинаковую яндекс карту через апишку вызывать. Могу просто создать отдельный файл под нее и импортировать в нужные js файлы да?
Да, это будет удобно
"gulp : Не возможно загрузить файл С:\ ...... , так как выполнение сценариев отключено в этой системе."
Исправить можно так:
1. Запустить Windows PowerShell от имени Администратора.
2. Прописать Set-ExecutionPolicy Unrestricted
p.s Не знаю, может только у меня была такая проблема...
Спасибо :)
спасибо)
Доброго времени суток, а когда включать билд версию? и для чего нужен тогда styles & scripts если мы потом прописали stylesBuild & scriptsBuild
Привет. Когда нужно получить сжатые файлы)
Стайлс нужен для сборки в режиме разработки
@@maxgraph получается, когда я разрабатываю, я все делаю через Стайлс, а перед тем как уже отправить заказчику, я делаю билд , все так?
Да
Все классно как всегда, но не работает gulp-svg-sprite.
Что то изменилось с момента записи видоса?
Нет
Тоже не работал sprite. Оказалось что файлы .svg нужно добавлять в папку src/img/svg/ После этого файл sprite.svg формируется и обновляется в папке app/img
Недоработка сборки в том, что html-инклюды не обновляются без перезагрузки. Это очень легко пофиксить, нужно добавить watch('./src/html/**.html', HTML_INCLUDE); в функцию WATCH_FILES. В видео названия функций в camelCase, но кому надо, разберутся)
Все прекрасно обновляется, у вас что-то не то. Покажу на марафоне)
@@maxgraph Значит я сам накосячил)
Я проверю ещё конечно, но все работало, на проектах проверено)
Поддерживаю! Не обновлялось
@@serhiib16 Так же в этой сборке не хватает преобразования изображений в webp. И проблему со шрифтами тоже нужно решить
А при подключении просто шрифтов 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);
У вас другая структура, не знаю
Вот это тема хорошая
это нормально что webpack при импорте функции console.log превращает ее в простынь из кода (*! no exports provided */function(module,__webpack_exports_) и тд?
Да, нормально))
hey, gulp-file-include for loop and json file how to? tutorial? help!
Максим, не мог бы помочь мне разобраться кое с чем, создал себе тоже сборку галп, делал по документации и твоему уроку. Допустим я пишу в scss/components/_header.scss, задаю там путь к картинке, по сути он будет "../../images/images.jpg" и после билда, этот путь и сохраняется в main.min.css и он лежит уже в корне папки css и получается судя по его директории, путь нужен "../images/image.jpg" а не "../../' и получается картинка уже не работает, как победить эту проблему?
А как устроены папки?
@@maxgraph Структура проекта практически как у тебя, я в общем разобрался и причина в том, что scss файл находится чуть глубже, чем style.min.css, и получается придется каждый раз удалять ../ при задании пути в scss чтоб этот относительный путь был верным в css. В общем вернулся к прошлой плоской структуре scss как у меня была, все работает)
Хорошо)
Возникает проблемка: "found 1 high severity vulnerability in 737 scanned packages". Началось всё при установке browser-sync. Уже пару раз удалял и устанавливал, отключал audit что бы хоть как-то установить его, после обратно включил. Теперь установливал file-include и эта же ошибка появляется и скорее всего из-за browser-sync. Как обойти эту проблему кто нибудь знает?
Спасибо за сборку, но после этой сборки не могу понять как достать папку со стилями (то есть slick.css) для slick-carousel. Куда его сохранять и как достать, если я скачал slick-carousel через npm ?
Если через npm, папка не нужна
У меня теперь новая проблема. После gulp build картинки svg пропадают, в чем может быть проблема?
В чём разница dependencies от devDependencies? Если к примеру всё хранить в dependencies, то при (пере)использовании проекта, зависимости не установятся?
Установятся. Но просто dependencies - это непосредственно то, что нужно в проекте, а не для сборки.
Ну а devdependencies соответственно для сборки
@@maxgraph это как-то сказывается на исходных или build файлах, или это информация для разработчика и не более?
Не сказывается
@@maxgraph спасибо 👍
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 , большое спасибо)
Про js модули. А если мне нужно сделать в header активные/неактивные классы по клику. И этот header на 10 страницах используется. И к каждой этой странице подключен уникальный js файл именно для работы с этой страницей. Значит нужно создать функцию с отдельном js файле и экспортнуть просто во все эти 10 файлов ?
Скорее всего
@@maxgraph А скажи еще пожалуйста. Когда полностью сверстал сайт и нужно отдать заказчику, то пишешь gulp build и кидаешь заказчику папку app?
да
Можно ли добавить класс к заинклюденному файлу в html (который добавляется через @include('file.html'))? Могло бы быть полезным для создания миксов.
Добавить как? Js?
@@maxgraph Ну я имею ввиду с помощью include. Или это невозможно без js и вообще это не очень хорошая практика?
не думаю, что так можно)
А какой сборкой пользуешься её где найти? я про Gulp
Есть видео по галп на канале)
Новое видео по обновленному GULP 5 будет на канале?
У галпа последняя версия 4,что за 5?
Здравствуйте, подскажите, у меня при настройке 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
Почему то приходится создавать 2 package.json один родителю другой в папке проекта. Если скачивать как на видео npm install --global gulp-cli то файл самый первый package.json не меняется. Что делать?
Странно, не знаю даже.
Подскажите пожалуйста начинающему,Gulp сначала установить глобально на компьютер ?
Да
Здравствуйте, сделал сборку как у вас и столкнулся с проблемой. Если использовать в коде async/await то webpack ломается и выдает ошибку. Пытался решить многими способами, но ничего не помогло.
Здравствуйте. Не приходилось его использовать)
Ломаю голову как с помощью плагина webpack подключить один js файл в другой (к примеру: библиотеку jQuery всунуть в основной файл script.js). Ты в видео упоминал что это можно сделать с его помощью. Можешь подсказать?
Через npm, можно прямо на странице jquery посмотреть
@@maxgraph просто я пытаюсь соединить (пусть не jQuery, а любые другие файлы с основным) через gulp-concat но у меня валятся ошибки если далее в функции использую webpack.
Посмотрите вёрстку интернет магазина, там я делаю такие подключения. Просто с телефона неудобно))
@@maxgraph спасибо, гляну. как раз собирался этот плейлист смотреть
@@user-rg3yd2bv6x Приятного просмотра)
Добрый день.Webstorm не видит gulp sass. Через Powershell все установилось.. В чем беда, подскажите?
Добрый вечер. Не работал в вебшторм, не могу сказать
Привет Макс, делаю все по видео, но у меня выходит ошибка не могу понять почему. Якобы зависимости не подходят. Я уже готовый код с github взял, но тоже самое.
npm ERR! code 1
npm ERR! gyp verb cli
Кто нибудь сталкивался ? Подскажите как исправить
Привет. Вставь ошибку в гугл, по первой же ссылке ответ)
Как ты проверяешь поддержку своего проекта на safari?
Пользуюсь виртуальной машиной :)
@MaxGraph - cайты как страсть Уже 3 дня сижу голову ламаю как пофиксить эту ошибку: ReferenceError: reguire is not defined, если знаешь скажи пожалуйста! Могу скрины скинуть. Реально жесть какая-то
Лучше в личку в вк или телеграме) а там уже посмотрю ближе к вечеру
Привет. Кто-нибудь подключал локально jquery и разные плагины? У вас все нормально работает? Подключаю jquery модулем в main.js, выдает ошибку. Через cdn в index.html подключаю, все ок. Спасибо за ответ
import './vendor/jquery-3.5.1.min.js'; - Вот так подключаю в main.js, не работает
импорт так не работает) лучше тогда уж через npm это сделать. либо через require.
А ведь в gulp-sass можно указать метод сжатия compressed, зачем тогда нужен gulp-clean-css?
Может и можно =) привычка все равно
Столкнулся с проблемой, если верстать многостраничный сайт, другие страницы кроме 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);
скажите пожалуйста мне как новичку, эта сборка еще актуальна в 2022 году?
Да)
@@maxgraph спасибо
Хотелось бы узнать как сделать обновление Include файлов которые прописаны в index.html?
Они же и так обновляются)
@@maxgraph Обновляются, только после сохранения главного файла index.html =(
@@maxgraph Добавил строку watch('./src/html/*.html', htmlInclude);
Теперь все работает как надо.
почему таскам с html, css надо делать exports, а остальным нет?
Потому что это не таски, а функции
после запуска browset sync, не возможности что либо вводить в консоль, как это исправить?
Никак, вотчинг же идёт
@@maxgraph А как отменить вотчинг, не перезапуская консоль?
@@maxgraph Прошу прощения, не заметил комбинацию ctrl + c + ^
Почему после ввода в консоль gulp watchFiles, командная строка перестает работать и не реагирует на ввод?
Потому что запущен вотчинг
Можно отменить через ctrl+c
Спасибо!! =)
Что надо изучать, чтобы самому уметь настраивать все это, чтобы было понятно что и как работает тут? Как бы я понимаю поверхностно, когда автор объясняет, но сам с 0 настроить не смогу. Может быть надо уметь понимать документацию каждого плагина gulp? Так, если подумать, то стоит ли в это углубляться? Ведь 1 настроил и все, пользуйся. Такая же история с webpack...
Нужно знать базовый синтаксис js и уметь работать с документацией
@@maxgraph Спасибо
что за комп у тебя? почему все так мелко?
От компьютера размер не зависит :)
@@maxgraph тогда наверное у тебя монитор 4к, или не знаю, почему все так мелко, чуть ли не прижимаю лицо к экрану чтобы разглядеть код 🤣
Даже если 4к, я делаю 200% увеличение :)
Добрый день подскажите пожалуйста как прикрутить swiper slider с помощью импорта.
Здравствуйте, есть видео на канале отдельное, не так давно вышло.
@@maxgraph да есть(Лучший слайдер для сайта на чистом JS) видео я посмотрел у вас слидер подключен в index.html a можно как-то с помощи импорта из node_modules ?
@@romannovak375 ua-cam.com/video/-Uk3I1T3QY4/v-deo.html - вот же)
@@maxgraph большое спасибо заработал вы лучший 😎
Спасибо за видео! Может кто подскажет, при вводе 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"🌚
В программировании я не разбираюсь от слова совсем и поэтому не понимаю, как решить данную проблему
Макс, как дебажить js код, если он собран webpack'ом?
он же выкидывает ошибки)
@@maxgraph Это да, но есть ли возможность ставить брейкпоинты и пробегаться построчно по коду?
@@Zadrot1080p тут не в курсе
@@maxgraph Вы код только по ошибкам дебажите, построчно не проходите?
Не требуется для работы
Привет, а как настроить что б в конечную папку попадал fonts ttf
Привет! В последней версии сборки отсутствует данный функционал. ua-cam.com/video/CYkKUnAZlMI/v-deo.html
@@maxgraph я понимаю , но если передо мной стоит такая задача
Ну просто вставьте ttf да и все, должно попасть)
@@maxgraph так а где в gulpfile написать что б в конечную папку проекта попадали не только woff а и ttf
@@maxgraph просто закинуть вручную в конечный проект это хорошо , но все равно есть ж какой то способ что б само попадало
Непонятно почему автор посчитал, что не нужно включать в сборку шаблонизатор.
Потому что сборка - это дело субъективное, я их не использую и не включил в сборку
Ничего не видно 🤷
Всем привет. Пытаюсь подключить 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 как остальные файлы. А какой другой импорт?
Актуально сейчас?
Конечно, галп же до сих пор 4
Лучший!
Зачем sourcemaps нужен?
Для помощи разработчику. Если написать код в разных scss-файлах - мы не сможем в браузере понять, где какой код. а sourcemaps поможет понять.
А зачем ты вместо создания функций как в документации присваиваешь переменным стрелочные функции, в чем преимущества этого?
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й день маюсь
Ну смотреть надо))
ужас что со звуком???
Что со звуком?
Голос еле слышно!вообще ужас
Стоит прибавить громкость
Скачал сборку с недавней готовой версткой магазина - "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 (без особых проблем).
Вряд ли. Но можно попробовать обновиться
при работе с 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 версии, должно все заработать