По поводу ремов. Я как раз большой их поклонник и использую исключительно rem\em. И скажу что для их использования совсем не обязательно создавать миксины или вспомогательные функции. Сам долго сидел на таких миксинах и как то жутко не удобно мне показалось и потом нашел 1 фокус. Фокус заключается в том что для html мы размер шрифта задаем 62,5%. А для body шрифт задаем 1.6rem. Таким образом мы сохранили дефолтное значение браузера в 16 пикселей, и тем самым округлили 1rem = 10пикселей. Что в будущем помогает отказаться от всех миксинов и можно использовать ремы и емы на прямую)
Вот знаете, Максим, смотрю я на вашу сборку и просто завидую (по белому конечно)). Я до сих пор никак не могу постигнуть или поймать вот этого пониманию того, как делать свою сборку. Да, я могу её сделать опять же по тем же вашим видео урокам и все такое, но когда я пытаюсь самостоятельно это сделать... моё лицо напрягается и стул подомной начинает гореть) Вообщем, спасибо вам большое. Надеюсь я когда-нибудь тоже постигну этот дзен
webp 😍😍😍😍😍😍блин класс !! молодец максим и спасиб за все видосы !! п.с сделай видос для твоего плагина модальных окон с расширеным функционалом (открытие модальки внутри модалки не закрывая предидуший плиз 😍😍😊😊
Можно обновить некоторые модули до последних версий, например, использовать gulp-imagemin v8.0.0 , но тогда придется использовать синтаксис es6 и переписывать все через import/export.
по команде gulp выдает ошибку: Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "dist/typograf.js" defined in the package config D:\WebDeveloper\Templates\10_gulp-maxgraph-master ode_modules\typograf\package.json; targets must start with "./"
Надо поправить пути в node_modules в package.json типографа - в частности 13 14 строки - замените на: "require": "./dist/typograf.js", "import": "./dist/typograf.es.js" Это связано с более строгой проверкой файлов package.json, которая была введена при обновлении NPM
Я только подписался на ваш канал. Подскажите, ваша сборка сама преобразует имеющиеся картинки (например .jpg) в webp и т.д.? Или нужно вручную все картинки проекта преобразовывать в новые форматы? И второй вопрос - как на вашей сборке верстать многостраничные сайты (а если на новых страницах нужен не такой header и footer как на главной?)?
Сборка преобразует сама, вам лишь надо использовать тег picture (есть сниппет). Насчет многостраничных - добавляйте в папку src нужные html-файлы и все. Насчет шапок, футеров и т.д. - можете создать другой хедер в папке partials и подключить его куда надо)
Максим добрый вечер!! Скажите пожалуйста, а у вас на выходе получается несколько файлов js? Я имею ввиду если для каждой страницы свой js файл делать. У меня на выходе получается только один файл ещё и всегда с именем main.js. Или вы все в один файл записываете? Сборку настраивал по вашим видео. И конечно спасибо вам!!
вопросик: а почему data-menu задаётся отдельно для NAV, а не вешается сразу на burger ? разве не лучше делать и для элемента с .menu уже добавлять .menu--active пример: есть бургер для основного меню, а если это, например, интернет-магазин - там может быть свой бургер для категорий товаров.
Для контроля версии в gulpfile.js сделал такие дополнения: const htmlInclude = () => { return src([`${srcFolder}/*.html`]) .pipe(fileInclude({ prefix: '@', basepath: '@file' })) // .pipe(typograf({ // locale: ['ru', 'en-US'] // })) // start--------------------я добавил--------------------------------------------- .pipe( versionNumber({ 'value': '%DT%', 'append': { 'key': '_v', 'cover': 0, 'to': [ 'css', 'js', ] }, 'output': { 'file': 'src/version.json' } }) ) // end -------------------------------------------------------------------------------------- .pipe(dest(buildFolder)) .pipe(browserSync.stream()); } вот только это работает и при разработке и при продакшине. А как сделать только при продакшене мозгов не хватает ))) да, не забудьте подключить контроль версий: const versionNumber = require('gulp-version-number'); и установить его: npm i -D gulp-version-number rypograf закоментил, потому что при инсталяции ругается на него (я по этому поводу уже тут написал коментарий)
Проблему решил установкой костыля )))) : объявил константу похожую на fileInclude, а именно fileIncludeNV и скопировал функцию htmlInclude и обозвал ее htmlIncludeNV (номер версии); в htmlInclude убрал контроль версии, а в htmlIncludeNV оставил; в exports.backend и exports.build заменил exports.build на exports.buildNV; вуаля))).
Сборка понравилась, больше спасибо! Есть вопрос, не совсем понял, а что если надо сделать многостраничник, как быть в таком случае? У нас же один index.html, как допустим открыть Index2.html
Спасибо за сборку, очень удобно ей пользоваться) А подскажите, пожалуйста, может ли быть такое, что в эту сборку нельзя подключить джеквери плагины (и сам джеквери) локально. То есть плагины есть в node_modules, но если подключать их в файлах js, то они не работают. А если подключить в html через cdn, то все ок?
можете подсказать что у меня за проблема? только скачал и написал npm i и после этого такая ошибка Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\web\gulp-maxgraph-master ode_modules\gulp-imagemin\index.js require() of ES modules is not supported. require() of D:\web\gulp-maxgraph-master ode_modules\gulp-imagemin\index.js from D:\web\gulp-maxgraph-master\gulpfile.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\web\gulp-maxgraph-master ode_modules\gulp-imagemin\package.json. at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object. (D:\web\gulp-maxgraph-master\gulpfile.js:24:15) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) { code: 'ERR_REQUIRE_ESM' }
Ребят, может кто-нибудь подсказать? я делаю многостраничный сайт на сборке Максима и в папке "partials" у меня есть вложенные папки для каждой страницы, например "partials/main/contacts.html". И проблема в том что когда пишешь текст/добавляешь теги в этих вложенных файлах, то gulp не обновляет страницу, для того чтобы изменения произошли нужно перезагружать gulp либо сделать изменения в файлах которые лежат в первом уровне вложенности, например "partials/header.html". Кто-нибудь знает как это можно пофиксить? у меня что-то не получается внести нужные правки в файл "gulpfile.js". С CSS и JS такой проблемы нету, тут gulp изменения отслеживает
Кто-нибудь может подсказать, почему если html-файл лежит по такому пути @include('partials/global/header.html'), а не @include('partials/header.html'), то галп сборка не следит за изменениями в файле?) то есть добавляешь теги и тд, гало сборка не видит, что можно прописать в gulpfile что-бы это пофиксить?
а нет, нагнал, в сафари по умолчанию открылся локалхост и неоттипографенные были словечки, в других браузерах норм ( проблемы сафари уже). Ну на всякий в package.json версию "gulp-typograf": "^4.1.0" добавил, обновилась с 403
Не совсем понял насчет "Про поддержку avif и webp" ( Вроде бы сборка не конвертирует автоматом ".jpg или .png" в ".webp"? То есть, самостоятельно через сервисы конвертировать картинки в webp и загружать в папку src уже сконвертированные?
Привет, Максим. Спасибо большое за контент, очень полезно! Только изучаю фронт, решил попробовать твоей сборкой попользоваться, уж очень удобно свиду) Скачал с гита, создаю модалку из снипета, все раскомментировал по инструкции, а модалка всё равно не работает. Не можешь подсказать в чём проблема может быть?
Максим, спасибо вам большое за очень полезный контент. Я еще использую из вашей предыдущей версии задачу с авто установкой шрифтов, мне нравится, я там чуть доработал код. Вопрос по данной сборке. Зачем подключать шрифт через link если он уже импортом в css @font face подключается. Предположу, что это нужно для указания всем текстам на странице нужного шрифта, а уже потом @font face «ужирнит» и «наклонит» там где нужно. Еще раз спасибо за ваш труд, Вы прям на пике трендов в верстке.
хорошая сборка, хотел на пару моментов указать: - - IE умер, надобности в этом теге больше нет, так что теперь этот тег требуется только в исключительных случаях, когда требуется поддержка старых (мертвых) версий IE браузера, а в нормальных условиях (когда IE не существует) это мусорный тег. -
emmet немножечко тупенький и продолжает пихать мёртвый мета тег при генерации базовой структуры html, лечится это переопределением ! сниппета: html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body
image-set в chrome работает, если вместо типа файла type("image/avif") указывать плотность пикселей 1х, ошибку в хроме вызывает именно эта запись, получается, что в хроме нельзя использовать разные типы изображений, но разные размеры под устройства с разной плотностью пикселей - можно... как же показывать разные типы изображений? через добавление тегов к html через js, если браузер поддерживает формат изображения: .image {background-image:url("image.jpg")} .webp .image {background-image:url("image.webp")} .avif .image {background-image:url("image.avif")}
Я не знаю сколько видео ты наснимал, но шрифт в редакторе так и не увеличил, но по сравнению с ранними уже есть улучшения, сейчас держа телефон на расстоянии 10см от глаз можно хоть что то увидеть. Увеличь шрифт уже.
Запускаю сборку и вылетает ошибка с путями у типографа, кто-то смог решить ее? Какой путь и где прописать, что бы все работало? PS D:\Programmirovanie\Default_gulp\gulp-maxgraph> gulp node:internal/modules/cjs/loader:499 throw e; ^ Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "dist/typograf.js" defined in the package config D:\Programmirovanie\Default_gulp\gulp-maxgraph ode_modules\typograf\package.json; targets must start with "./" at new NodeError (node:internal/errors:387:5) at throwInvalidPackageTarget (node:internal/modules/esm/resolve:490:9) at resolvePackageTargetString (node:internal/modules/esm/resolve:523:5) at resolvePackageTarget (node:internal/modules/esm/resolve:570:12) at resolvePackageTarget (node:internal/modules/esm/resolve:619:31) at packageExportsResolve (node:internal/modules/esm/resolve:683:22) at resolveExports (node:internal/modules/cjs/loader:493:36) at Function.Module._findPath (node:internal/modules/cjs/loader:533:31) at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27) at Function.Module._load (node:internal/modules/cjs/loader:804:27) { code: 'ERR_INVALID_PACKAGE_TARGET' }
Надо поправить пути в node_modules в package.json типографа - в частности 13 14 строки - замените на: "require": "./dist/typograf.js", "import": "./dist/typograf.es.js" Это связано с более строгой проверкой файлов package.json, которая была введена при обновлении NPM
Максим, можете подсказать как подключить jquery и slick slider в вашей gulp сборке? Или может, ребят, кто из вас сталкивался с такой задачей и вы юзаете сборку Максима и можете подсказать?
10:40 В чем отличие между подключениями "burger" и "focus-visible"? Если я правильно понял, отличие в том, что "burger" уже есть в самой сборке внутри "node modules", а "focus-visible" - его там нет изначально, это сторонняя библиотека?
Спасибо, Макс. По Вашим урокам освоил галп, теперь уверенно пользуюсь, добавляю легко новые пакеты и тачки. Работать стало удобнее и чувствую себя в процессе профессиональнее. Спасибо!
Я в галпе не силен. Вопрос: есть ли в вашей сборке при продакшене контроль версии. То есть к главному . css и к. js в тегах link и script после имени файла добавляется дата и время их создания?
Как таковой версионности нет, но есть команда gulp cache, которая добавляет случайные символы к названиям файлов, чтобы при выгрузке на хостинг сайт не оставался со старыми данными от кэша.
Подскажите, пожалуйста, почему index.html через локалхост открывается нормально, а если открыть index.html из папки app просто в браузере, без помощи vs code, то он грузится очень долго и картинки не загружаются?
Максим, скажите пожалуйста, а вы как то сжимаете avif и webp? Плагины эти преобразуют из jpg в эти форматы, но по размеру они выходят и больше чем сжатый jpg. Исходник jpg ~900kb, сжатый jpg ~150kb, avif ~200kb и webp ~80kb. Пользуетесь каким то плагином для сжатия этих форматов? Популярные imagemini, image и tinypngcompress с такими форматами не работают. Пробовал squoosh, но он зачем то и png ещё делает из этих картинок.
Здравствуйте. Создаю папку folder/file.html В папке app данный файл и папка не создаются, если перетаскивать их вручную - инклюд не работает. Скажите, как можно это поправить? Или же как мне сделать так, что бы у меня открывалась страница localhost:3000/folder/file.html ?
У меня глючил плагин Project snippets - не работали подсказки, приходилось несколько раз перезапускать VSCode, а иногда отключать или удалять и снова включать этот плагин, чтоб подсказки заработали. Когда я устал с ним воевать, полез почитать мануал :D Оказывается этот плагин уже устарел и его функционал встроен в VSCode по умолчанию. Файл с вашими сниппетами должен иметь расширение .code-snippets и его надо поместить в папку .vscode Вот спешу поделиться этой радостной новостью, а то плагин реально задолбал ))
Я не могу установить вашу сборку из-за устаревшего пакета SVGO. Устаревшая v1.3.2 обновите, прошу, до v2.8.0. По крайней мере так говорит ошибка: svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
Привет Максим, Спасибо , всё впитываются знания но их всё мало и мало! Почему то не работает g-picture - то есть snippet не грузится! Ты не знаешь что это может быть? Буду признателен за помощь
Пользуюсь этой сборкой. При добавлении в каталог второй страницы (многостраничный сайт) на ней не работает js-код, в частности Swiper. CSS и HTML без проблем. Подскажите, почему так?
Максим, спасибо за сборку! Не подскажете, как сделать, чтобы типограф не вырезал скобки? Надо какое-то правило, наверное, прописать. Верстаю сайт, там есть телефон, код из трех цифр в скобках, так типограф скобки вырезает(( Заранее спасибо.
ОШИБКА Cannot find module 'resp-modifier' - КАК пофиксить??? Скачал вашу сборку, установил пакеты, запустил и вижу эту ошибку. В чем проблема подскажите?))
вопрос по svg-спрайту. в сборке удаляются fill. можно его потом изменить через css, но если в картинке несколько цветов, как ты решаешь такую задачу? почему продолжаешь использовать xlink:href ? насколько я понял это устаревший атрибут и его не рекомендуют использовать, та как со временем он может бить удален. спасибо
@@maxgraph понял, спасибо) посомтрю как ты написал скрипт для галпа. потому что у меня проблемы со свайпером 7 версии и выше) после того как свайпер переделали тоже на модульный, появились были проблемы с подключениям. и все время использовал 6 версию :D
@@maxgraph Поставл сборку, буду пробовать на ней верстать, спасибо за проделанную работу! По поводу папки для частей partials, возможно правильно взять эту папку в родительскую layout > partials?
Привет, Макс, подскажи пожалуйста на счет stylelint'a, я склонировал репозиторий, установил зависимости и плагин stylelint. Но он работает только на обычном css, подсвечивает ошибки, а на scss не работает, не работает именно отображение в проблемах, если я вручную вызываю через npx stylelint "**/*.scss" то он все ошибки показывает, но как это отображать в режиме реального времени? может быть что то еще прописать нужно? подскажи пжлст
@@maxgraph , сейчас почему то не работает, вскод гонит, scss не определяет, я в шторме протестировал и тут все нормально, так что либо плагин вс кода либо сам вскод гонит. Макс, попробуй со стайллинтом , у тебя в scss подсвечивает ошибки?
@@maxgraph ну что не подключается через сет, я просто знаю что есть скрипт который определяет поддержку webp браузером и тогда подключает webp без проблем. Хотел ещё сказать спасибо за крайний марафон, сейчас адаптив заканчиваю, очень много информации и полезных советов, просто огонь 👌👌👌
Огромной спасибо, Вы, просто монстр разработки, очень приятно смотреть, все становится сразу понятно, Вы, супер 👍👍👍
спасибо)
По поводу ремов. Я как раз большой их поклонник и использую исключительно rem\em. И скажу что для их использования совсем не обязательно создавать миксины или вспомогательные функции. Сам долго сидел на таких миксинах и как то жутко не удобно мне показалось и потом нашел 1 фокус. Фокус заключается в том что для html мы размер шрифта задаем 62,5%. А для body шрифт задаем 1.6rem. Таким образом мы сохранили дефолтное значение браузера в 16 пикселей, и тем самым округлили 1rem = 10пикселей. Что в будущем помогает отказаться от всех миксинов и можно использовать ремы и емы на прямую)
Вот знаете, Максим, смотрю я на вашу сборку и просто завидую (по белому конечно)). Я до сих пор никак не могу постигнуть или поймать вот этого пониманию того, как делать свою сборку. Да, я могу её сделать опять же по тем же вашим видео урокам и все такое, но когда я пытаюсь самостоятельно это сделать... моё лицо напрягается и стул подомной начинает гореть)
Вообщем, спасибо вам большое. Надеюсь я когда-нибудь тоже постигну этот дзен
Все придёт со временем) пожалуйста)
Максим, спасибо за сборку и за подробные объяснения)
Пожалуйста)
webp 😍😍😍😍😍😍блин класс !! молодец максим и спасиб за все видосы !! п.с сделай видос для твоего плагина модальных окон с расширеным функционалом (открытие модальки внутри модалки не закрывая предидуший плиз 😍😍😊😊
Можно обновить некоторые модули до последних версий, например, использовать gulp-imagemin v8.0.0 , но тогда придется использовать синтаксис es6 и переписывать все через import/export.
Можно. А можно не трогать, работает все прекрасно
огромное спасибо
по команде gulp выдает ошибку: Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "dist/typograf.js" defined in the package config D:\WebDeveloper\Templates\10_gulp-maxgraph-master
ode_modules\typograf\package.json; targets must start with "./"
Надо поправить пути в node_modules в package.json типографа - в частности 13 14 строки - замените на:
"require": "./dist/typograf.js",
"import": "./dist/typograf.es.js"
Это связано с более строгой проверкой файлов package.json, которая была введена при обновлении NPM
@@Sergus1984 Спасибо, проверю. Я бы еще сам проект писал бы не в app, а в dist. Что поменять надо?
@@Sergus1984 Ага, помогло. Огромное спасибо!!!!
@@Sergus1984 сейчас это строки 61 и 62 уже...
Привет, Макс! Спасибо за твои труды.
Привет, спасибо)
Спасибо, как раз обновляю свой Gulp. ))
Пожалуйста)
Очень интересная сборка. Спасибо.
Пожалуйста)
@@maxgraph Интересно tailwind css запихнуть получится?
интересная сборка, а главное, бесплатные исходники, не как у многих.
Спасибо!! Очень классно !!!!
Пожалуйста)
Я только подписался на ваш канал. Подскажите, ваша сборка сама преобразует имеющиеся картинки (например .jpg) в webp и т.д.? Или нужно вручную все картинки проекта преобразовывать в новые форматы? И второй вопрос - как на вашей сборке верстать многостраничные сайты (а если на новых страницах нужен не такой header и footer как на главной?)?
Сборка преобразует сама, вам лишь надо использовать тег picture (есть сниппет).
Насчет многостраничных - добавляйте в папку src нужные html-файлы и все. Насчет шапок, футеров и т.д. - можете создать другой хедер в папке partials и подключить его куда надо)
Максим добрый вечер!! Скажите пожалуйста, а у вас на выходе получается несколько файлов js? Я имею ввиду если для каждой страницы свой js файл делать. У меня на выходе получается только один файл ещё и всегда с именем main.js. Или вы все в один файл записываете? Сборку настраивал по вашим видео. И конечно спасибо вам!!
Можно сделать и разные, но да, я делаю один
Спасибо большое !
Пожалуйста)
Подскажите пожалуйста, сборка актуальна?
Да
@@maxgraph сборка отличная, спасибо большое. Только не до конца понял что делает функция focus-visible из папки vendor.
вопросик: а почему data-menu задаётся отдельно для NAV, а не вешается сразу на burger ?
разве не лучше делать
и для элемента с .menu уже добавлять .menu--active
пример: есть бургер для основного меню, а если это, например, интернет-магазин - там может быть свой бургер для категорий товаров.
Может и лучше, я захотел так) но идея неплохая
Отличная сборка!
Спасибо)
@@maxgraph а с pug сборка работает твоя, нет?)
Паг там не встроен, но вы можете легко добавить
Привет, а почему ты решил использовать вместо ?
Так короче получается и поддержка тоже отличная
Привычка)
Для контроля версии в gulpfile.js сделал такие дополнения:
const htmlInclude = () => {
return src([`${srcFolder}/*.html`])
.pipe(fileInclude({
prefix: '@',
basepath: '@file'
}))
// .pipe(typograf({
// locale: ['ru', 'en-US']
// }))
// start--------------------я добавил---------------------------------------------
.pipe(
versionNumber({
'value': '%DT%',
'append': {
'key': '_v',
'cover': 0,
'to': [
'css',
'js',
]
},
'output': {
'file': 'src/version.json'
}
})
)
// end --------------------------------------------------------------------------------------
.pipe(dest(buildFolder))
.pipe(browserSync.stream());
}
вот только это работает и при разработке и при продакшине. А как сделать только при продакшене мозгов не хватает )))
да, не забудьте подключить контроль версий: const versionNumber = require('gulp-version-number');
и установить его: npm i -D gulp-version-number
rypograf закоментил, потому что при инсталяции ругается на него (я по этому поводу уже тут написал коментарий)
И отключить cache и rewrite, убрать константы с ними связанные
Проблему решил установкой костыля )))) :
объявил константу похожую на fileInclude, а именно fileIncludeNV и скопировал функцию htmlInclude и обозвал ее htmlIncludeNV (номер версии);
в htmlInclude убрал контроль версии, а в htmlIncludeNV оставил;
в exports.backend и exports.build заменил exports.build на exports.buildNV;
вуаля))).
Сборка понравилась, больше спасибо! Есть вопрос, не совсем понял, а что если надо сделать многостраничник, как быть в таком случае? У нас же один index.html, как допустим открыть Index2.html
В строке браузера ввести название страницы после порта
@@maxgraph так и думал, что это просто, спасибо.
@@maxgraph и ещё вопрос, файлы js пустые, кроме импортов, но после сборки main.js замусорен webpack строка и функциями, это так и должно быть?
Здравствуйте. Только осваиваю gulp. Не получилось добавить slick slider в вашу сборку.
Здравствуйте. Предлагаю оставить старый slick в прошлом)
Спасибо за сборку, очень удобно ей пользоваться) А подскажите, пожалуйста, может ли быть такое, что в эту сборку нельзя подключить джеквери плагины (и сам джеквери) локально. То есть плагины есть в node_modules, но если подключать их в файлах js, то они не работают. А если подключить в html через cdn, то все ок?
Нужно только через npm))
@@maxgraph ну вот через npm скачиваю, подключаю, но не работают)
Может. Не работаю с jquery
@@maxgraph нужно тоже от него отказаться, спасибо ещё раз)
Подскажите, пж. В корне сборке есть файл ".ecrc". Что там за конфиг, для чего?
Для проверки соответствия кодстайлу
Можно видео на разница ESM (import from) и CJS (require gulp)
Импорт позволяет раскидать функционал по файлам, вот и все
Вроде минификатор картинок очень слабый и есть смысл с API подрубить tiny png, но до 500 картинок с 1 ключа ограничение
Раньше так и делал, но ограничение достало)
можете подсказать что у меня за проблема?
только скачал и написал npm i и после этого такая ошибка
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\web\gulp-maxgraph-master
ode_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of D:\web\gulp-maxgraph-master
ode_modules\gulp-imagemin\index.js from D:\web\gulp-maxgraph-master\gulpfile.js is an ES module file
as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\web\gulp-maxgraph-master
ode_modules\gulp-imagemin\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (D:\web\gulp-maxgraph-master\gulpfile.js:24:15)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
code: 'ERR_REQUIRE_ESM'
}
Точно такая же проблема
Что за оформление windows?
Это Windows 11
Ребят, может кто-нибудь подсказать? я делаю многостраничный сайт на сборке Максима и в папке "partials" у меня есть вложенные папки для каждой страницы, например "partials/main/contacts.html". И проблема в том что когда пишешь текст/добавляешь теги в этих вложенных файлах, то gulp не обновляет страницу, для того чтобы изменения произошли нужно перезагружать gulp либо сделать изменения в файлах которые лежат в первом уровне вложенности, например "partials/header.html". Кто-нибудь знает как это можно пофиксить? у меня что-то не получается внести нужные правки в файл "gulpfile.js". С CSS и JS такой проблемы нету, тут gulp изменения отслеживает
9:20 - по поводу _vars.js: по какому принципу задавать эти переменные?
Как вам удобно
Огромное спасибо за ваш труд. Словами не описать как сильно вы мне помогли ♥
Пожалуйста))
Кто-нибудь может подсказать, почему если html-файл лежит по такому пути @include('partials/global/header.html'), а не @include('partials/header.html'), то галп сборка не следит за изменениями в файле?) то есть добавляешь теги и тд, гало сборка не видит, что можно прописать в gulpfile что-бы это пофиксить?
Пол года назад писал здесь) но так и не понял как это сделать
Везде, где пути связаны с html, нужно менять на /src/**/*.html
Как-то так
Максим, спасибо за сборку! Сделай, пожалуйста, видео по PHP форме обратной связи, используемой в сборке.
Привет, в последних видео на канале все есть)
типограф отвалился? не смог завести, попробую обновить, проверь пожалуйста у тебя ок? возможно он только у меня так
а нет, нагнал, в сафари по умолчанию открылся локалхост и неоттипографенные были словечки, в других браузерах норм ( проблемы сафари уже). Ну на всякий в package.json версию "gulp-typograf": "^4.1.0" добавил, обновилась с 403
Не совсем понял насчет "Про поддержку avif и webp" (
Вроде бы сборка не конвертирует автоматом ".jpg или .png" в ".webp"?
То есть, самостоятельно через сервисы конвертировать картинки в webp и загружать в папку src уже сконвертированные?
Конвертирует в webp)
а есть возможность использовать сниппеты из сборки в вебшторме? и как если знаете и есть?)
Не думаю)
Привет, Максим.
Спасибо большое за контент, очень полезно!
Только изучаю фронт, решил попробовать твоей сборкой попользоваться, уж очень удобно свиду)
Скачал с гита, создаю модалку из снипета, все раскомментировал по инструкции, а модалка всё равно не работает.
Не можешь подсказать в чём проблема может быть?
Без кода увы сложно сказать) надо посмотреть
Максим, спасибо вам большое за очень полезный контент. Я еще использую из вашей предыдущей версии задачу с авто установкой шрифтов, мне нравится, я там чуть доработал код. Вопрос по данной сборке. Зачем подключать шрифт через link если он уже импортом в css @font face подключается. Предположу, что это нужно для указания всем текстам на странице нужного шрифта, а уже потом @font face «ужирнит» и «наклонит» там где нужно. Еще раз спасибо за ваш труд, Вы прям на пике трендов в верстке.
Здравствуйте!
Через линк нужно для скорости загрузки, так шрифт быстрее отобразится на странице)
Привет. Будешь ли ты в scss заменять import на use и forward? Спасибо за хороший контент)
Привет, не планирую пока)
хорошая сборка, хотел на пару моментов указать:
- - IE умер, надобности в этом теге больше нет, так что теперь этот тег требуется только в исключительных случаях, когда требуется поддержка старых (мертвых) версий IE браузера, а в нормальных условиях (когда IE не существует) это мусорный тег.
-
emmet немножечко тупенький и продолжает пихать мёртвый мета тег при генерации базовой структуры html, лечится это переопределением ! сниппета:
html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body
вот тут адаптивный clamp можно использовать как миксин https :// codepen. io /9poiiia/pen/VwMrLQX
image-set в chrome работает, если вместо типа файла type("image/avif") указывать плотность пикселей 1х, ошибку в хроме вызывает именно эта запись, получается, что в хроме нельзя использовать разные типы изображений, но разные размеры под устройства с разной плотностью пикселей - можно... как же показывать разные типы изображений? через добавление тегов к html через js, если браузер поддерживает формат изображения:
.image {background-image:url("image.jpg")}
.webp .image {background-image:url("image.webp")}
.avif .image {background-image:url("image.avif")}
Я не знаю сколько видео ты наснимал, но шрифт в редакторе так и не увеличил, но по сравнению с ранними уже есть улучшения, сейчас держа телефон на расстоянии 10см от глаз можно хоть что то увидеть. Увеличь шрифт уже.
1) увеличил в несколько раз
2) смотреть видео с кодом с телефона не имеет смысла
Запускаю сборку и вылетает ошибка с путями у типографа, кто-то смог решить ее? Какой путь и где прописать, что бы все работало?
PS D:\Programmirovanie\Default_gulp\gulp-maxgraph> gulp
node:internal/modules/cjs/loader:499
throw e;
^
Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "dist/typograf.js" defined in the package config D:\Programmirovanie\Default_gulp\gulp-maxgraph
ode_modules\typograf\package.json; targets must start with "./"
at new NodeError (node:internal/errors:387:5)
at throwInvalidPackageTarget (node:internal/modules/esm/resolve:490:9)
at resolvePackageTargetString (node:internal/modules/esm/resolve:523:5)
at resolvePackageTarget (node:internal/modules/esm/resolve:570:12)
at resolvePackageTarget (node:internal/modules/esm/resolve:619:31)
at packageExportsResolve (node:internal/modules/esm/resolve:683:22)
at resolveExports (node:internal/modules/cjs/loader:493:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:533:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
at Function.Module._load (node:internal/modules/cjs/loader:804:27) {
code: 'ERR_INVALID_PACKAGE_TARGET'
}
Надо поправить пути в node_modules в package.json типографа - в частности 13 14 строки - замените на:
"require": "./dist/typograf.js",
"import": "./dist/typograf.es.js"
Это связано с более строгой проверкой файлов package.json, которая была введена при обновлении NPM
Там просто поставить пакет типограф надо. Уже стоит)
@@Sergus1984 Спасибо, заменил и все заработало)
Максим, можете подсказать как подключить jquery и slick slider в вашей gulp сборке? Или может, ребят, кто из вас сталкивался с такой задачей и вы юзаете сборку Максима и можете подсказать?
Посмотрите на npmjs, как выглядит подключение этих плагинов через npm. То, что там написано, подойдет для сборки
@@maxgraph Благодарю за ответ)
Но ровно в тот момент, как написал сообщение, то все получилось :D
10:40 В чем отличие между подключениями "burger" и "focus-visible"? Если я правильно понял, отличие в том, что "burger" уже есть в самой сборке внутри "node modules", а "focus-visible" - его там нет изначально, это сторонняя библиотека?
да, все так)
@@maxgraph а как посмотреть на весь перечень компонентов, доступных из "node_modules" ?
На странице сборки в гите
Спасибо, Макс. По Вашим урокам освоил галп, теперь уверенно пользуюсь, добавляю легко новые пакеты и тачки. Работать стало удобнее и чувствую себя в процессе профессиональнее. Спасибо!
В смысле, не тачки, а таски )
Спасибо))
Ништяк
Спасибо)
Подскажите как убрать минификацию css и js?
Я в галпе не силен. Вопрос: есть ли в вашей сборке при продакшене контроль версии. То есть к главному . css и к. js в тегах link и script после имени файла добавляется дата и время их создания?
Как таковой версионности нет, но есть команда gulp cache, которая добавляет случайные символы к названиям файлов, чтобы при выгрузке на хостинг сайт не оставался со старыми данными от кэша.
Подскажите предыдущее видео про сборку gulp
введите в поиске gulp maxgraph, найдете несколько)
Подскажите, пожалуйста, почему index.html через локалхост открывается нормально, а если открыть index.html из папки app просто в браузере, без помощи vs code, то он грузится очень долго и картинки не загружаются?
Не те пути видимо, и ресурсы не локально подключены
Максим, скажите пожалуйста, а вы как то сжимаете avif и webp? Плагины эти преобразуют из jpg в эти форматы, но по размеру они выходят и больше чем сжатый jpg. Исходник jpg ~900kb, сжатый jpg ~150kb, avif ~200kb и webp ~80kb. Пользуетесь каким то плагином для сжатия этих форматов? Популярные imagemini, image и tinypngcompress с такими форматами не работают. Пробовал squoosh, но он зачем то и png ещё делает из этих картинок.
Да, при сборке сайта происходит сжатие.
Здравствуйте.
Создаю папку folder/file.html
В папке app данный файл и папка не создаются, если перетаскивать их вручную - инклюд не работает.
Скажите, как можно это поправить?
Или же как мне сделать так, что бы у меня открывалась страница localhost:3000/folder/file.html ?
Вопросик порешал.
const htmlInclude = () => {
return src([`${srcFolder}/**/*.html`]) // здесь было return src([`${srcFolder}/*.html`]) //
.pipe(fileInclude({
prefix: '@',
basepath: '@file'
}))
.pipe(typograf({
locale: ['ru', 'en-US']
}))
.pipe(dest(buildFolder))
.pipe(browserSync.stream());
}
У меня глючил плагин Project snippets - не работали подсказки, приходилось несколько раз перезапускать VSCode, а иногда отключать или удалять и снова включать этот плагин, чтоб подсказки заработали.
Когда я устал с ним воевать, полез почитать мануал :D
Оказывается этот плагин уже устарел и его функционал встроен в VSCode по умолчанию.
Файл с вашими сниппетами должен иметь расширение .code-snippets
и его надо поместить в папку .vscode
Вот спешу поделиться этой радостной новостью, а то плагин реально задолбал ))
Ну и отлично)))
Я не могу установить вашу сборку из-за устаревшего пакета SVGO. Устаревшая v1.3.2 обновите, прошу, до v2.8.0. По крайней мере так говорит ошибка: svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
Почему не можете? Это же не ошибка, обновлять необязательно
Привет Максим, Спасибо , всё впитываются знания но их всё мало и мало! Почему то не работает g-picture - то есть snippet не грузится! Ты не знаешь что это может быть? Буду признателен за помощь
Такое бывает, надо перезапустить редактор.
Пользуюсь этой сборкой. При добавлении в каталог второй страницы (многостраничный сайт) на ней не работает js-код, в частности Swiper. CSS и HTML без проблем. Подскажите, почему так?
Наугад не смогу сказать
Мах спасибо большое,,, очень помогает .. надо привыкнуть и понять что и как , но твои видео всё обьясняют
Пожалуйста)
Максим, спасибо за сборку! Не подскажете, как сделать, чтобы типограф не вырезал скобки? Надо какое-то правило, наверное, прописать. Верстаю сайт, там есть телефон, код из трех цифр в скобках, так типограф скобки вырезает(( Заранее спасибо.
Думаю никак нельзя) но можно в его доке глянуть, вдруг какие-то настройки умеют
это конечно, полезно, спасибо. но мышка летает со скоростью ракеты по экрану.
Замедление есть в ютубе, если слишком быстро)
Подскажите- можно ли снипетты настроить если использую вебшторм, а не вскод?
Я думаю да) но сам им не пользовался, так что поищите
А зачем снипеты для картинок если есть плагин webp-html?
Ну ведь не только picture важен.
ОШИБКА Cannot find module 'resp-modifier' - КАК пофиксить??? Скачал вашу сборку, установил пакеты, запустил и вижу эту ошибку. В чем проблема подскажите?))
Не знаю даже) может быть в версии ноды. Такое лучше загуглить
@@maxgraph npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. может проблема в этом?
вопрос по svg-спрайту. в сборке удаляются fill. можно его потом изменить через css, но если в картинке несколько цветов, как ты решаешь такую задачу? почему продолжаешь использовать xlink:href ? насколько я понял это устаревший атрибут и его не рекомендуют использовать, та как со временем он может бить удален. спасибо
Если несколько цветов, я просто не делаю спрайт
Если он удалится, это никак не повлияет на миллиарды текущих сайтов
ОЧень круто, отличная сборка !
Спасибо)
Прям ну вот очень класная сборка спасибо тебе за труд!!
Пожалуйста)
привет. а тот модуль модалки что хочешь выложить на npm. Видео про его создание еще актуально, или там уже много изменений?
Привет, он уже в npm) нет, особых изменений нет, косметические только
@@maxgraph понял, спасибо) посомтрю как ты написал скрипт для галпа. потому что у меня проблемы со свайпером 7 версии и выше) после того как свайпер переделали тоже на модульный, появились были проблемы с подключениям. и все время использовал 6 версию :D
Здравствуйте! А где можно найти предыдущую сборку?
В коммитах можно найти)
@@maxgraph спасибо большое, раньше не работал с Гитхаб, пришлось разобраться, что за комиты и по итогу скачать старую сборку)
Сложен ли в освоении Gulp ?
Нет, не очень)
А что по поводу watching? Не используете данный функционал?
использую, конечно)
@@maxgraph Поставл сборку, буду пробовать на ней верстать, спасибо за проделанную работу!
По поводу папки для частей partials, возможно правильно взять эту папку в родительскую layout > partials?
ну если изменишь пути в gulpfile.js - возможно) по умолчанию нет
Спасибо огромное за труды)
Пожалуйста)
спасибо!
Пожалуйста)
Спасибо большое ☺️
Пожалуйста)
Красавчик)))
Спасибо)
Супер!! Спасибо!!
Пожалуйста)
Привет, Макс, подскажи пожалуйста на счет stylelint'a, я склонировал репозиторий, установил зависимости и плагин stylelint. Но он работает только на обычном css, подсвечивает ошибки, а на scss не работает, не работает именно отображение в проблемах, если я вручную вызываю через npx stylelint "**/*.scss" то он все ошибки показывает, но как это отображать в режиме реального времени? может быть что то еще прописать нужно? подскажи пжлст
Привет! По идее ничего не нужно. У меня все работает. А плагин ставил для вс код?
@@maxgraph , сейчас почему то не работает, вскод гонит, scss не определяет, я в шторме протестировал и тут все нормально, так что либо плагин вс кода либо сам вскод гонит. Макс, попробуй со стайллинтом , у тебя в scss подсвечивает ошибки?
Да, у меня все отлично
@@maxgraph , хм, странно, у меня никакие конфиги не работают в вс коде
Надо смотреть)
Спасибо большое, очень классная сборка, все понятно и все есть, с webp в хроме конечно жалко, ну а так все супер.
А что с Webp в хроме?)
А что с Webp в хроме?)
@@maxgraph ну что не подключается через сет, я просто знаю что есть скрипт который определяет поддержку webp браузером и тогда подключает webp без проблем. Хотел ещё сказать спасибо за крайний марафон, сейчас адаптив заканчиваю, очень много информации и полезных советов, просто огонь 👌👌👌
А, да и пофиг) он же подменяет все равно
@@maxgraph просто у меня последний заказ был, и заказчик очень просил именно webp, ох я и намучался))