@@ZimaTimofey ага, у меня такая же мысль сразу пробежала)) только они, захлебываясь слезами беспомощной злости, могли трясущейся от рыданий рукой ткнуть на диз
Ребята у кого вылезает ошибка TypeError in plugin 'gulp-webp-css' Message: Cannot read property '0' of null Details: domainEmitter: [object Object] domainThrown: false Плагин ругается на то что тег img не в одной строке кода. Сделайте так чтобы тег img был на одной строке тогда всё будет работать. Например: Вот так правильно: Вот так не правильно: Чаще всего бывает когда вы сохраняет файл и происходит форматирование и слишком большой тег img переносит в 2 строки из этого выбивает ошибку! Лайк если помогло👍,давайте выведем в ТОП чтобы Жека увидел!
У кого ошибка в браузере 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
Я: "О круто, пойму что такое gulp за 1 час" *прошло 2 дня* ______________________ Огромное спасибо за урок. У меня все вышло, путь был долгим, но я смог благодаря крутой и понятной подачи, спасибо
если что, плагин file-include 1.2.13 теперь создает константу в начале вашего gulp файла. Поэтому fileinclude=require("gulp-file-include") писать не надо, иначе словите ошибку повторного обьявления переменной.
Для тех у кого проблема со стартовым шаблоном при запуске 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
мои мысли 4 дня назад: "Ура! Осталось изучить gridы и gulp, и завтра-послезавтра начну учить JS!!" После 2-х дней на gridах "че-то гемор какой-то, пойду-ка лучше gulp по-быстрому изучу" После 2-х дней на gulpe "да твою ж мать!!!" Благодарю за очень подробные уроки!
Проблема с плагином (gulp-webpcss) РЕШАЕТСЯ при ошибке "Error: Cannot find module 'webp-converter/cwebp' очень легко !!! Просто пишем в командную строку ( npm install webp-converter@2.2.3 --save-dev ) !!!!
Вообще если бы еще было видео по git, можно было бы считать задачу разбора минимум-необходимых инструментов закрытой и паковать это дело в отдельный плей-лист
55:10 Кто создает с нуля, или тот, у кого пакеты не фиксированных версий, не понимает почему не запускается сборщик, Ответ: вышла новая версия пакета imagemin спустя 2 года, и он не собирает Решение: устанавливать старую версию npm install --save-dev gulp-imagemin@7.1.0
У кого проблемы с webpcss лучше сразу устанавливайте gulp-webp-css (перед css тире стоит). В css появится директива @support, которая будет проверять поддержку webp, без всяких танцев с бубнами и js по добавлению класса. С середины лета 2020 (судя по информации из гугла) автор пакета gulp-webpcss что-то нахимичил и теперь не работает нормально. Джека, еще раз спасибо за видос!
Спасибо. Модуль из видоса мне не зашел. Если у кого возникнет ошибка Cannot read property 'indexOf' of undefined, то это из-за того, что у вас в CSS файле комментарий /* */.
Для фикса проблем с webp-converter (и не только!) вдальшейшем: 1) Устанавливаем WEBPCSS как указано в описании к видео ( npm install webp-converter@2.2.3 --save-dev ) 2) В файле package.json в блоке "devDependencies" в строке "webp-converter": "^2.2.3" убираем символ "^" перед номером версии; сохраняем файл 3) В шаблоне сборки помимо файла package.json сохраняем также файл package-lock.json (копируем его впоследствии вместе с шаблоном сборки при создании нового проекта). 4) При инициализации сборки в новом проекте вместо команды: npm i используем команду: npm ci (для этого и сохраняем файл package-lock.json) Таким образом, при создании нового проекта версии модулей будут подгружаться в соответсвии версиям, использованным в шаблоне сборки (без обновлений). Посему, получаем стабильную версию сборки и проблем с webp-converter уже не будет. Также это полезно при командной разработке с использованием Git. Подробнее здесь: habr.com/ru/post/350762/ ; здесь: habr.com/ru/company/ruvds/blog/423703/ ; и здесь: monsterlessons.com/project/lessons/razbiraemsya-s-versiyami-paketov-v-node
1:11:50 Функция fontsStyle не работает, в консоли бесконечная загрузка Starting "fontsStyle" ... Upd: Работает после переустановки всего Gulp'a, и не установки некоторых плагинов
Та же история вышла у меня. Нашел решение в комментах к видео: warehouse - автор решения 1 год назад Попробуй в функции "fontsStyle" первую строку исправить таким образом: function fontsStyle(cb) { А в самом конце функции перед последней закрывающейся скобкой поставить cb(); А это можно удалить: function cb() { }
здравствуйте. подскажите пожалуйста в чем проблема не устанавливается gulp-sass ошибка Error in plugin "gulp-sass" Message: gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the `sass` and `node-sass` packages are permitted. For example, in your gulpfile: var sass = require('gulp-sass')(require('sass')); [00:04:33] The following tasks did not complete: default, , watchFiles, browserSync, , css, html [00:04:33] Did you forget to signal async completion?
В терминал вбить: npm install sass gulp-sass --save-dev В package.json написать: "sass": "latest" в gulpfile.js пишем вместо scss = require('gulp-sass') вот это: scss = require('gulp-sass')(require('sass')); Должно помочь, если все правильно сделать
Спасибо за видео! У меня webpcss не работало с бэкгграундом, даже с ипользованием настроек из описания ( с ними почему-то вообще не появлялось ни jpg, ни webp картинки.). А вот сработало с этим: .pipe(webpcss({webpClass: '', noWebpClass: '.no-webp'})). Просто оставляем webpClass пустым. Может кому-нибудь поможет
вместо плагина "gulp-webpcss" можно использовать похожий плагин "gulp-webp-css", ему не нужна дополнительная функция в javascrip. Работает он по следующему принципу: ========================== // Input .banner{ background: url(/img/bannerbg.jpg) no-repeat center; }
// Output .banner{ background: url(/img/bannerbg.jpg) no-repeat center; } @supports (-webkit-appearance:none){ .banner { background-image: url(/img/bannerbg.webp); } } ========================== Я скопировал комментарий у человека в комментах,так как ссылку нельзя кинуть на коммент
Відео - супер! Все опрацьовано на високому рівні порад... P.S. Може в когось не було потрібного результату на 12-й хв.: "bash: gulp: command not found". Та на сайті habr.com я знайшов відповідь. Треба ввести також_ npm i -g gulp-cli - і вже потім перевірку_ gulp
Заметил, что появляется проблема после установки gulp-imagemin. Дело в том, что автоматически устанавливается версия 8.0.0. Попробуйте поменять версию на 7.1.0. написав: 'npm i --save-dev gulp-imagemin@7.1.0' У меня заработало и картинки появились
@@FreelancerLifeStyle Это жесть) И в правду пробел. Заново создал файл fonts.scss и все получилось. Спасибо) Правда пришлось немного изменить функцию fontsStyle потому что она не завершалась. Здесь ниже писали: codepen.io/Adn070/pen/LYGvXmr
Классный видос, все по делу и шустро. Только не могу пнять почему у меня return src(path.src.fonts).pipe(ttf2woff2()).pipe(dest(path.build.fonts)) - с ним загружается localhost: 3000, без него страница?
Здравствуйте! Спасибо за годный гайд! Не подскажите как пофиксить ошибку связанную с вызовом таска fontsStyle? Выдает ошибку: [14:14:41] The following tasks did not complete: message [14:14:41] Did you forget to signal async completion? перечитал разные форумы, я так понял ошибка связанная с новым уровнем политики асинхронности тасков в gulp 4, обходные пути представленные в руководстве по gulp 4 даже есть в самой функции, но почему - то ошибка не исчезает, в итоге виснет таск.
Це так і має бути що вилітає помилка що при picture браузер не може відкрити webp картинку а відкриває просту картинку. Та й ми бачимо автор на приклады наводить на просту картинку і екран засвічується це так повинно бути?
Класное, полезное, насыщенное видео, на его основе я написал свою сборку. Некоторые плагины которые показаные в видео выкидывали ошибку и некоторые из них пришлось заменить, но плагин gulp-webp-html в html файл вставляет две точки перед расширением webp и к сожалению замены этому плагину я не нашел, поэтому пришлось его исправить. Я исправил ошибку в этом плагине и залил его на сайт NPM, вы можете найти его под именем gulp-html-in-webp и установить с помощью команды npm i --save-dev gulp-webp-in-html, надеюсь что это кому то пригодится.
У меня была другая проблема с этим плагином - он делал picture только первому изображению (я еще использовал плагин для строчного отображения html после webp). Я пол дня убил на исправление. В итоге попробовал твой плагин, и о чудо! WebP применяется ко всем изображениям (даже к svg, что по идее не надо, кек), и файл index.html можно читать не вырывая себе глаза. Так что Спасибо тебе большое!))
все делаю четко за тобой. проблема на проблеме ( [16:22:47] Using gulpfile ~\Desktop\fls-gulpi\gulpfile.js [16:22:47] Starting 'default'... [16:22:47] Starting 'watchfiles'... [16:22:47] Starting 'browserSync'... [16:22:47] Starting 'html'... [16:22:47] 'watchfiles' errored after 3.35 ms [16:22:47] TypeError: Cannot read property 'html' of undefined at watchfiles (C:\Users\I\Desktop\fls-gulpi\gulpfile.js:55:28) at bound (domain.js:427:14) at runBound (domain.js:440:12) at asyncRunner (C:\Users\I\Desktop\fls-gulpi ode_modules\async-done\index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:79:11)
у меня была проблема из-за опечатки в 19 строке (написал whatch вместо watch), так что скорее всего вам нужно просто внимательно перепроверить весь gulpfile
Что делать если при вводе gulp оно возвращает ошибку из-за imagemin > gulp Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\dev\gulp\my_personal_portfolio ode_modules\gulp-imagemin\index.js require() of ES modules is not supported. require() of E:\dev\gulp\my_personal_portfolio ode_modules\gulp-imagemin\index.js from E:\dev\gulp\my_personal_portfolio\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 E:\dev\gulp\my_personal_portfolio ode_modules\gulp-imagemin\package.json. at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (E:\dev\gulp\my_personal_portfolio\gulpfile.js:38:16) at Module._compile (internal/modules/cjs/loader.js:1072:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) { code: 'ERR_REQUIRE_ESM' }
У кого выдаёт ошибку после подключение пакета clean-css: Error: Ignoring local @import of "#src/css/main-style.css" as resource is missing. Проблема в # в имени #src, возможно кому-то это спасёт 3 часа времени =)
Спасибо тебе большое за подсказку! Вчера вечером весь мозг сломал: вот должно все работать, но не работает. Поставил вызов clean_css после копирования в папку, ошибка естественно пропала, но плагин попросту ничего не делал, так же, как и rename. Теперь убрал решетку из имени папки, поставил clean_css до копирования файла, и все работает как должно.
Евгений я надеюсь Вы умеете плавать, потом как очень велик риск потому в океане благодарности за это видео! Это просто замечательное обучающее пособие! Огромное спасибо и низкий поклон!
Для плагина filtinclude можно добавить папку templates например, чтобы куски страницы хранить там. 1. В объект путей для watch добавьте поле templates: `${sourceFolder}/templates/**/*.html`, 2. В функцию html добавьте объект с настройками для fileinclude: .pipe(fileInclude({ prefix: '@@', basepath: 'ваш_путь_в_папке_src' , напр.: '_src/templates' })) 3. В функцию watchFiles добавьте новый путь за которым следить и выполнять функцию html: gulp.watch([path.watch.templates, path.watch.html], html) Может быть кому-то пригодится.
Замеченые мной минусы дефолтной сборки Евгения: 1. Если изначально поместить шрифты формата woff/woff2 в fonts то gulp в исходниках не создаст папку fonts и не скопирует туда шрифты, соответственно и их подключения через миксин не произойдет потому что в path.src.fonts стоит поиск файлов только с расширеним ttf. Решение: в path.src.fonts сменить поиск файлов с расширением на woff/woff2, полностью избавится от плагинов и функций связанных с конвертированием шрифтов otf/ttf в woff/woff2, закидывать шрифты вручную и оставить функцию которая попросту будет заниматься копированием шрифтов из одной папки в другую (я так и сделал). 2. Gulp будет сжимать и копировать svg иконки вместе с изображениями Решения пока что не нашел, разве что в path.src.img убрать с расширений файлов svg, и сделать отдельную папку в которой будут лежать svg иконки, подвязать функцию которая будет заниматься копированием этой папки со всеми svg в папку исходников. 3. Самая проблематичная тема на мой взгляд. Если по ходу работы проекта добавлять новые изображения, gulp будет сжимать и конвертировать в webp уже ранее добавленные изображения + эти новые изображения. Так же, если после повторного запуска gulp ранее было добавлено много изображений, они все будут сжиматься и конвертироваться в webp, из-за того, что папка удаляется, а это явно будет долгий запуск. Решение: пробовал решить минус с добавлением изображений в проект по ходу работы gulp с помощью плагина gulp-newer, этот плагин дает понять что изображение уже было сжато и его повторно сжимать не нужно, он отрабатывает отлично, но далее стоит после сжатия pipe на конвертирование в webp, отрабатывается плохо, ибо насколько я понял, на него не действует этот плагин. Я только второй день пытаюсь освоить gulp, и в комментариях не увидел ответы на эти недочеты, буду рад помощи!
2. path.src.: img: source_folder + '/img/**/*.{jpg,png,gif,ico,webp}', //убрал svg svg: source_folder + '/img/**/*.svg', //добавил новый путь с поиском svg function svgCopy() { //функция которая копирует svg с одной папки в другую return src(path.src.svg) .pipe(dest(path.build.img)) } function watchFiles(params) { gulp.watch([path.watch.svg], svgCopy); //при изменениях в папке с svg будет вызываться функция svgCopy } let build = gulp.series(clean, gulp.parallel(js, css, html, svgCopy, images, fonts), gulp.parallel(fontsStyle, browserSync)); exports.svgCopy = svgCopy;
3. Тут решил не пудрить себе мозги и забить на сжатия и конвертирования прямо по ходу работы gulp. Сделал функцию, она запускается отдельно, попросту сжимает все изображения и копирует их в папку с исходниками в img сохраняя структуру папок. От webp отказался, есть некоторые проблемы в вёрстке при встраивании автоматически плагином (забыл название) тега picture в котором уже webp и img изображения. Короче говоря когда вёрстка закончена запускаю эту функцию, она сжимает все изображения и копирует в папку с исходниками, как-то так.
Внимание! Для корректной работы Sass в настоящее время требуется установить дополнительный пакет "sass" (npm i -D sass), а подключать модули Sass в gulpfile.js следует следующим образом: const sass = require('gulp-sass')(require('sass'));
Если у кого-то в новом проекте при запуске gulp выдаёт ошибку Error: Cannot find module 'webp-converter/cwebp' , то задайте npm install webp-converter@2.2.3 --save-dev , после чего запустите gulp снова. Мне помогло, может и вам поможет.
Жень, огромное спасибо за столь подробное руководство! Возникли проблемы с модулем gulp-ttf2woff2, а так в целом все установил. Будет ли обновление сборки?
Здравствуйте! У Вас тоже не создается папка dist, а в консоли видно, что сразу после старта fonts идет его завершение ([17:01:08] Starting 'fonts'... [17:01:09] Finished 'fonts' after 248 ms)?
У кого проблемы с плагином WEBPCSS нужно установить converter командой (npm install webp-converter@2.2.3 --save-dev) У кого не конвертируются шрифты добавьте в путь ( + "*.ttf") вот так src(path.src.fonts + "*.ttf").
добавлять только так function fonts() { src(path.src.fonts + "*.ttf") .pipe(ttf2woff()) .pipe(dest(path.build.fonts)); return src(path.src.fonts) .pipe(ttf2woff2()) .pipe(dest(path.build.fonts)); }; или еще и сюда? return src(path.src.fonts) ?? Просто если добавить только так как я написала первый раз у меня конвертируется только в woff2 , просто woff не появляются файлы
gulp не копирует изображения всех форматов кроме jpg, делал как написано в описании, пытался найти решение в интернете, ничего не помогает, мне нужно чтоб gulp видел svg файлы Помогите пожалуйста!
Здравствуйте! Еще раз благодарю за видео! Вот коечто от себя: 33:05 - для решения этой проблемы я прописал следующее: src:{ html: source_folder +"/index.html", ... }, но это, видимо, подходит только для одностраничного сайта 42:40 - здесь можно добавить grid:true для поддержки гридов 1:10:56 - необходимая фунция колбэк
Примечание: "33:05 - для решения этой проблемы я прописал следующее: src:{ html: source_folder +"/index.html", ... }, но это, видимо, подходит только для одностраничного сайта" можно оставить в старом варианте, просто нужно наши паршелы .html ложить в отдельную папку, и тогда система будет работать даже для многостраничного сайта
Если у кого возникли проблемы с imagemin. С тем что нужно установить 7ю версию В терминал вбивайте ( npm i gulp-imagemin@7.0.0 --save-dev) После, будет работать как у Жени
Фрилансер по жизни пожалуйста, обновите урок по сборке. Щас с последними обновлениями все поменялось и посыпалось, надо на import/export вместо require. Сидишь час пишешь, потом в конце оказывается ниче не работает, куча ошибок. Ваши уточнения уже не помогают. Все уважающие себя блогеры регулярно выкладывают инструкции обновлений своих шаблонов. Уважайте новичков подписчиков.
Привеет, где -то в комментария под твоими роликами видел пост « часть первой зарплату в IT переведу вам😁» так вот, я присоединяюсь, огромнейшее вам спасибо !
Большое спасибо за труд ( и лайк :) ). Если не против хотел бы добавить Дополнительные удобные плюшки по npm (в терминале): * npm search WORD - позволяет находить доступные пакеты по указанному слову "WORD" * npm home PACKAGE - переводит на домашнюю страничку пакета в браузере по-умолчанию По поводу исключений для *.html в gulpfile.js, возможно удобнее вынести вспомогательные файлы отдельные компоненты, например #src>components>header>header.html, header.scss (опционально header.js). В таком случае можем получить универсальный компонент для использования в разных проектах. (Как вариант, в pug такой подход пробовал - мне понравилось) Кстати PUG не пробовал? Мне очень зашла. Позволяет очень гибко собирать проект, можно делать заготовки целых блоков и в зависимости от переданных данных выводить разный тип блока. (в gulp-fiile-include в документации тоже увидел условия и циклы, но еще не попробовал) И exports.* как мне кажется лишние. Мы их нигде не импортируем. Оставил только дефолтный экспорт - все также работает.
Функция для WebP 1:01:00 function checkWebP(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height == 2); }; webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; }; checkWebP(function(support) { if(support) { //Do what you whant =) console.log('work webp'); }else{ //Do what you whant =) console.log('not work, use jgp/png') }
У кого проблемы с sass в терминале пропишите "npm install sass gulp-sass --save-dev" и замените в gulpfile.js на: scss = require('gulp-sass')(require('sass')); а также: scss({ outputStyle: 'expanded' }).on('error', scss.logError) , воть :p
Жека ты лучший ! Все твои видео выходят тогда когда мне это действительно нужно . Друг позвал работать над проектом и сказал будем работать с галпом и тут бац выходит твой видос .
48:22 ты прям предугадал мои эмоции) Мега крутой урок, Gulp был моим слабым местом, но благодаря тебе наконец-то с ним разобрался, спасибо тебе огромное!
@@jija5780 кто то в комментариях писал, что нужно пересоздать файл fonts.scss. Этот способ у меня сработал, видимо когда сам файл пустой, туда повторно ничего не записывается...вообщем у меня отработала функция после создания нового файла fonts.scss
Если вдруг у кого-то не будет работать конвертация в WEBP других форматов, кроме jpg: img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}" В этой строчке, то что в фигурных скобках должно быть без пробелов. Весь день провозился, но нашел в чем была моя проблема. Всем успехов. Канал просто супер. Пожалуйста продолжайте, очень подробно, очень интересно
1:00:23 у кого нихрена не работает после подключения gulp-webpcss установите: npm install webp-converter@2.2.3 --save-dev или сразу ставьте нормальный модуль: gulp-webp-css
Редко пишу комментарии но автор этого видео реально заслуживает уважения!!! Я подробно разбирал этот вопрос и это не сомненно лучшое выдео о Gulp в рунете!!! В нем именно то что нужно причем написано всё в новом стандарте. Мужик, спасибо тебе! Ты реально крут!
Огромное спасибо за видео! Все понятно, по делу и со стилем. Очень долго не мог разобраться с gulp, а тут и быстро все понял и с удовольствием. Огромный тебе респект за проделанную работу!
Во время интеграции gulp в проект возникла проблема отображения фоновых картинок. Решение нашёл тут, может кому поможет: stackoverflow.com/questions/38160749/background-image-path-not-working-in-css-file-using-gulp-js По факту в css просто был неверно прописан относительный путь к картинке. Исправил. Но заметил новую странность: когда галп всё собирает и запускает, то даже при правильно прописанных путях в html и css обычные картинки отображаются, а фоновые нет. Но после обновления выданной галпом страницы всё отображается. Либо же когда фоновые картинки не прогрузились, можно просто в режиме разработчика зайти в нужный класс и увидеть что там изображение прописано с верным путём, и если снять галочку отображения свойства(в моём случае для фонового изображения) и затем поставить её снова, то фоновая картинка уже отображается
Мега крутая сборка! Думаю, это шикарный и щедрый подарок для нас, спасибо большое! P.s. Посмотрела до конца, вся семья принимала активное участие в съёмках, очень здорово! 🤗
после установки gulp-uglify-es и запуска галпа, терминал выдаёт typeError: uglify is not a function. Кто-нибудь знает, как это решить? Update: я в объявлении новой переменной не написала .default, из-за этого и была ошибка.
Супер. Ты все делаешь очень просто. Все непонятные вещи в твоей интерпретации являются супердоступными. Жалко, что только один лайк можно. Реально заслуживаешь больше. Спасибо тебе. Окончание видоса впечатляет. Класс.
Редко ставлю лайки. Обычно это происходит так: смотрю-смотрю видос и в какой-то момент думаю "о, рельно смешно\полезно\интересно\красиво..." и ставлю лайк. Если за весь видос такого импульса не происходит - лайк не ставалю. Пока смотрела этот урок, несколько раз порывалась ставить лайк, а он уже есть. Несправедливо это.
Видео по отличное, спасибо! Чтобы все выполнить, пришлось смотреть его не меньше 3-х часов, представляю сколько времени заняло у Жени, на создание этого урока. Отдельное спасибо за ваш труд!
![Налог на незнание JavaScript - [Hamster Kombat]](/img/n.gif)
Для тех у кого проблемы с gulp-imagemin установите версию ^7.1.0
npm i gulp-imagemin@^7.1.0
спасибо большое за совет)))
Спасибо огромное, не могла решить эту проблему
благодарю
Спасибо, братан.
Спасибо!!
Учителя платных курсов останутся без работы )) Спасибо огромное!
Пожалуйста!
точно подмечено))
видимо и 52 инфобизнесмена поставили дизлайк, но нас всё равно больше и автору большущий лайк
@@FreelancerLifeStyle чем это отличается от стандартных таск?
@@ZimaTimofey ага, у меня такая же мысль сразу пробежала)) только они, захлебываясь слезами беспомощной злости, могли трясущейся от рыданий рукой ткнуть на диз
Ребята у кого вылезает ошибка
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 тажехрень
У меня почему то не решилась проблема
Решил проблему, если закомментирован, плагин все равно видет его
У кого ошибка в браузере 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 секунд. Теперь всё отлично. Благодарствую!
Для работы плагина внёс следующие изменения:
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 за 1 час"
*прошло 2 дня*
______________________
Огромное спасибо за урок. У меня все вышло, путь был долгим, но я смог благодаря крутой и понятной подачи, спасибо
ponimaiu))))))))))))))))))
Боже, прослезилась от всей жизненности ситуации))
Повторение - мать ученья! Советую периодически повторять все процедуры из видео, очень крутая сборка, автономная.
@@АлексейПискунов-ц4ц нет смысла повторять. Всё есть на quick start gulp. А после всё равно прийдется слезть с gulp и собирать всё вручную
@@arthurshishko1841 а почему нужно будет слезть?
если что, плагин file-include 1.2.13 теперь создает константу в начале вашего gulp файла. Поэтому fileinclude=require("gulp-file-include") писать не надо, иначе словите ошибку повторного обьявления переменной.
я констатну вначале просто закоментил))
Спасибо!
Лучший, прям во время)
или просто удалить
не знаю кто ты , но живи долго и счастливо , очень выручил )
Для тех у кого проблема со стартовым шаблоном при запуске 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
спасибо за помощь и подсказку, а то я тут сижу и туплю. Самоучка сам
мои мысли 4 дня назад:
"Ура! Осталось изучить gridы и gulp, и завтра-послезавтра начну учить JS!!"
После 2-х дней на gridах "че-то гемор какой-то, пойду-ка лучше gulp по-быстрому изучу"
После 2-х дней на gulpe "да твою ж мать!!!"
Благодарю за очень подробные уроки!
по сравнению с gulp gridы - это детский лепет.
ох сколько еще жопа будет гореть из за gulpa )))
ну шо выучил?
@@jedixtv3362 в целом галп не такой страшный каким кажется.
я не один такой)) а еще мне сказали вчера, что - Галп сейчас заменен вебпаком))) и у меня вообще дверца захлопнулась))
Проблема с плагином (gulp-webpcss) РЕШАЕТСЯ при ошибке "Error: Cannot find module 'webp-converter/cwebp' очень легко !!! Просто пишем в командную строку ( npm install webp-converter@2.2.3 --save-dev ) !!!!
спасибо!
Спасибо, очень выручил!
помогло, спасибо, а почему именно такие цифры webp-converter@2.2.3?
@@katsiarynayaryvanovich7415, эти цифры обозначают версию библиотеки
Отличное видео! Наконец-то хороший урок по Gulp из всех что есть в интернете. Теперь я всё понял) Очень понравилась сборка! Спасибо большое!!!!!!)))))
Супер! Я рад!
@@FreelancerLifeStyle пожалуйста добавь в описание где апдейт снизу
Запустить команды по очереди:
gulp clean
npm i
gulp
иначе не работает gulp
Вообще если бы еще было видео по git, можно было бы считать задачу разбора минимум-необходимых инструментов закрытой и паковать это дело в отдельный плей-лист
Поддерживаю. женя, сделай, пожалуйста, видео по Git
Также и я
в youtube куча видео по git, не говоря уже про книги и статьи.
Очень интересное видео получится, на 3 минуты наверное.
@@proglife3936 У Евгения подача материала отлична +5
55:10 Кто создает с нуля, или тот, у кого пакеты не фиксированных версий, не понимает почему не запускается сборщик,
Ответ: вышла новая версия пакета imagemin спустя 2 года, и он не собирает
Решение: устанавливать старую версию
npm install --save-dev gulp-imagemin@7.1.0
Дякую, якраз шукав рішення проблеми
не помогло, папка img не создалась в dist
У кого проблемы с webpcss лучше сразу устанавливайте gulp-webp-css (перед css тире стоит). В css появится директива @support, которая будет проверять поддержку webp, без всяких танцев с бубнами и js по добавлению класса. С середины лета 2020 (судя по информации из гугла) автор пакета gulp-webpcss что-то нахимичил и теперь не работает нормально. Джека, еще раз спасибо за видос!
Спасибо добрый человек
Спасибо
Дякую!
А можете подсказать,
у меня теперь в стилях вот такой код @supports (-webkit-appearance:none)
так и должно быть?
Просто у Жени совсем по другому
Спасибо. Модуль из видоса мне не зашел.
Если у кого возникнет ошибка Cannot read property 'indexOf' of undefined, то это из-за того, что у вас в CSS файле комментарий /* */.
Для фикса проблем с webp-converter (и не только!) вдальшейшем:
1) Устанавливаем WEBPCSS как указано в описании к видео ( npm install webp-converter@2.2.3 --save-dev )
2) В файле package.json в блоке "devDependencies" в строке "webp-converter": "^2.2.3" убираем символ "^" перед номером версии; сохраняем файл
3) В шаблоне сборки помимо файла package.json сохраняем также файл package-lock.json (копируем его впоследствии вместе с шаблоном сборки при создании нового проекта).
4) При инициализации сборки в новом проекте вместо команды: npm i используем команду: npm ci (для этого и сохраняем файл package-lock.json)
Таким образом, при создании нового проекта версии модулей будут подгружаться в соответсвии версиям, использованным в шаблоне сборки (без обновлений). Посему, получаем стабильную версию сборки и проблем с webp-converter уже не будет. Также это полезно при командной разработке с использованием Git.
Подробнее здесь: habr.com/ru/post/350762/ ;
здесь: habr.com/ru/company/ruvds/blog/423703/ ;
и здесь: monsterlessons.com/project/lessons/razbiraemsya-s-versiyami-paketov-v-node
1:11:50 Функция fontsStyle не работает, в консоли бесконечная загрузка Starting "fontsStyle" ...
Upd: Работает после переустановки всего Gulp'a, и не установки некоторых плагинов
Та же история вышла у меня. Нашел решение в комментах к видео:
warehouse - автор решения
1 год назад
Попробуй в функции "fontsStyle" первую строку исправить таким образом:
function fontsStyle(cb) {
А в самом конце функции перед последней закрывающейся скобкой поставить cb();
А это можно удалить:
function cb() {
}
@@ДимаНорков спасибо огромное!!!!!!
не видно часть кода функции, где можно посмотреть?
здравствуйте. подскажите пожалуйста в чем проблема не устанавливается gulp-sass ошибка Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[00:04:33] The following tasks did not complete: default, , watchFiles, browserSync, , css, html
[00:04:33] Did you forget to signal async completion?
У меня такая же проблема.
В терминал вбить: npm install sass gulp-sass --save-dev
В package.json написать:
"sass": "latest"
в gulpfile.js пишем вместо scss = require('gulp-sass') вот это:
scss = require('gulp-sass')(require('sass'));
Должно помочь, если все правильно сделать
спасибо большое
@@laropam8746 Спасибо долго искал решение, но у меня почему то создаётся папка distcss.Это нормально или я где то ошибся?
Решаема ли эта проблема или эта сборка окончательно умерла на сегодня?
Error [ERR_REQUIRE_ESM]: require() of ES Module
Спасибо за видео! У меня webpcss не работало с бэкгграундом, даже с ипользованием настроек из описания ( с ними почему-то вообще не появлялось ни jpg, ни webp картинки.). А вот сработало с этим: .pipe(webpcss({webpClass: '', noWebpClass: '.no-webp'})). Просто оставляем webpClass пустым. Может кому-нибудь поможет
кому-то помогло, спасибо))
вместо плагина "gulp-webpcss" можно использовать похожий плагин "gulp-webp-css", ему не нужна дополнительная функция в javascrip.
Работает он по следующему принципу:
==========================
// Input
.banner{
background: url(/img/bannerbg.jpg) no-repeat center;
}
// Output
.banner{
background: url(/img/bannerbg.jpg) no-repeat center;
}
@supports (-webkit-appearance:none){
.banner {
background-image: url(/img/bannerbg.webp);
}
}
==========================
Я скопировал комментарий у человека в комментах,так как ссылку нельзя кинуть на коммент
@@fadheit24 мне не помогло) пишет ошибку не найден webp-converter установил ноль)
@@evgeniyglubokiy2649 хах, кажется, я в итоге забила на webp в проекте))
Огромное спасибо! Это лучший урок из всех просмотренных! Вы гениальный учитель!
Я рад!)
ля ты такой шикарный. твоя фан-банда когда - нибудь выкрадит тебя в пятницу вечером))
Ахах)
О боги! Только задумался над тем чтобы крепко взяться за gulp, и тут Жека выпускает такой ролик! Лайк не глядя!
Спасибо)
@@FreelancerLifeStyle Сделай пожалуйста еще видео по Гридам! Молю!
Відео - супер! Все опрацьовано на високому рівні порад... P.S. Може в когось не було потрібного результату на 12-й хв.: "bash: gulp: command not found". Та на сайті habr.com я знайшов відповідь. Треба ввести також_ npm i -g gulp-cli - і вже потім перевірку_ gulp
Заметил, что появляется проблема после установки gulp-imagemin. Дело в том, что автоматически устанавливается версия 8.0.0. Попробуйте поменять версию на 7.1.0. написав: 'npm i --save-dev gulp-imagemin@7.1.0' У меня заработало и картинки появились
Hvala puno frende ))!
FontsStyle выполняется без ошибок, но fonts.scss остается пустым. В чем может быть причина?
fonts.scss не заполняется если не пуст. может пробел?
@@FreelancerLifeStyle Это жесть) И в правду пробел. Заново создал файл fonts.scss и все получилось. Спасибо)
Правда пришлось немного изменить функцию fontsStyle потому что она не завершалась. Здесь ниже писали:
codepen.io/Adn070/pen/LYGvXmr
@@Владислав-б5й7н Низкий поклон!!!
Классный видос, все по делу и шустро. Только не могу пнять почему у меня
return src(path.src.fonts).pipe(ttf2woff2()).pipe(dest(path.build.fonts)) - с ним загружается localhost: 3000, без него страница?
Ничего не знаю про gulp, но думаю, лишним точно не будет)
Хороший вариант получить информацию максимально доступно!
Здравствуйте! Спасибо за годный гайд! Не подскажите как пофиксить ошибку связанную с вызовом таска fontsStyle?
Выдает ошибку:
[14:14:41] The following tasks did not complete: message
[14:14:41] Did you forget to signal async completion?
перечитал разные форумы, я так понял ошибка связанная с новым уровнем политики асинхронности тасков в gulp 4,
обходные пути представленные в руководстве по gulp 4 даже есть в самой функции, но почему - то ошибка не исчезает, в итоге виснет таск.
Было так же, я написал так и у меня заработало без ошибок codepen.io/Adn070/pen/LYGvXmr
@@daulet6935 помогло, спасибо. А сконвертировать форматы шрифтов получилось ?
@@daulet6935 Огромное спасибо! Мне помогло! Низкий Вам поклон!
Евгений, автор, очень прошу исправить с обновлениями gulp. Много ошибок, никак не воспользоваться твоим полезным видео уже несколько дней.
Це так і має бути що вилітає помилка що при picture браузер не може відкрити webp картинку а відкриває просту картинку. Та й ми бачимо автор на приклады наводить на просту картинку і екран засвічується це так повинно бути?
Класное, полезное, насыщенное видео, на его основе я написал свою сборку.
Некоторые плагины которые показаные в видео выкидывали ошибку и некоторые из них пришлось заменить, но плагин gulp-webp-html в html файл вставляет две точки перед расширением webp и к сожалению замены этому плагину я не нашел, поэтому пришлось его исправить.
Я исправил ошибку в этом плагине и залил его на сайт NPM, вы можете найти его под именем gulp-html-in-webp и установить с помощью команды npm i --save-dev gulp-webp-in-html, надеюсь что это кому то пригодится.
У меня была другая проблема с этим плагином - он делал picture только первому изображению (я еще использовал плагин для строчного отображения html после webp). Я пол дня убил на исправление. В итоге попробовал твой плагин, и о чудо! WebP применяется ко всем изображениям (даже к svg, что по идее не надо, кек), и файл index.html можно читать не вырывая себе глаза. Так что Спасибо тебе большое!))
Роман подскажите как сделать так что бы плагин не оборачивал файлы svg?
два дня мучений и наконец то нашел решение. спасибо вам большое
У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install webp-converter@2.2.3 --save-dev - мне помогло :)
Thanks dude
спасибо братюнь, очень выручил)))
все делаю четко за тобой. проблема на проблеме (
[16:22:47] Using gulpfile ~\Desktop\fls-gulpi\gulpfile.js
[16:22:47] Starting 'default'...
[16:22:47] Starting 'watchfiles'...
[16:22:47] Starting 'browserSync'...
[16:22:47] Starting 'html'...
[16:22:47] 'watchfiles' errored after 3.35 ms
[16:22:47] TypeError: Cannot read property 'html' of undefined
at watchfiles (C:\Users\I\Desktop\fls-gulpi\gulpfile.js:55:28)
at bound (domain.js:427:14)
at runBound (domain.js:440:12)
at asyncRunner (C:\Users\I\Desktop\fls-gulpi
ode_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:79:11)
десь помилка може навіть в 1 букві
Если вам всё же удалось исправить эту ошибку напишите пожалуйста!!!
@@ГеннадийКалинин-т4ш не правильный адрес к html. Там пишется , что не может прочитать хтмл у undefined
@@island1345 перепроверил .pipe(dest(path.build.html))
если это тут то всё правильно но не работает
у меня была проблема из-за опечатки в 19 строке (написал whatch вместо watch), так что скорее всего вам нужно просто внимательно перепроверить весь gulpfile
Что делать если при вводе gulp оно возвращает ошибку из-за imagemin
> gulp
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\dev\gulp\my_personal_portfolio
ode_modules\gulp-imagemin\index.js
require() of ES modules is not supported.
require() of E:\dev\gulp\my_personal_portfolio
ode_modules\gulp-imagemin\index.js from E:\dev\gulp\my_personal_portfolio\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 E:\dev\gulp\my_personal_portfolio
ode_modules\gulp-imagemin\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (E:\dev\gulp\my_personal_portfolio\gulpfile.js:38:16)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
code: 'ERR_REQUIRE_ESM'
}
установить более старую версию плагина командой npm i --save-dev gulp-imagemin@7.1.0
В 8 версии убрали поддержку CommonJS. Теперь надо использовать импорт, как я понимаю. Но проще откатиться к 7 версии.
У кого выдаёт ошибку после подключение пакета clean-css:
Error: Ignoring local @import of "#src/css/main-style.css" as resource is missing.
Проблема в # в имени #src, возможно кому-то это спасёт 3 часа времени =)
Спасибо тебе большое за подсказку! Вчера вечером весь мозг сломал: вот должно все работать, но не работает. Поставил вызов clean_css после копирования в папку, ошибка естественно пропала, но плагин попросту ничего не делал, так же, как и rename. Теперь убрал решетку из имени папки, поставил clean_css до копирования файла, и все работает как должно.
У вас нету в планах сделать гайд по webpack 5?
Ой, ну прям так мило)) У Жени, когда все получается - он так искренне радуется, и я радуюсь вместе с ним и сижу улыбаюсь весь ролик :D
Хех)
Евгений я надеюсь Вы умеете плавать, потом как очень велик риск потому в океане благодарности за это видео! Это просто замечательное обучающее пособие! Огромное спасибо и низкий поклон!
У тех у кого сборка поламалась на gulp-imagemin . Сделайте такое
npm uninstall gulp-imagemin --save
npm install --save-dev gulp-imagemin@7.1.0
npm i webp-converter@2.2.3 --save-exact - что бы проблема постоянно на новом проекте не выскакивала конвертор установите с этим флагом
Здравствуйте, Евгений! Обновился плагин gulp-imagemin 8.0.0 требующий импорт в gulp4; Сможете найти решение? погуглив, я решения не нашел
Если можно, то было бы круто увидеть видео по Webpack
Жека, подскажи пожалуйста!
Ты до сих пор юзаешь эту сборку!?
Для плагина filtinclude можно добавить папку templates например, чтобы куски страницы хранить там.
1. В объект путей для watch добавьте поле templates: `${sourceFolder}/templates/**/*.html`,
2. В функцию html добавьте объект с настройками для fileinclude:
.pipe(fileInclude({
prefix: '@@',
basepath: 'ваш_путь_в_папке_src'
, напр.: '_src/templates'
}))
3. В функцию watchFiles добавьте новый путь за которым следить и выполнять функцию html:
gulp.watch([path.watch.templates, path.watch.html], html)
Может быть кому-то пригодится.
Добрый день! Лично у меня на 26:19 cannot GET/ ошибка - несмотря на то что html файл заполнен контентом... Все по 10 раз перепроверил
require() of ES modules is not supported. с imagemin, ошибка и не получаеться исправить
Народ, я думаю, нам с вами очень повезло, что мы подписаны на этого человека. Такой золотой контент трудно найти
Замеченые мной минусы дефолтной сборки Евгения:
1. Если изначально поместить шрифты формата woff/woff2 в fonts то gulp в исходниках не создаст папку fonts и не скопирует туда шрифты, соответственно и их подключения через миксин не произойдет потому что в path.src.fonts стоит поиск файлов только с расширеним ttf.
Решение: в path.src.fonts сменить поиск файлов с расширением на woff/woff2, полностью избавится от плагинов и функций связанных с конвертированием шрифтов otf/ttf в woff/woff2, закидывать шрифты вручную и оставить функцию которая попросту будет заниматься копированием шрифтов из одной папки в другую (я так и сделал).
2. Gulp будет сжимать и копировать svg иконки вместе с изображениями
Решения пока что не нашел, разве что в path.src.img убрать с расширений файлов svg, и сделать отдельную папку в которой будут лежать svg иконки, подвязать функцию которая будет заниматься копированием этой папки со всеми svg в папку исходников.
3. Самая проблематичная тема на мой взгляд.
Если по ходу работы проекта добавлять новые изображения, gulp будет сжимать и конвертировать в webp уже ранее добавленные изображения + эти новые изображения. Так же, если после повторного запуска gulp ранее было добавлено много изображений, они все будут сжиматься и конвертироваться в webp, из-за того, что папка удаляется, а это явно будет долгий запуск.
Решение: пробовал решить минус с добавлением изображений в проект по ходу работы gulp с помощью плагина gulp-newer, этот плагин дает понять что изображение уже было сжато и его повторно сжимать не нужно, он отрабатывает отлично, но далее стоит после сжатия pipe на конвертирование в webp, отрабатывается плохо, ибо насколько я понял, на него не действует этот плагин.
Я только второй день пытаюсь освоить gulp, и в комментариях не увидел ответы на эти недочеты, буду рад помощи!
2. path.src.:
img: source_folder + '/img/**/*.{jpg,png,gif,ico,webp}', //убрал svg
svg: source_folder + '/img/**/*.svg', //добавил новый путь с поиском svg
function svgCopy() { //функция которая копирует svg с одной папки в другую
return src(path.src.svg)
.pipe(dest(path.build.img))
}
function watchFiles(params) {
gulp.watch([path.watch.svg], svgCopy); //при изменениях в папке с svg будет вызываться функция svgCopy
}
let build = gulp.series(clean, gulp.parallel(js, css, html, svgCopy, images, fonts), gulp.parallel(fontsStyle, browserSync));
exports.svgCopy = svgCopy;
3. Тут решил не пудрить себе мозги и забить на сжатия и конвертирования прямо по ходу работы gulp. Сделал функцию, она запускается отдельно, попросту сжимает все изображения и копирует их в папку с исходниками в img сохраняя структуру папок. От webp отказался, есть некоторые проблемы в вёрстке при встраивании автоматически плагином (забыл название) тега picture в котором уже webp и img изображения.
Короче говоря когда вёрстка закончена запускаю эту функцию, она сжимает все изображения и копирует в папку с исходниками, как-то так.
Внимание! Для корректной работы Sass в настоящее время требуется установить дополнительный пакет "sass" (npm i -D sass), а подключать модули Sass в gulpfile.js следует следующим образом:
const sass = require('gulp-sass')(require('sass'));
POMOG BRO SENK
не помогло
ТЬІ БОГ!!! но мне помог > npm i gulp-sass --save-dev-force
Чувак огромное спасибо, мучался 1 час !
выдает ошибку File not found with singular glob
Если у кого-то в новом проекте при запуске gulp выдаёт ошибку Error: Cannot find module 'webp-converter/cwebp' , то задайте npm install webp-converter@2.2.3 --save-dev , после чего запустите gulp снова. Мне помогло, может и вам поможет.
Жень, огромное спасибо за столь подробное руководство!
Возникли проблемы с модулем gulp-ttf2woff2, а так в целом все установил.
Будет ли обновление сборки?
Здравствуйте! У Вас тоже не создается папка dist, а в консоли видно, что сразу после старта fonts идет его завершение ([17:01:08] Starting 'fonts'...
[17:01:09] Finished 'fonts' after 248 ms)?
проблема решена, необходимо записать функцию так:
function fonts() {
src([source_folder + "/fonts/*.ttf"])
.pipe(ttf2woff())
.pipe(dest(path.build.fonts))
return src([source_folder + "/fonts/*.ttf"])
.pipe(ttf2woff2())
.pipe(dest(path.build.fonts))
};
@@АлексейСтупников-д4у мне к сожалению и это не помогло.....
У кого проблемы с плагином WEBPCSS нужно установить converter командой
(npm install webp-converter@2.2.3 --save-dev)
У кого не конвертируются шрифты добавьте в путь ( + "*.ttf") вот так src(path.src.fonts + "*.ttf").
Спасибо огромное, мучался 3 часа.
добавлять только так
function fonts() {
src(path.src.fonts + "*.ttf")
.pipe(ttf2woff())
.pipe(dest(path.build.fonts));
return src(path.src.fonts)
.pipe(ttf2woff2())
.pipe(dest(path.build.fonts));
};
или еще и сюда? return src(path.src.fonts)
?? Просто если добавить только так как я написала первый раз у меня конвертируется только в woff2 , просто woff не появляются файлы
@@alinafitisova3176
function fonts() {
src(path.src.fonts + "*.ttf")
.pipe(ttf2woff())
.pipe(dest(path.build.fonts));
return src(path.src.fonts + "*.ttf")
.pipe(ttf2woff2())
.pipe(dest(path.build.fonts));
}
@@GANGST1ER к сожалению у меня все равно не работает. Спасибо за ответ
@@alinafitisova3176 могу скинуть весь файл. t.me/GANGST1ER
Поставил лайк и подписался после этого сразу пошла загрузка node js 🤪Ждем видео по WordPress 🙏
Спасибо! Все будет!
gulp не копирует изображения всех форматов кроме jpg, делал как написано в описании, пытался найти решение в интернете, ничего не помогает, мне нужно чтоб gulp видел svg файлы
Помогите пожалуйста!
В файле gulpfile.js исправить ошибку fileinclude на file_include
file_include = require("gulp-file-include");
А в чем ошибка?
Здравствуйте! Еще раз благодарю за видео! Вот коечто от себя:
33:05 - для решения этой проблемы я прописал следующее:
src:{
html: source_folder +"/index.html",
...
},
но это, видимо, подходит только для одностраничного сайта
42:40 - здесь можно добавить grid:true для поддержки гридов
1:10:56 - необходимая фунция колбэк
Примечание:
"33:05 - для решения этой проблемы я прописал следующее:
src:{
html: source_folder +"/index.html",
...
},
но это, видимо, подходит только для одностраничного сайта"
можно оставить в старом варианте, просто нужно наши паршелы .html ложить в отдельную папку, и тогда система будет работать даже для многостраничного сайта
Я тоже очень ленивый, поэтому вместо --save-dev использую -D Это то же самое :)
круть, буду знать!
Просто золотой Человек!
Если у кого возникли проблемы с imagemin. С тем что нужно установить 7ю версию
В терминал вбивайте ( npm i gulp-imagemin@7.0.0 --save-dev)
После, будет работать как у Жени
Фрилансер по жизни пожалуйста, обновите урок по сборке.
Щас с последними обновлениями все поменялось и посыпалось, надо на import/export вместо require.
Сидишь час пишешь, потом в конце оказывается ниче не работает, куча ошибок.
Ваши уточнения уже не помогают.
Все уважающие себя блогеры регулярно выкладывают инструкции обновлений своих шаблонов.
Уважайте новичков подписчиков.
Привеет, где -то в комментария под твоими роликами видел пост « часть первой зарплату в IT переведу вам😁» так вот, я присоединяюсь, огромнейшее вам спасибо !
Буду ждать)
Большое спасибо за труд ( и лайк :) ).
Если не против хотел бы добавить
Дополнительные удобные плюшки по npm (в терминале):
* npm search WORD - позволяет находить доступные пакеты по указанному слову "WORD"
* npm home PACKAGE - переводит на домашнюю страничку пакета в браузере по-умолчанию
По поводу исключений для *.html в gulpfile.js, возможно удобнее вынести вспомогательные файлы отдельные компоненты, например #src>components>header>header.html, header.scss (опционально header.js). В таком случае можем получить универсальный компонент для использования в разных проектах. (Как вариант, в pug такой подход пробовал - мне понравилось)
Кстати PUG не пробовал? Мне очень зашла. Позволяет очень гибко собирать проект, можно делать заготовки целых блоков и в зависимости от переданных данных выводить разный тип блока. (в gulp-fiile-include в документации тоже увидел условия и циклы, но еще не попробовал)
И exports.* как мне кажется лишние. Мы их нигде не импортируем. Оставил только дефолтный экспорт - все также работает.
Жека спасибо за видео. Очень жду от тебя видео на 2 темы:
1) Адаптивные шрифты
2) Кроссбраузерность
Функция для WebP 1:01:00
function checkWebP(callback) {
var webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height == 2);
};
webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};
checkWebP(function(support) {
if(support) {
//Do what you whant =)
console.log('work webp');
}else{
//Do what you whant =)
console.log('not work, use jgp/png')
}
})
У кого проблемы с sass в терминале пропишите "npm install sass gulp-sass --save-dev" и замените в gulpfile.js на:
scss = require('gulp-sass')(require('sass'));
а также: scss({ outputStyle: 'expanded' }).on('error', scss.logError) , воть :p
Мда) это тебе не препрос запускать:D
Жека ты лучший ! Все твои видео выходят тогда когда мне это действительно нужно . Друг позвал работать над проектом и сказал будем работать с галпом и тут бац выходит твой видос .
Я рад!
Женя, объясни, пожалуйста, почему в первом случае в функции fonts ты не возвращаешь значение через return, а во втором уже возвращаешь?
У меня была ошибка с gulp-webpcss и я нашел gulp-webp-css, если кому то надо, а еще для него не нужен js, для замены формата, он через media заменяет
СПС помогло!
ай спаибо)
Привіт, Евгеній. в мене пісдя додавання "del" видає помилку Error [ERR_REQUIRE_ESM]: require() of ES Module Неможу збагнути що не так?
поставь npm i del@6.1.1 а тот удали из папки node_modules
Интересно, 3 диза поставили наверно Сэр Тим Бернерс-Ли
, Джеймс Гослинг и Андерс Хейлсберг...
Они.. пил вчера с ними пиво, немного повздорили..
@@FreelancerLifeStyle 😂😂
48:22 ты прям предугадал мои эмоции)
Мега крутой урок, Gulp был моим слабым местом, но благодаря тебе наконец-то с ним разобрался, спасибо тебе огромное!
Я рад!
А почему у меня не работает автоматическое подключение шрифтов?
+
Получилось как-то решить эту проблему?
@@shustrik911 к сожалению нет. Я сам просто подключаю, это вприинц не долго
@@shustrik911 я миксин оставил, а функцию джс убрал
@@jija5780 кто то в комментариях писал, что нужно пересоздать файл fonts.scss. Этот способ у меня сработал, видимо когда сам файл пустой, туда повторно ничего не записывается...вообщем у меня отработала функция после создания нового файла fonts.scss
Если вдруг у кого-то не будет работать конвертация в WEBP других форматов, кроме jpg:
img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}"
В этой строчке, то что в фигурных скобках должно быть без пробелов. Весь день провозился, но нашел в чем была моя проблема.
Всем успехов. Канал просто супер. Пожалуйста продолжайте, очень подробно, очень интересно
1:00:23 у кого нихрена не работает после подключения gulp-webpcss установите:
npm install webp-converter@2.2.3 --save-dev
или сразу ставьте нормальный модуль: gulp-webp-css
Женя, крутая работа! Подскажи пожалуйста, будет урок по webpack?
Спасибо! Думаю да
Редко пишу комментарии но автор этого видео реально заслуживает уважения!!! Я подробно разбирал этот вопрос и это не сомненно лучшое выдео о Gulp в рунете!!! В нем именно то что нужно причем написано всё в новом стандарте. Мужик, спасибо тебе! Ты реально крут!
Спасибо!
Огромное спасибо за видео! Все понятно, по делу и со стилем. Очень долго не мог разобраться с gulp, а тут и быстро все понял и с удовольствием.
Огромный тебе респект за проделанную работу!
Пожалуйста!
У меня у одного плагин del не работает. Все стоит в точности как на видео(Как я понял это связано с новой версией плагина del 7.0.0)
судячи з усього - так. в мене така сама проблема. Error [ERR_REQUIRE_ESM]: require() of ES Module
@@kreatorv1ad поставь
npm i del@6.1.1
поставь npm i del@6.1.1 а тот удали из папки node_modules
Во время интеграции gulp в проект возникла проблема отображения фоновых картинок. Решение нашёл тут, может кому поможет: stackoverflow.com/questions/38160749/background-image-path-not-working-in-css-file-using-gulp-js
По факту в css просто был неверно прописан относительный путь к картинке. Исправил. Но заметил новую странность: когда галп всё собирает и запускает, то даже при правильно прописанных путях в html и css обычные картинки отображаются, а фоновые нет. Но после обновления выданной галпом страницы всё отображается. Либо же когда фоновые картинки не прогрузились, можно просто в режиме разработчика зайти в нужный класс и увидеть что там изображение прописано с верным путём, и если снять галочку отображения свойства(в моём случае для фонового изображения) и затем поставить её снова, то фоновая картинка уже отображается
Круто!!! А для Webpuck будет такой гайд?
Мега крутая сборка! Думаю, это шикарный и щедрый подарок для нас, спасибо большое!
P.s. Посмотрела до конца, вся семья принимала активное участие в съёмках, очень здорово! 🤗
Спасибо! Рад что полезно! Семья всегда со мной, а я всегда с семьей)
Женя, вот за это просто большущий и жирный лайк! ) Огромное спасибо!
Спасибо!
после установки gulp-uglify-es и запуска галпа, терминал выдаёт typeError: uglify is not a function. Кто-нибудь знает, как это решить?
Update: я в объявлении новой переменной не написала .default, из-за этого и была ошибка.
51:40 аглифай не работает кто нибудь в курсе почему?
Супер. Ты все делаешь очень просто. Все непонятные вещи в твоей интерпретации являются супердоступными. Жалко, что только один лайк можно. Реально заслуживаешь больше. Спасибо тебе. Окончание видоса впечатляет. Класс.
Спасибо большое! Всегда можно сделать репост в соц сети))
Жека ты лутший бро. Oгромный респект тебе, очень интересный видос продолжай !!!
Продолжаю!
Одно восхищение!!!!!!!!! Ваши уроки, смотрю с большим удовольствием, доступно, понятно, супер!!!!!!
Я рад!
Редко ставлю лайки. Обычно это происходит так: смотрю-смотрю видос и в какой-то момент думаю "о, рельно смешно\полезно\интересно\красиво..." и ставлю лайк. Если за весь видос такого импульса не происходит - лайк не ставалю. Пока смотрела этот урок, несколько раз порывалась ставить лайк, а он уже есть. Несправедливо это.
Почему ограничили доступ на обнав видео про gulp a
перезалил
Спасибо, за видео.
У меня возник вопрос со шрифтами: получается в сборку уходят woff и woff2 - а как же быть, например с svg?
Спасибо тебе!!
Всегда смотрю твои стримы и видео ролики
Gulp это главный инструмент верстальщика
Пожалуйста!
@@FreelancerLifeStyle Есть один вопрос подойдет ли эта сборка для версии node v10.15.3
Спасибо за твой труд, ты нереально круто подаёшь информацию!🙂☀️
Даже после рекомендуемых изменений в папку dist копирует только jpg
Женя подскажи пожалуйста, выбивает кучу ошибок при установке gulp-ttf2woff и gulp-ttf2woff2, что делать?
та же фигня
Видео по отличное, спасибо! Чтобы все выполнить, пришлось смотреть его не меньше 3-х часов, представляю сколько времени заняло у Жени, на создание этого урока. Отдельное спасибо за ваш труд!
Это да) Пожалуйста!
Спасибо, Женя, за ваш труд. Вы один из тех, кто делает этот мир лучше.
Пожалуйста!
Спасибо большое за урок! Как всегда годнота!
Спасибо!
Очень интересное видео. Но вместо Вашего решения по JS в проекте есть такой Вариант:
В package.json установить:
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"webpack": "^4.43.0",
"webpack-stream": "^5.2.1"
gulpfile.js:
webpack = require('webpack'),
webpackStream = require('webpack-stream');
function js() {
return src(source_folder + '/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({
message: "Error: ",
title: "Error running something"
})))
.pipe(sourcemaps.write((path.build.maps, {
addComment: true
})))
.pipe(dest(path.build.js))
.pipe(browsersync.stream());
}
Данный вариант собран на основе WEBPACK., не мной создан, но хорошо работает и лога нет.
В отношении шрифтов в данном проекте можно сделать следующие интересное решение, позаимствованное и облегчающие работу:
function fonts() {
src(path.src.fonts)
.pipe(ttf2woff())
.pipe(dest(path.build.fonts));
return src(path.src.fonts)
.pipe(ttf2woff2())
.pipe(dest(path.build.fonts));
}
function checkWeight(fontname) {
let weight = 400;
switch (true) {
case /Thin/.test(fontname):
weight = 100;
break;
case /ExtraLight/.test(fontname):
weight = 200;
break;
case /Light/.test(fontname):
weight = 300;
break;
case /Regular/.test(fontname):
weight = 400;
break;
case /Medium/.test(fontname):
weight = 500;
break;
case /SemiBold/.test(fontname):
weight = 600;
break;
case /Semi/.test(fontname):
weight = 600;
break;
case /Bold/.test(fontname):
weight = 700;
break;
case /ExtraBold/.test(fontname):
weight = 800;
break;
case /Heavy/.test(fontname):
weight = 700;
break;
case /Black/.test(fontname):
weight = 900;
break;
default:
weight = 400;
}
return weight;
}
function cb() { }
function fontsStyle(done) {
let file_content = fs.readFileSync(source_folder + '/scss/fonts.scss');
fs.writeFile(source_folder + '/scss/fonts.scss', '', cb);
fs.readdir(path.build.fonts, function (err, items) {
if (items) {
let c_fontname;
for (var i = 0; i < items.length; i++) {
let fontname = items[i].split('.');
fontname = fontname[0];
let font = fontname.split('-')[0];
let weight = checkWeight(fontname);
if (c_fontname != fontname) {
fs.appendFile(source_folder + '/scss/fonts.scss', '@include font-face("' + font + '", "' + fontname + '", ' + weight + ');
', cb);
}
c_fontname = fontname;
}
}
});
done();
}
Хотелось бы увидеть ролик Gulp + Webpack !!! Кто за жмите на лайк !!
Только позавчера было 55 тысяч, сейчас уже 56,2. Вы огромный молодец, что делаете такой классный контент!
Спасибо, стараюсь)