Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов
HTML-код
- Опубликовано: 1 июл 2024
- Gulp - это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!
🔴 ОБНОВЛЕННОЕ ВИДЕО: • Video
🔴 Готовая сборка GULP из урока (патреон): / 36724521
Спасибо за поддержку бесплатного обучающего контента!
Уточнения.
☝️imagemin следует оставлять 7й версии!
☝️ UPD 26/06/2021 - Обновился SASS, из-за этого сборки Gulp могут не запускаться.
В package.json:
"sass": "latest"
в gulpfile.js меняем на:
scss = require('gulp-sass')(require('sass'));
а также:
scss({ outputStyle: 'expanded' }).on('error', scss.logError)
Обновил файлы шаблонов и сборок.
☝️ У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install webp-converter@2.2.3 --save-dev
☝️ Папка проекта не должна называться gulp
☝️ Запускать можно и отдельные функции, например gulp css
☝️ У кого копирует в dist только .jpg попробуйте немного изменить запись форматов с /*.{jpg, png, svg, gif, ico, webp} на /*.+(png|jpg|gif|ico|svg|webp)
☝️ Для WEBP-CSS следует использовать настройки: webpcss({webpClass: '.webp',noWebpClass: '.no-webp'}
☝️ WEBP-CSS выдает ошибку если в названии файла картинки есть пробелы и/или кириллица
👉 Ссылки:
NodeJS - nodejs.org/ru/
Gulp - gulpjs.com/
Форматы изображений в веб-разработке - • Форматы изображений в ...
👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:
• БЕСПЛАТНЫЙ курс по вер...
👉Настройка редактора VS Code:
• VS Code настройка уста...
Содержание:
00:00 - Вступление
00:58 - Установка Node.js
02:24 - Работа с терминалом (командной строкой)
04:02 - Установка Gulp глобально
04:46 - Создание package.json
06:53 - Установка Gulp в проект
08:21 - Создание gulpfile.js, файлов и папок проекта
10:38 - Первый запуск Gulp
11:21 - Очистка пакетного менеджера (решение проблем)
12:16 - Написание "сценария", создание переменных
19:28 - Обновление браузера
23:24 - Работа с HTML, подключение других файлов
35:20 - Удаление папки с результатом
37:04 - Работа с CSS (SASS/SCSS)
48:25 - Работа с JavaScript файлами
52:34 - Работа с изображениями, конвертация в WEBP
01:05:56 - Работа со шрифтами
01:15:16 - Запуск нового проекта
01:16:52 - Важное напутствие!
👉 Страницы плагинов:
BrowserSync - www.browsersync.io/docs/gulp
File Include - www.npmjs.com/package/gulp-fi...
Del - www.npmjs.com/package/del
Sass - www.npmjs.com/package/gulp-sass
Autoprefixer - www.npmjs.com/package/gulp-au...
Group CSS media-queries - www.npmjs.com/package/gulp-gr...
Rename - www.npmjs.com/package/gulp-re...
Clean CSS - www.npmjs.com/package/gulp-cl...
Uglify ES - www.npmjs.com/package/gulp-ug...
Babel - www.npmjs.com/package/gulp-babel
Imagemin - www.npmjs.com/package/gulp-im...
WEBP - www.npmjs.com/package/gulp-webp
WEBP HTML - www.npmjs.com/package/gulp-we...
WEBP CSS - www.npmjs.com/package/gulp-we...
Fonter - www.npmjs.com/package/gulp-fo...
ttf2woff - www.npmjs.com/package/gulp-tt...
ttf2woff2 - www.npmjs.com/package/gulp-tt...
SVG Sprite - www.npmjs.com/search?q=gulp-s...
👉JS функции и миксин из урока:
fls.guru/gulp.html
👉Решение проблем:
npm cache clean --force (очистака npm)
npm i npm -g (установка npm)
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Учителя платных курсов останутся без работы )) Спасибо огромное!
Пожалуйста!
точно подмечено))
видимо и 52 инфобизнесмена поставили дизлайк, но нас всё равно больше и автору большущий лайк
@@FreelancerLifeStyle чем это отличается от стандартных таск?
@@ZimaTimofey ага, у меня такая же мысль сразу пробежала)) только они, захлебываясь слезами беспомощной злости, могли трясущейся от рыданий рукой ткнуть на диз
Одно восхищение!!!!!!!!! Ваши уроки, смотрю с большим удовольствием, доступно, понятно, супер!!!!!!
Я рад!
Огромное спасибо! Это лучший урок из всех просмотренных! Вы гениальный учитель!
Я рад!)
Классный учитель. На одном дыхание смотрю его. Продолжай баловать нас своими уроками. Удачи в вёрстке и в жизни. 🥳☺️
Отличное видео! Наконец-то хороший урок по Gulp из всех что есть в интернете. Теперь я всё понял) Очень понравилась сборка! Спасибо большое!!!!!!)))))
Супер! Я рад!
@@FreelancerLifeStyle пожалуйста добавь в описание где апдейт снизу
Запустить команды по очереди:
gulp clean
npm i
gulp
иначе не работает gulp
Евгений я надеюсь Вы умеете плавать, потом как очень велик риск потому в океане благодарности за это видео! Это просто замечательное обучающее пособие! Огромное спасибо и низкий поклон!
Ой, ну прям так мило)) У Жени, когда все получается - он так искренне радуется, и я радуюсь вместе с ним и сижу улыбаюсь весь ролик :D
Хех)
Евгений, пока не нашла твой канал, учеба шла медленно, нудно и уныло... точнее, почти не шла) а тут - каждое видео вызывает "Вааааауууу, это же именно то, что нужно! Да еще и насколько доступно!" И всё получается! ты делаешь неописуемо полезное дело, огромнейшая благодарность!
Огромное спасибо за видео! Все понятно, по делу и со стилем. Очень долго не мог разобраться с gulp, а тут и быстро все понял и с удовольствием.
Огромный тебе респект за проделанную работу!
Пожалуйста!
Спасибо, Женя, за ваш труд. Вы один из тех, кто делает этот мир лучше.
Пожалуйста!
Ну ты талантище! Даже не представляю какую работу нужно провести перед и после записи ролика, что бы все так структурированно и понятно было. Спасибо!!!
Евгений! Вы просто чудо! Какой гигантский труд! Спасибо Вам ,огромное, что делитесь с нами!
Пожалуйста!
О боги! Только задумался над тем чтобы крепко взяться за gulp, и тут Жека выпускает такой ролик! Лайк не глядя!
Спасибо)
@@FreelancerLifeStyle Сделай пожалуйста еще видео по Гридам! Молю!
Женя, вот за это просто большущий и жирный лайк! ) Огромное спасибо!
Спасибо!
Здоровья тебе!! Что ж ты за человек то такой хороший!! Стоооолько информации, сжато, четко, доступно!
С каждым видео, верстка становиться все более увлекательной. Мега контент, огромное спасибо!
Женя только зашёл на видос и тут сразу телесная майка) долго ждал этот ролик!
Круть)
Мега крутая сборка! Думаю, это шикарный и щедрый подарок для нас, спасибо большое!
P.s. Посмотрела до конца, вся семья принимала активное участие в съёмках, очень здорово! 🤗
Спасибо! Рад что полезно! Семья всегда со мной, а я всегда с семьей)
Круто! С каждым видео все больше хочется смотреть материал в таком позитивном стиле)
ВОСХИТИТЕЛЬНО!)) От твоих видосиков узнаю больше, чем на курсах, спасибо! Бомби дальше!)
Пушка!!!! Наконец-то дождался. Спасибо Женя
Пожалуйста!
Спасибо за твой труд, ты нереально круто подаёшь информацию!🙂☀️
Чувствую себя космонавтом после твоих видео, будто побывал в открытом космосе, лайк и благодарность! :D
Народ, я думаю, нам с вами очень повезло, что мы подписаны на этого человека. Такой золотой контент трудно найти
Супер. Ты все делаешь очень просто. Все непонятные вещи в твоей интерпретации являются супердоступными. Жалко, что только один лайк можно. Реально заслуживаешь больше. Спасибо тебе. Окончание видоса впечатляет. Класс.
Спасибо большое! Всегда можно сделать репост в соц сети))
Весь урок пролетел как одно мгновение. Большое спасибо Вам за Ваш труд!
Только начинаю изучать путь Front - End разработчика и понимаю что чем больше смотрю Ваши уроки тем сильнее моё желание учиться и изучать эту сферу!
Супер! Я рад!
За окном -40, а я сижу смотрю твои ролики под еду - с интересом и пользой провожу время и отдыхаю:)
Ещё раз спасибо!!!! Нахожусь в стадии обучения верстки и, если какой-то затык или что-то новое нужно узнать - сразу к тебе на канал))) выручаешь не первый раз!!! Объясняешь доступно, вот вернулся опять к этому видео для того, чтобы в сборку добавить видосики. Пересмотрел как картинки добавлял и сделал по аналогии. СПАСИБО!!!
Спасибо тебе!!
Всегда смотрю твои стримы и видео ролики
Gulp это главный инструмент верстальщика
Пожалуйста!
@@FreelancerLifeStyle Есть один вопрос подойдет ли эта сборка для версии node v10.15.3
Это! Просто! Офигенное! Евгений вы просто невероятны! Огромное спасибо!
Спасибо!
это лучший урок по сборке, максимально разобрано и собрано. Спасибо!
Пожалуйста!
О это волшебное чувство, когда не получалось непонятно почему, а потому вдруг получилось! Большое, большое спасибо!))
Жека спасибо за видео. Очень жду от тебя видео на 2 темы:
1) Адаптивные шрифты
2) Кроссбраузерность
Без вас я бы никогда не установил и не настроил Gulp, так как писать функции js еще не умею. СПАСИБО ОГРОМНОЕ!!!😌
Пожалуйста!
Какой раз натыкаюсь на данный канал, и каждый раз удивляюсь на сколько годный контент! ) Пойду обновлю свою сборку)
Спасибо! Всё получилось!) И всё понятно рассказал. По раскрытию темы - топ! Но вставки outdoors и с семьёй влюбляют в твои видео ещё больше)))
Только позавчера было 55 тысяч, сейчас уже 56,2. Вы огромный молодец, что делаете такой классный контент!
Спасибо, стараюсь)
Для тех у кого проблемы с gulp-imagemin установите версию ^7.1.0
npm i gulp-imagemin@^7.1.0
спасибо большое за совет)))
Спасибо огромное, не могла решить эту проблему
благодарю
Спасибо, братан.
Спасибо!!
Спасибо, Тебе Огромное!!! Мощная подача. Просто заряд получил и Бодрости и Позитива. С третьего захода, но вроде всё у меня получилось. Пошёл смотреть следующие ролики про Галп. Там просто куча часов надо ещё просмотреть. Люблю учиться у мастеров. Удачи Тебе во Всём и Процветания!
Жека, тысяча лайков тебе ))). Очень классный контент, как собственно и всегда. Сэкономил гору времени! Все понятно и доходчиво. Все работает как часы. Спасибо тебе огромное! Волшебный у тебя канал!
Спасибо тебе ОГРОМНОЕ!!! Качество намного выше некоторых платных курсов.
Спасибо! Я рад!
Я: "О круто, пойму что такое gulp за 1 час"
*прошло 2 дня*
______________________
Огромное спасибо за урок. У меня все вышло, путь был долгим, но я смог благодаря крутой и понятной подачи, спасибо
ponimaiu))))))))))))))))))
Боже, прослезилась от всей жизненности ситуации))
Повторение - мать ученья! Советую периодически повторять все процедуры из видео, очень крутая сборка, автономная.
@@user-jr3pu4px9u нет смысла повторять. Всё есть на quick start gulp. А после всё равно прийдется слезть с gulp и собирать всё вручную
@@arthurshishko1841 а почему нужно будет слезть?
Большое Вам спасибо, Евгений! Самый понятный материал в открытом доступе на рутубе.
👍👍👍💣💣💣👏👏👏
Спасибище!!!
Женя, ты отличный учитель!
Спасибо большое за урок! Как всегда годнота!
Спасибо!
Жека ты лучший ! Все твои видео выходят тогда когда мне это действительно нужно . Друг позвал работать над проектом и сказал будем работать с галпом и тут бац выходит твой видос .
Я рад!
...и тут я решила взять акадэм-отпуск чтобы изучить все видеоуроки Жеки)))
Каждое видео - все понятно и легко и прям то, что нужно. Это любовь. Спасибо за твой труд!!!
Продуман каждый нюанс, дан ответ на все вопросы! Отличное проработанное видео! 👍
Привеет, где -то в комментария под твоими роликами видел пост « часть первой зарплату в IT переведу вам😁» так вот, я присоединяюсь, огромнейшее вам спасибо !
Буду ждать)
Женя ты главное никогда не думай проект закрывать. Мне кажется обучать людей - это твое) Как боженька все доходчиво доносишь. Держу за тебя кулачки!) Красавчик.
Спасибо!
Огромное спасибо за урок! Это как раз тот случай, когда просмотр ролика длиной в 1,5 часа превратился в два дня и ты по окончанию очень рад, что так произошло. Так как пересмотр отдельных моментов заставил уже ,буквально с закрытыми глазами все писать и лучше разбираться в сути кода. Основные моменты, с которыми столкнулась это были:
Непонимание программой различных регистров, приходилось дополнять переменные еще доп.буквой;
При запуске галпа просил установить еще конвертер npm install webp-converter@2.2.3 --save-dev.
Большое спасибо за такую продуманную до кратчайших мелочей работу!
48:22 ты прям предугадал мои эмоции)
Мега крутой урок, Gulp был моим слабым местом, но благодаря тебе наконец-то с ним разобрался, спасибо тебе огромное!
Я рад!
Редко пишу комментарии но автор этого видео реально заслуживает уважения!!! Я подробно разбирал этот вопрос и это не сомненно лучшое выдео о Gulp в рунете!!! В нем именно то что нужно причем написано всё в новом стандарте. Мужик, спасибо тебе! Ты реально крут!
Спасибо!
Самые лучшие видео на ютубе. Несомненно вне конкуренции!! Большое спасибо!
Gulp это просто НЕВЕРОЯТНО!!! Спасибо за Урок!
Видео по отличное, спасибо! Чтобы все выполнить, пришлось смотреть его не меньше 3-х часов, представляю сколько времени заняло у Жени, на создание этого урока. Отдельное спасибо за ваш труд!
Это да) Пожалуйста!
Даже я все поняла! Спасибо! У Вас талант объяснять доступным языком, интересно и НЕ скучно. Так держать!!!
Спасибо большое! Я очень рад!
то что поняла это не факт, что можешь применить. Ты же женский пол. А то что ты поняла это тебе только кажется
мощь. сразу видно, что человек шарит во всех тонкостях и не одну шишку набил)) круто, одни восхищения
Спасибо!
В который раз возвращаюсь к этому видео, просто пушка, каждый раз спасает, спасибо!!
мои мысли 4 дня назад:
"Ура! Осталось изучить gridы и gulp, и завтра-послезавтра начну учить JS!!"
После 2-х дней на gridах "че-то гемор какой-то, пойду-ка лучше gulp по-быстрому изучу"
После 2-х дней на gulpe "да твою ж мать!!!"
Благодарю за очень подробные уроки!
по сравнению с gulp gridы - это детский лепет.
ох сколько еще жопа будет гореть из за gulpa )))
ну шо выучил?
@@jedixtv3362 в целом галп не такой страшный каким кажется.
я не один такой)) а еще мне сказали вчера, что - Галп сейчас заменен вебпаком))) и у меня вообще дверца захлопнулась))
Для работы плагина внёс следующие изменения:
1) установить дополнительно : npm install sass gulp-sass --save-dev
2) scss = require('gulp-sass')(require('sass'))
3).pipe(scss({ outputStyle: 'expanded' }).on('error', scss.logError))
Спасибо!
Спасибо за помощь!
Спасибо!
спасибо
спасибо!)
Спасибо за труд!
Как всегда на высшем уровне!
ооо, наконецто я нашёл где понятно обьяснили что такое gulp) большое спасибо)
Чёрт возьми, да ты волшебник какой-то!!!
Спасибо!)
Лайк не глядя. Ещё не смотрел, но уже знаю что контент топовый как впрочем и всегда) Спасибо за старания
Спасибо!
Шикарный урок! Вкладка с этим каналом открыта всегда!
Огромное спасибо за подробное видео о Gulp - всё собрал всё работает ))
Ребята у кого вылезает ошибка
TypeError in plugin 'gulp-webp-css'
Message:
Cannot read property '0' of null
Details:
domainEmitter: [object Object]
domainThrown: false
Плагин ругается на то что тег img не в одной строке кода.
Сделайте так чтобы тег img был на одной строке тогда всё будет работать.
Например:
Вот так правильно:
Вот так не правильно:
Чаще всего бывает когда вы сохраняет файл и происходит форматирование и слишком большой тег img переносит в 2 строки из этого выбивает ошибку!
Лайк если помогло👍,давайте выведем в ТОП чтобы Жека увидел!
Спасибо! Частая ошибка
Друг, спасибо тебе огромнейшее, жалко что я 2 часа искал и только потом комменты начал читать)))
@@GagikHarutyunyan_dev тажехрень
У меня почему то не решилась проблема
Решил проблему, если закомментирован, плагин все равно видет его
Поставил лайк и подписался после этого сразу пошла загрузка node js 🤪Ждем видео по WordPress 🙏
Спасибо! Все будет!
Здравствуйте! Благодарю за видео! Настоящее спасения для начинающего верстальщика!
Спасибо даже не верится что такой урок и бесплатно ! Не контент а золото!!!!!!
Просто золотой Человек!
У кого ошибка в браузере Cannot GET / при запуске gulp, помогает обновление страницы вручную. Лучше чтобы browserSync запускался не в watch, а в build параллельно с fontStyles.
Это происходит из-за того, browserSync отрабатывает быстро, а html и прочие файлы еще не успевают сформироваться.
let build = gulp.series(clean, gulp.parallel(js, css, html, images, fonts), gulp.parallel(fontsStyle, browserSync)),
watch = gulp.parallel(build, watchFiles);
Когда выполняться все задачи перед fontsStyle, параллельно запустится - fontsStyle и browserSync
Спасибо, помогло!
Спасибо за дельный совет !
Спасибо за наводку!
Спасибо вам большое. Из-за этой проблемы у меня не загружались фоновые картинки, а теги img грузились по 20 секунд. Теперь всё отлично. Благодарствую!
Крут. Что я еще могу добавить? Ты просто крут чувак. Спасибо за легкость, и самое важное - актуальность подаваемого материала. Продолжай в том же духе. На ютюбе до*бени материала про веб разработке. Но годного и легкоусвояемого - единицы. Спасибо за твою работу. Ставлю очередной лайк тебе.
Спасибо огромное за это туториал по галпу, особенно про фичу с шрифтами и картинками это вообще супер-пупер клёво.
Собрать получилось не с первого раза, то запятую не там поставил, то еще что-то, но не сдался и добил до конца и сборка готова к использованию)
Лайк и подписка 100%
Ничего не знаю про gulp, но думаю, лишним точно не будет)
Хороший вариант получить информацию максимально доступно!
Спасибо, наконецто дождался
Пожалуйста!
Всегда знал, что Gulp - вещь классная, но даже браться за нее боялся...
Пока не наткнулся на твой урок.
Спасибо!
Супер урок - Супер подача. Спасибо вам за труд.
блин вот не хочется чтоб выглядело как лесть + не особо люблю оставлять комменты, но реально ты прикольно делаешь видосы, они позитив излучают вдобавок какой-то свой стиль. Блин ну реально приятно учится (как кто-то писал уже в комментах)
Спасибо большое! Я рад!
Женя, огромное спасибо за видео, очень долго мучался с Gulp'ом, выручаешь как всегда)
Пожалуйста!
Как это можно так рассказывать понятно и бесплатно,я в шоке.Жекаааа ,Жекааа ты крутой бро,спасибо большое тебе!🙌🏻🤜🏻🤛🏻❤️
Урок супер, спасибо!!! Очень помог разобраться во всём.
Спасибо, парень, это круто и бесплатно!!! Знаю, что у некоторых, кто продает платные курсы это подается под видом Верстка 2.0 и стиот хреновых денег!
Спасибо, стараюсь!
Для тех у кого проблема со стартовым шаблоном при запуске Gulp:
нужно заменить в файле gulpfile.js строку
let scss = require("gulp-sass");
на
let scss = require("gulp-sass")(require('sass'));
А в package.json добавить
"sass": "latest",
после
"gulp": "latest",
После этого если уже запускали gulp и npm i
Запустить команды по очереди:
gulp clean
npm i
gulp
У меня появилась другая ошибка (TypeError: scss is not a function) ругается на gulpfile.js:75:4
Спасибо большое
Bolshoye spasibo vsyo srabotalo
It was helped me. Thanks
спасибо за помощь и подсказку, а то я тут сижу и туплю. Самоучка сам
Жека, ты крут, твои уроки самые простые и понятные. Просто респект
Огромное спасибо за ваш труд. Без вас разобраться было бы гораздо труднее. Подписчиков вам благодарных и побольше!
Здравствуйте! Еще раз благодарю за видео! Вот коечто от себя:
33:05 - для решения этой проблемы я прописал следующее:
src:{
html: source_folder +"/index.html",
...
},
но это, видимо, подходит только для одностраничного сайта
42:40 - здесь можно добавить grid:true для поддержки гридов
1:10:56 - необходимая фунция колбэк
Примечание:
"33:05 - для решения этой проблемы я прописал следующее:
src:{
html: source_folder +"/index.html",
...
},
но это, видимо, подходит только для одностраничного сайта"
можно оставить в старом варианте, просто нужно наши паршелы .html ложить в отдельную папку, и тогда система будет работать даже для многостраничного сайта
если что, плагин file-include 1.2.13 теперь создает константу в начале вашего gulp файла. Поэтому fileinclude=require("gulp-file-include") писать не надо, иначе словите ошибку повторного обьявления переменной.
я констатну вначале просто закоментил))
Спасибо!
Лучший, прям во время)
или просто удалить
не знаю кто ты , но живи долго и счастливо , очень выручил )
Ох, спасибо! Два месяца никак не решался досмотреть это видео - всё казалось слишком сложным (я новичок и не знаю JS), но мысли о Gulp не давали покоя, и я всё-таки решился. Как же здорово! Спасибо, что так круто объяснил весь написанный код! Теперь Gulp не кажется магией (ну почти).
Автору видео уважение за проделанную работу. Очень интересно описание сделано.
Спасибо! Сидел долго, спецом поворил все по видео, для того, что бы самому лучше вникнуть в gulp настройку, пару раз споткнулся на ошибках, элементарных опечатках, но часа за 3 дошел до конца! Отличная сборка!
Отлично! Хорошо что не стал орать что ничего не работает, а сам все проверил и сделал.
Жека ты лутший бро. Oгромный респект тебе, очень интересный видос продолжай !!!
Продолжаю!
Добавил в закладки, буду осваивать, для больших проектов самое оно. До этого момента обходился только препроцессором, но это не всегда удобно, если речь идёт о больших проектах, да и показывать такой проект очень удобно, так как можно сразу проставить все ссылки на страницы, и создать хорошую эмуляцию уже работающего сайта. Спасибо за большой и информативный урок.
Конец ролика - просто класс! 👍🏻
У кого проблемы с webpcss лучше сразу устанавливайте gulp-webp-css (перед css тире стоит). В css появится директива @support, которая будет проверять поддержку webp, без всяких танцев с бубнами и js по добавлению класса. С середины лета 2020 (судя по информации из гугла) автор пакета gulp-webpcss что-то нахимичил и теперь не работает нормально. Джека, еще раз спасибо за видос!
Спасибо добрый человек
Спасибо
Дякую!
А можете подсказать,
у меня теперь в стилях вот такой код @supports (-webkit-appearance:none)
так и должно быть?
Просто у Жени совсем по другому
Спасибо. Модуль из видоса мне не зашел.
Если у кого возникнет ошибка Cannot read property 'indexOf' of undefined, то это из-за того, что у вас в CSS файле комментарий /* */.
🔴 ОБНОВЛЕННОЕ ВИДЕО: ruclips.net/video/Qp1ZMTM7Xpw/видео.html
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Фрилансер по жизни - IT и фриланс подскажи пожалуйста, а есть плагин который меняет автоматически у текста раскладку клавиатуры? Допустим когда на рус случайно начал набирать англ текст и наоборот. Типа чтоб распознавал что белиберда идёт и надо перевести.
Или по сочетанию клавиш уже у введённого текста поменять. Чето тыкался не нашёл ничерта 😅
программа пунтосвитчер
Подскажи пожалуйста, у меня не работает с настройками для webp как её устранить??? Без настроек работает, а с настройками браузер запускает но копирует картинку вообще никак
@@devidnelson5757 да будут
Подскажите пожалуйста, в плагин gulp-webp-html вставить исключение форматов картинок? Он берет в тег picture и svg, а мне этого не надо.
Ценный урок на вес платины! Спасибо!
Огромное спасибо! Просто нет слов за профессионализм.