Тёмный

Gulp за 30 минут 

Владилен Минин
Подписаться 308 тыс.
Просмотров 56 тыс.
50% 1

Получить профессию Frontend разработчика -
bit.ly/3SOqPHU
Подробнее узнать об обучении в Result School -
bit.ly/3Nb5svI
Бесплатный курс HTML & CSS - bit.ly/3SOqQvs
Сделать 5 проектов на JavaScript - bit.ly/4bOTDJ1
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...

Опубликовано:

 

11 апр 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 98   
@VladilenMinin
@VladilenMinin 5 лет назад
В этом видео я немного изменил манеру подачи. Понятно ли вам, что происходит или нужно добавлять больше/меньше деталей?
@user-xe8jl7lq1g
@user-xe8jl7lq1g 5 лет назад
Спасибо, Владилен, за урок. Мне лично все было понятно. Смысла не вижу, более детально разбирать плагины, методы и т.д., ты базу даешь, все остальное нужно самим читать, вникать, иначе как потом работать, под рукой собственного Владилена не будет ведь, который разжует материал))
@wepko
@wepko 4 года назад
Как же это было шикарно, спасибо !
@smartpeople4329
@smartpeople4329 4 года назад
Пока самый понятный урок по gulp который я нашел
@user-is2xz3zt6h
@user-is2xz3zt6h 3 года назад
всё понятно
@user-oj3lz1wd7i
@user-oj3lz1wd7i 3 года назад
Если проблемы с железом и операционкой, или ее настройками, то досвидос - gulp. Половина плагинов работать не будет.
@user-ie3kf1vw7i
@user-ie3kf1vw7i 3 года назад
Спасибо, отличное видео. Не забывайте читать документацию. Сначала нужно установить сам gulp "npm i -G gulp-cli". Плагин gulp-autoprefixer немного изменили, теперь правила типа "browsers: ['last 2 versions']" нужно указывать через модуль browserslist (не забудьте его установить "npm i -D browserslist") в package.json , в таком виде "browserslist": ["last 2 version"] или в файле .browserslistrc в таком виде "last 2 version".
@MenuMoscow
@MenuMoscow 2 года назад
overrideBrowserslist: ['last 2 versions'] вот пример как заменить
@mut4bor
@mut4bor 2 года назад
Спасибо за урок, не мог разобраться в галпе, какой канал ни смотрел, а тут все сказано просто и понятным языком
@nikitos2442
@nikitos2442 Год назад
Сборка уже не запускается - устарела. 'ERR_REQUIRE_ESM' type modules не помогает!
@seoonlyRU
@seoonlyRU 2 года назад
Сенкью))) однозначно лукас за подачу материала от сео-гуру СЕООНЛИ
@user-xh1xf2ep5c
@user-xh1xf2ep5c 4 года назад
Владилен, спасибо за видео! Но я не могу понять, чтобы использовать верстку для vue cli нужно брать файлы из dist? Но ведь компоненты проще выбирать из исходников в папке src. Если брать из src, зачем тогда gulp?
@user-re1zz4oz2b
@user-re1zz4oz2b 2 года назад
Спасибо, здорово!
@SlavikPro1998
@SlavikPro1998 2 года назад
спасибо за урок ! с меня лойс
@user-rp6kj9jd1w
@user-rp6kj9jd1w 3 года назад
Спасибо за урок. Появился вопрос - а с js файлами что делать в gulp? Есть минимизация и объединение?
@romanbolshiyanov
@romanbolshiyanov 3 года назад
Когда же на твоем канале появится видео, чтобы его можно было промотать... это не канал, а наркота какая то. Подсел и не соскочишь! Вкусно, прет, спасибо!!!
@aaronjeffrey3922
@aaronjeffrey3922 3 года назад
dunno if you guys gives a damn but if you guys are stoned like me during the covid times then you can watch pretty much all the latest movies on instaflixxer. Have been watching with my girlfriend for the last couple of days :)
@turnerbrentley3504
@turnerbrentley3504 3 года назад
@Aaron Jeffrey Yea, have been using instaflixxer for years myself :)
@spyrav
@spyrav 2 года назад
вкусно срет прочитал… по фрейду?
@andy_lab
@andy_lab Год назад
Урок шикарный!!!))) Подскажите только, как сделать чтобы у меня тоже при вводе команды "code ." в терминале открывалась данная папка в редакторе? )) Работаю на маке и использую vscode
@a-sher
@a-sher 4 года назад
контент высший!
@topalek
@topalek 2 года назад
Как по мне - это одно из лучших видео по gulp. Спасибо
@user-bx7ly2th3b
@user-bx7ly2th3b 4 года назад
ul>li*5>lorem5
@DraCk901
@DraCk901 4 года назад
Делал всё по уроку - всё работает. Я так понимаю это отличный и лёгкий инструмент именно для верстки, но для более сложных проектов лучше использовать webpack?
@myhlv
@myhlv 5 лет назад
Спасибо
@kumaranv7006
@kumaranv7006 2 года назад
Спасибо! Объяснение от бога. Всё максимально понятно. Единственное лично я столкнулся с проблемами docker, у меня node_modules тянет с хост машины - очень медленно запускаются gulp комманды. И watch не работает :(
@asurahan
@asurahan 3 года назад
ха. теперь я понял суть этого вашего галпа. а афигительная штука то однако.
@aleksandramalakutsko401
@aleksandramalakutsko401 3 года назад
Спасибо! Все работает! Только автопрефиксы в 2021 надо заменить на новый вариант, ребята, в документации написано как
@tamesshka
@tamesshka 3 года назад
Не подскажите как решить проблему? Не устанавливаются пакеты. Консоль выдает ошибку по поводу node-sass(
@669pain
@669pain 4 года назад
Бро, ты лучший! Тебе преподавать нужно или свою школу открыть! Подача, речь, материал, качество, все на высоте! Спасибо!
@kontorasb2754
@kontorasb2754 3 года назад
как всегда все круто!!! не мог бы протестировать gulp-svg-sprite именно на и mac , linux совсем не хочет работать.......
@zh3l3zyaka
@zh3l3zyaka 3 года назад
помню момент появления галпа 4.0.0 - он заметно поудобнее стал после последних тогда 3.x.x версий. джентльменский набор тех лет был таким: fs-extra path gulp gulp-install gulp-rename gulp-sourcemaps gulp-typescript del
@rara901
@rara901 2 года назад
Благодарю
@user-xw8ur4sc6t
@user-xw8ur4sc6t 2 года назад
Владилен, извините, мне по ходу в работе в галпе нужно, чтобы он один и тот же файл брал 2 раза подряд т.е. я ему явно указываю это в gulp.src. Например: return gulp.src([ '/fail.html', '/fail.html', '/fail.html', ]) И потом уже concate, min, dist и тд) Но у галпа стоит защита от этого и каждый файл указанный в правилах src он берет только 1 раз. Я пробовал использовать glob, но то ли я дурак, то ли glob тоже не хочет этого делать. Хотя у него даже есть специальный параметр 'nounique' - который убирает защиту от неуникальный файлов Не решали ли вы такую проблему? Или может быть знаете как ее решить? Или может хотите снять видео по этому решению?))
@Jorjeee
@Jorjeee 3 года назад
Thank you for video
@vitaly-
@vitaly- 4 года назад
Есть ли такой пакет для gulp что бы убирал лишние стили из @media? Здравствуйте, знает ли кто и есть ли вообще такой пакет для gulp, что бы он убирал не нужные css свойства в media, то есть например есть body со свойствами и там есть ширина, высота, position и background, в медиа запросе он тоже есть только с измененным background и вот мне нужен такой пакет который будет удалять из media одинаковые свойства которые уже до этого были прописаны, я перепробовал уже кучу пакетов, но ни один не делал то что нужно мне: csscomb, csgo, postcss, clean-css, uncss.
@yuriraskin8493
@yuriraskin8493 4 года назад
The best!
@user-lz5di9sb1l
@user-lz5di9sb1l 2 года назад
Подскажи как сделать, чтобы browser-sync не запускал браузер автоматически?
@Filin0wl
@Filin0wl 3 года назад
Все круто. Почти все получилось, только вот при сохранении файла less, перезагружается страница, но нет изменений, а при изменении html файла, перезагружается страница и видны изменения. Делал под себя и установил вместо sass less. Видны изменения после ввода команды gulp build снова
@vitalb7907
@vitalb7907 2 года назад
расскажи как ты сделал подсветку синтаксиса как у тебя?
@user-bx7ly2th3b
@user-bx7ly2th3b 4 года назад
gulp html "gulp" не является внутренней или внешней командой, исполняемой программой или пакетным файлом. помогло: npm install -g gulp-cli после этого gulp html сработало
@smartpeople4329
@smartpeople4329 4 года назад
естесно, нужно сначала gulp глобально установить, после локально в рабочей директории. Не очень понятно почему автор не сказал об этом, урок то вроде для новичков))
@user-bx7ly2th3b
@user-bx7ly2th3b 4 года назад
@@smartpeople4329 вот именно)) я то новичек и у меня туча времени ушла, чтобы понять в чем проблема
@MenuMoscow
@MenuMoscow 2 года назад
на маке sudo npm тогда все заработает
@zizzxiii2714
@zizzxiii2714 3 года назад
Блин. Почему у меня всегда ошибка выходит. Cannot find module 'webp-converter/cwebp', ничего не работает, постоянно это ошибка выходит.
@user-mb9tg6yc4k
@user-mb9tg6yc4k 4 года назад
Откуда gulp знает порядок сборки sass файлов? Например, есть файлы, которые я переопределяю и мне важно, чтобы они были подключены раньше.
@inzoddex8312
@inzoddex8312 3 года назад
Сборщик идет сверху вниз по кастомному файлу, в каком порядке напишешь, в таком и будет подключать
@kairat_ala
@kairat_ala Год назад
библиотека del тоже изменилось, чтобы решить проблему, просто установил версию предыдущую.
@user-ne2kt8lb7g
@user-ne2kt8lb7g Год назад
А можно ещё добавить вебп изображение?
@nagibbator4449
@nagibbator4449 3 года назад
очень помог
@user-vx2dy7oh2x
@user-vx2dy7oh2x Год назад
Ты лучший
@horikeisukke_7949
@horikeisukke_7949 3 месяца назад
У меня при вводе команды gulp html выходит исключение в файле gulpfile... и я не понимаю почему.. gulp установлен глобально, все делала по видео, node и npm тоже есть... помогите кто знает
@arefev
@arefev 5 лет назад
Возможно сделать serve в оперативной памяти? Что бы постоянно не перезаписывать файлы в папке dist.
@VladilenMinin
@VladilenMinin 5 лет назад
Так работает webpack С галпом точно не уверен
@arefev
@arefev 5 лет назад
@@VladilenMinin наверное этот плагин как раз для этого github.com/turtlemay/gulp-mem
@danielkhachaturian
@danielkhachaturian 3 года назад
Кто-нибудь подскажет, зачем ** если можно и одну * ??
@Kot_off
@Kot_off 3 года назад
На сколько актуальна данная сборка в 2k20 ?) Есть ли смысл в gulp добавлять watch scss, если в vs code присутствует Watch sass?
@inzoddex8312
@inzoddex8312 3 года назад
Все актуально. Ты конечно можешь запустить в терминале vs code препроцессор sass, и даже в pug в другом терминале, все будет выполнятся синхронно, но проблема в том, что в таком режиме ты можешь следить только за одним файлом sass и одним pug, если же ты используешь BEM нотацию и разделяешь файлы на модули, то нужен gulp, что бы он следил за изменениями сразу во всех файлах
@AnatoliySharov
@AnatoliySharov 3 года назад
@@inzoddex8312 Если я правильно понял, то автор коммента говорит про Live Sass Compiler, который отображается кнопкой с названием Watch Sass в VS Code в нижней панели. Данный плагин следит не за одним файлом + ещё позволяет добавлять префиксы. Очень удобно, когда нужно быстро начать работу с sass(scss).
@AnatoliySharov
@AnatoliySharov 3 года назад
@@inzoddex8312 актуально, но если ты хочешь больше автоматизации: сжимать изображения, копировать файлы, конвертировать шрифты, то лучше замутить себе один раз сборку и расслабиться.
@nikolayfutdeveloper4386
@nikolayfutdeveloper4386 Год назад
я написал const del = require('del') но я так понял сейчас нужно писать import { deleteAsync } from 'del'; но всеравно ошибка, можете помочь?
@FoxMitia
@FoxMitia Год назад
Мне помогло просто поставить более старую версию, npm i del@6.1.1
@inzoddex8312
@inzoddex8312 3 года назад
Параметр в watch { ignoreInitial: false } заменить последовательный запуск scss,html в модуле serve
@MenuMoscow
@MenuMoscow 2 года назад
зачем?
@inzoddex8312
@inzoddex8312 2 года назад
@@MenuMoscow прошел год, уже не помню
@natura3143
@natura3143 2 года назад
У меня ошибка имя gulp не распознано как имя командира ... Помогите пожалуйста Вот полностью ошибка : gulp : Имя "gulp" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + gulp styles + ~~~~ + CategoryInfo : ObjectNotFound: (gulp:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@user-lq7nt4bh8e
@user-lq7nt4bh8e Год назад
Получилось ли решить проблему?
@andreynasuto9734
@andreynasuto9734 2 года назад
попробовал поставить сборку из архива и выдает триллион ошибок в консоли когда вбиваю npm i , подскажите нубу, что делать?)
@Abdul-hy4cy
@Abdul-hy4cy 2 года назад
как тебе можем подсказать, если ты даже свои ошибки не скинул? гугли ошибки, читай и думай
@ivanoliinyk8404
@ivanoliinyk8404 2 года назад
10 из 10
@arucrsov4495
@arucrsov4495 3 года назад
Не понял ведь шаблонизаторы тоже умеют инклюдить
@SlavikPro1998
@SlavikPro1998 2 года назад
cmd - command (windows) create new file : *nul> name.(*)* альтернатива touch
@Irina_Kamenskih
@Irina_Kamenskih 2 года назад
что значит *?
@SlavikPro1998
@SlavikPro1998 2 года назад
@@Irina_Kamenskih все файлы (*.* все файлы и все расшрения) * просто все файлы
@horikeisukke_7949
@horikeisukke_7949 3 месяца назад
мне помогло echo text > name.ext
@threestepsforward5843
@threestepsforward5843 3 года назад
#thumbup
@olegonkos
@olegonkos 3 года назад
кто-нибудь скажите - Чтоб всей этой красотой пользоваться нужно локальный сервер создать, да?
@biLLie_wiLLie
@biLLie_wiLLie 2 года назад
Не надо
@Alex-wg8tb
@Alex-wg8tb Год назад
Видео частично уже не актуально. Много изминений и не рабочих моментов.
@user-ge2qk4cm1j
@user-ge2qk4cm1j 3 года назад
+
@evloev4821
@evloev4821 3 года назад
Сделать сразу ? Хммм Или сначала прописать всякой всячины, а потом сказать что это уже нам не нужно ? Хыхы так и сделаю А ещё буду понтоваться кодами чтобы люди путались, ато что я им бесплатно снимаю же P.S мысли автора...
@talivel118
@talivel118 2 года назад
Not bead:)
@Sergey_Klimov
@Sergey_Klimov Год назад
Ну и просто не видит константу del
@gorobart
@gorobart 2 года назад
Ну это уже не в какие рамки не лезет. К моему глубочайшему сожалению я вынужден поставить дизлайк . Это против моей воли , но я не могу допустить что бы и дальше новички оступались на этом видео и теряли путь.
@Mr.manpasserby
@Mr.manpasserby Год назад
почему?
@bender01
@bender01 Год назад
ВОПРОС - а нахера вся эта ебала, если можно просто руками сделать .css и .php страницы с икнлюдями header.php и footer.php? возможно это просто образовательное видео, но на практике зачем это?
@user-qf4vy2eu3i
@user-qf4vy2eu3i 8 месяцев назад
@user-sv1ze9gk3b
@user-sv1ze9gk3b 3 года назад
Спасибо
@MILAYA_02
@MILAYA_02 3 года назад
Спасибо
@muhammadabdulloev3600
@muhammadabdulloev3600 Год назад
Спасибо
Далее
TypeScript - Быстрый Курс за 70 минут
1:08:00
Для тебя живу, для тебя пою😘
00:10
Just try to use a cool gadget 😍
00:33
Просмотров 7 млн
Webpack. Базовая сборка проекта
1:19:12
GULP больше НЕ нужен! (Laravel Mix)
18:49