Спасибо большое за видео! Очень нравится ваш формат, особенно то, как много мелочей вы пытаетесь учесть. Возникает вопрос: как работать с первоисточником? Мне как разработчику, который только более-менее встал на ноги было бы так же интересно узнать о том, как вы следите за развитием веба. Иными словами, какими инфо-каналами пользуетесь, как фильтруете информацию, и в какой момент понимаете, когда пора лезть в доку и изучать новые фишки. Сейчас очень много информации самого разного качества и сложно в ней не заплутать, а требования как к разработчику постоянно растут и уже не подходит поверхностный серфинг темы(благо, на этот канал это не распростроняется) и все чаще нужно знать, как та или иная технология работает "под капотом".
Для меня всё-таки удобнее, привычнее и красивее function declaration, так код выглядит более... декларативно. Т.е. export function html() { . . . } И сразу явно видно, что это не константа экспортируется, не какой-то какой-то кусок данных, а функция. Кстати, в style guide от гугла рекомендуется именно такой синтаксис. От airbnb наверняка тоже, надо посмотреть. С галпом работал с самых первых версий, как только он появился. Даже синтаксический сахар для него писал, когда ещё не было этих gulp.series. До этого был самопальный сборщик на ноде, который работал гораздо примитивнее, так что я очень обрадовался, что наконец-то кто-то сделал нормальную сборку. Как же я ошибался... У галпа было много проблем, приходилось допиливать его под свои нужды. И вот webpack реально спас мне много времени. А особенно потом webpack-dev-server с его hot reload. Работает значительно быстрее, гораздо удобнее в конфиге. Хотя в первые дни тоже было отрицание этого странного синтаксиса, какие-то лоадеры, чёёё. Но потом как понял и как вошёл во вкус. Ну, и назначение у гульпа и вебпака разные. Первое - это task runner, а второе - module bundler. Т.е. гораздо удобнее (особенно для SPA) сборку переложить на вебпак, а в гульпе оставить все остальные задачи. Хотя за последние 4 года я ни разу не использовал gulp, абсолютно всё покрывает вебпак. Даже сборку Electron, если надо. Но я и не делаю многостраничные сайты. По сути, gulp просто выполняет подряд функции длуг за другом. Это было удобно, когда ещё не было async/await синтаксиса в ноде. А сейчас можно обойтись и без таск раннера, просто скрипт написать, к чему лишние навороты? Особенно, если ты и так экспортишь функции. Gulp полезен только своими хелперами типа gulp.src (то же, что и glob), gulp.watch (который использует chokidar под капотом), gulp.dist (довольно просто заменить fs.copyFileSync). В общем, хз. Ни разу не приходилось строить длинные цепочки из тасков.
Про синтаксис я с вами, в принципе, согласен. Но в случае галп-файла, особенно простого, он уже выглядит достаточно декларативно и тебе становится важнее его лаконичность, чем принципиальное понимание где там функция, а где что. Или другими словами: чем чище и компактнее, тем проще читать. А если у вас развесистый код где-то ещё, то там можно писать иначе.
Dynamic Imports подерживаются в 13 ноде, так что не обязательно выносить наверх плагины postcss, но придется использовать await так как import() вернет промис и я не уверен, что postcss это поддерживает. await import() должен работать.
Thanks for your tutorial 👌 I use gulp-imagemin (minify) and gulp.spritesmith (sprites) instead of just copy images. Maybe it can be useful for someone.
Я не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.
В сообществе разработчиков большая инерция к использованию ES-модулей. Лично я стараюсь брать этот подход по умолчанию всегда, как максимально future-proof. И только если что-то принцпиально не работает - брать попроще.
Спасибо за видео, Вадим! Подскажи, пожалуйста, есть ли хороший способ в Gulp собирать JS файлы? Допустим // main.js export frist from 'path_to_frist.js' // some code // // first.js export second from 'path_to_second.js' // some code // // second.js // some code // Чтобы он собрал это в нужном порядке в один файл? Заранее спасибо!
В свое время пользовался Browserify для сборки JavaScript модулей и подключал к Gulp. Сейчас это уже неактуально? Понимаю, что у Webpack гораздо больше фич, но есть ли что-то другое для небольших проектов? Может у кого-то есть опыт и может что-то порекомендовать?
Ещё можно сделать каталог, а не файл с названием gulpfile.js, и конфиг разделить на таски импортами или реквайрами по файлам, с главным файлом конфига index.js конечно же
@@pepelsbey ну в юниксе каталог это файл, импортам js тоже особо без разницы, указан файл или директория с файлом index.js, я думаю этим воспользовались и удобно сделали. Галп видимо и импортирует путь к конфигу просто по имени. А так бы был gulpfile.js и каталог для модулей, либо модули с галпфайлом бы валялись в корне проекта вместе с другими системными файлами. ((:
Спасибо за видео. Скажите, где я ошибся? Я повторял все по вашему видео, но когда я говорю "Хоп", у меня почему-то не копируются все остальные таски :(
Галп для сборки и само то. Вебпак лучше всего для JS (ESM, React, Vue и т.д.). Если мы делаем обычный лендос, то html, css, картинки собирать галпом удобно, а js уже можно и на вебпаке собрать. И кстати вебпак тоже к галпу прикрутить можно, галп будет запускать вебпак для сборки.
Склейка на 8:16 - это как я на матане, когда отвлеклась на секунду, а на доске уже километровая функция)) Спасибо, мега-актуально для меня сейчас, пойду свой галпфайл переписывать))
[22:52:33] 'styles' errored after 922 ms [22:52:33] Error: File not found with singular glob: /Users/melikovabdurahmon/Desktop/secondgulp/src/sty les/index.css (if this was purposeful, use `allowEmpty` option) at Glob. (/Users/melikovabdurahmon/Desktop/secondgulp/node_modules/glob-stream/readable.j s:84:17) Уважаеми Автор: Почему у мне таких ошибок на old version gulpfile.js
Привет Вадим! Подскажи пожалуйста, если знаешь: почему после установки некоторых пакетов, появляются уязвимости уровня high? И как с ними бороться? Обычный npm audit fix - - force не помогает Просто не понятно, от чего вообще это зависит? Создаю новый проект. Устанавливаю только Gulp. И сразу появляется 22 уязвимости.
Просто пакеты или их зависимости могут долго не обновляться и в дереве появляется какая-то зависимость, где нашли уязвимость. В 90% случаев это не проблема для обычной локальной сборки, так что можно это игнорировать. Почитайте у Дэна Абрамова об этом overreacted.io/npm-audit-broken-by-design/
Спасибо, хорошее видео. Пользуюсь Gulp как основным инструментом для сборки проектов (не SPA), и по большей части как task runner. Т.к. тасков много, храню их в отдельных файлах как модули. Недавно переписал таск сборки JS на webpack (до этого был на Rollup, т.к. были проблемы с импортом модулей, manualChunk и с обновой node-resolve), при этом не меняя ничего отстального. В этом и прелесть Gulp. Есть ли смысл переписавать таски на export (не считая просто рекомендацию разрабов)? P.S. Бандлеры и компиляторы меняются, а Gulp остается=)
я пробовал всё делать на VSC, но там все плагины вразнобой и не связаны, а webpack больше заточен для SPA, по моему. Так что для проекта, где вёрстка является главной, gulp остаётся удобным инструментом. Спасибо, конечно полезно. Что нравится, уже говорил, но всё же - всегда объясняешь по ходу нюансы( "npx потому что..." ) - признак знатока. Кстати, насчёт const мне понравилось это видео, довольно познавательно...ua-cam.com/video/VyJV77ZFLRI/v-deo.html
Ужасное видео, крайне не рекомендую прислушиваться к этому мнению. Лучше посмотри на codestyle таких компаний, как google, airbnb, они есть в открытом доступе, на них равняются многие компании, в т.ч. и российские. И это всё не без причин сделано. Доводы типа "мне лень набирать const, потому что у него 5 букв и они разбросаны по всей клавиатуре" - ну это бред полнейший. Программист бОльшую часть времени именно читает код, смотрит в монитор и думает над задачей, а не пишет. Поэтому потратить лишнюю секунду на 2 лишние буквы - ну это такая мелочь, букв что ли не хватает? Экономия на спичках, что называется. А потом другие участники команды читают это и ищут, а где же эта переменная изменяется дальше по коду? Нигде? А что хотел сказать автор, написав let?
Секунда JS-занудства, даже скорее JS ОКРа. В стрелках можно не писать return, если не используются фигурные скобки и функция состоит из одного выражения, которое что-то возвращает. const html = () => gulp.src(... и дальше по тексту
И ещё такой вопрос, почему именно terser, есть же бабелевский пресет minify? Или это не то? Я запутался. Может обзор пакетов для этого самого галпа устроить, с обоснованием какие пакеты зачем нужны и почему выбраны именно они? И про бабель, постцсс плагины, браузерлист, etc.
Вадим, спасибо за классное видео! Скажите, у Вас в сборке нет ни одного плагина для оптимизации изображений. Это потому что Вы графику руками любите оптимизировать, или просто плагинов нет хороших?
Я чуть ниже уже ответил, но скопирую :) Не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.
Блин Вадим, ты супер, спасибо за видео Побежал обновлять свой галп-конфиг ехехеххе Пс. ты в видно, о том как настраивать сервер, сказал что покажешь как прикрутить гит-экшены на деплой. Пару дней назад, я использовал их в первый раз, что бы прикрутить линтеры всякие. Какой же каеф(Правда попрощался с Тревисом). Очень жду видос о том как сделать крутой деплой ❤️
Обязательно про экшены расскажу, сам от них прусь страшно. А пока можно посмотреть на то, что я на них написал для «Веб-стандартов» github.com/web-standards-ru/web-standards.ru/tree/master/.github/workflows
@@pepelsbey та я итак уже все "потырил", кроме деплоя. Обожаю вообще ходить по репозиториям крутых людей, и что-то одалживать ;) У кого-то экшен крутой, у кого-то правило для линтера, и все вот это)
Нативные модули под нодой это хорошо, но есть еще детские болезни у популярных библиотек. Поэтому пользуйтесь с осторожностью. Например, ожидаемый синтаксис импорта не работает github.com/ramda/ramda/issues/3019
Очень полезное видео, решил настроить себе галп для пэт-прожектов и зарылся на пару вечеров, на официальном сайте доки по современному синтаксису практически нет, какие то крупицы лежат на гите галпа.
Мне понравился новый синтаксис, когда он появился переписал на него свою сборку, в которой вебпак был только для js. github.com/astrotrain55/gulp4webpack/tree/master/src/gulpfile.js Правда недавно всё равно переехал полностью на вебпак, но за галпом планирую следить.
Спасибо! Про gulp.task не знал. Надо переписать!:) Я еще по файлам разбил таски, потому что стало очень сложно ориентироваться в коде gulpfile`а, а когда все такси по файликам в отдельной папочке - красиво и удобно (для меня)!
При просмотре данного видео возникло пару вопросов, надеюсь вы на них ответите, потому как сам я разобраться не смог) После команды npm i, появляются предупреждения о уязвимости, одна уязвимость высокая и две низкие. Сталкиваюсь с такой же ситуацией, при установки своей сборки. Если прописать команду npm audit fix, то уязвимости не исправляются. Как быть в этой ситуации? как править уязвимости в ручную? позволительно ли игнорировать данные предупреждения? Заранее спасибо вам, у вас отличные видео, очень интересно объясняете.
Предупреждения об уязвимости - это ежедневная реальность платформы Node.js. Не забывайте обновлять саму Node.js и пакеты и всё будет в порядке. Обычно этот аудит важен не для локальной сборки, а для ситуаций, когда вы запускаете код на серверах.
И еще хотелось бы уточнить, я настраивал по доке галпа и там для того чтобы все современные фичи работали используется @babel/core, @babel/register и @babel/preset-env. С точки зрения более элегантного решения без установки доп. пакетов твоё решение безусловно выглядит лаконичнее и если я правильно уловил идею то с релизом 14 ноды можно в принципе отказываться от того варианта который использовал я?
Ребят, а посоветуйте человеку который галп видел только в виде "ага, здесь надо в консоль записать gulp scss или gulp js и соберется то что нужно", какой сейчас есть хороший и правильный вариант подтянуть в него компиляцию ES7?
Спасибо огромное за урок. Я тут 3 дня бился над ошибками современных gulp файлов (скачивал с github). А еще можно сделать урок как разбивать большой gulpfile на модули, функция которые лежат отдельными файлами и подключать по необходимости. Каждый task в своем файле. У меня к примеру gulpfile уже на 350 строк, становится сложно ориентироваться и изменять, дополнять функционал. Уроков понятный нет на youtube. Думаю будет многим полезно. А у Вас получается отличное объяснение.
Вадим на голову выше всех обучающих каналов вместе взятых. Мне кажется нужна новая рубрика - Вадик проверяет на ошибки блогеров учителей Верстки. Там много чего можно найти. Он просто с солидарности молчит
На официальном сайте gulp говориться, что они отказалась от старого api gulp.src и т.д. Также рекомендуют вместо import gulp from "gulp" подключать только то что нужно import { src, dest, parallel, series } from "gulp"
У меня импорт частей { src, dest } заработал только в CJS-нотации, а в ESM не завелось, поэтому рассказывать не стал - пока не разберусь. Что касается gulp.src, то сборку хотелось скорее обновить, чем переписать принципиально без gulp-пакетов, на что намекает документация. Но это как-нибудь в следующий раз. Сегодня отказались от gulp.task и это уже маленькая победа :)
Вадим здравствуйте, пореккомендуйте ресурс где можно научиться пользоваться многострочным курсором, выделением слов как на видео и прочему, заранее благодарю!
Интересное видео. А по манипуляциям с вс-кодом видео не планируется? Я про хоткеи интересные и плагины, ну и вообще почему именно он, а не шторм? Интересно было бы посмотреть сборку лайфхаков именно по рабочему процессу.
@@pepelsbey будем с нетерпением ждать!) а то у нас тут команда поделилась на любителей шторма и на вскодеров. У каждой ИДЕ свои преимущества и свои недостатки, было бы интересно послушать ваше мнение, ну и лайфхаки по работе с той или иной ИДЕ.
Да потому, что у меня глобально уже есть npm и npx, поэтому все таски я группирую в npm-скрипты (npm run task), а если нужно постестировать отдельные, то npx gulp task.
Пробовал: сложно пишется, плохо читается, у многих пакетов нет нормальных CLI и в итоге проще написать на Gulp. Но для простых вещей пишу скрипты конечно.
@@pepelsbey ну там своих проблем хватает, это да. Как например - кросс-платформенные скрипты. Но когда сборщик не слишком сложный, как в вашем примере - postcss, минификация html да копипаста ассетов - можно в принципе обойтись и без абстракции в лице gulp. Но у gulp тоже есть свои недостатки. Как например - плагины-обертки над другими пакетами. В каком-то роде абстракции над нужными пакетами + зависимость от этих абстракции. Тот самый случай, когда пакет обновился с breaking changes, а плагин который его использует - нет, или хуже того, вообще не поддерживается автором вовсе. И приходится немного погрузится в принципы работы со Stream и строчить свой плагин для gulp. Хотя вместо gulp могут появится излишние cli (если в пакете этого по умолчания не было), и обмен может показаться в худшую сторону... Но, по мои наблюдениям, проект, в котором овер-много scss, быстрее компилируется из коробки, чем через gulp. Плюс там еще и watcher есть со своими плюшками Чем меня вебдев и забавляет, так это то, что одну и ту же задачу можно сделать разными способами. Это прикольно, я думаю
Обновление Gulp с 3-й на 4-ю версию очень много радости принесло когда имел неосторожность обновить старый проект(когда еще не использовали методы series и parallel). Сейчас стараюсь все держать в актуальном состоянии. К стати, я деструктуринг для методов галпа использую: const { src, dest, parallel, series } = gulp
Мне голые src и dest кажутся какой-то слишком уж магией, лучше писать явно gulp.src и gulp.dest. Плюс { src, dest } пока не работает в ESM-синтаксисе с Gulp.
@@pepelsbey А вот мне понятно, что значит src и dest(и другие, ведь видно что я импортирую) =). Но ответ решил написать потому что на Node.js 14 возможна полноценная работа с модулями(в т.ч. и { src, dest }). Возможно, и более ранние версии работают с таким подходом. Я выбрал эту версию просто потому что она последняя на данный момент, снова откатывать и проверять на старых немножко лениво. По правде говоря, gulp и node.js содержат всю необходимую документацию. Могу на гитхаб загрузить, но уровень владения английским такой, что мне будет очень неловко комментировать что и как нужно сделать :) Но если коротко - убираем type="module" из package.json, меняем имя gulpfile.js на gulpfile.esm.js, ставим esm модуль(npm i esm -D). Done!
убрать type="module" - не очевидная штука, потому что node.js требует ее для esm, но, вероятно, gulp + esm(модуль) используют свой подход и он не работает с нативными модулями.
На 13:19 можно делать динамический импорт в ES модулях, для этого используется функция import('/path/to/module'), которая возвращает промис. Современные браузеры даже поддерживают эту фичу. Подробнее можно почитать на mdn.
@@pepelsbey судя по документации должен, но только если сторонний модуль ESM. Свежей ноды под рукой сейчас нету, попозже только смогу проверить. nodejs.org/api/esm.html#esm_import_expressions
@@pepelsbey проверил, прекрасно работает в любом контексте с любыми модулями. Вот код: github.com/Vilvarin/dynamic-import-test Таски действительно должны быть асинхронными, как заметил liaFcipe, но это не большая проблема, gulp прекрасно с ними работает. Так что для следующего видео можно разобрать и такой кейс =)
@@0xFD1C41FA Если не ошибаюсь, таски Gulp'а всегда асинхронные. Хэндлер таска должен возвращать Promise/Stream/Process, или же запускать callback, который передаётся аргументом: (done) => { /* do something */; done(); }. В этих случаях при запуске такса Gulp успешно оборачивает хэндлер в нодовский stream и всё работает как положено. Иначе таски тупо не знают, когда заканчиваться.
С переходом на импорты что-то получаем, а что-то теряем. Например так уже не получится import { src, dest, series } from 'gulp' Так как gulp не поддерживает именованный экспорт, и по всему файлу нужно постоянно дублировать слово gulp.что-то А при require деструктуризация отлично работает - const {src, dest, series} = require('gulp'); Получается, что поддержку всех фишек современного js можно получить только если и node.js свежий > 13 и все пакеты написаны по-современному, а у gulp и всей его экосистемы с этим большие проблемы. Но будем надеяться, что разработчики не запустят gulp и обновят его код.
Вы правы, это пока только скромные шаги в сторону полной модульной красоты, но кое-что уже работает. Мне пока даже нравится, что нужно писать gulp перед вызовом функций - иначе src, dest, series слишком похожи на магию ниоткуда.
Скорее привычка, чтобы можно было удобно добраться из npm-скриптов до нужных задач и скомбинировать нужную. Я не ставлю gulp глобально, использую npm-скрипты.
01:15 Устройство сборки
04:06 Обновление до ES
10:20 Обновление до ESM
16:04 Выводы
Почему не используешь scss, sass вложенность? намного удобней писать же
Это было затишье перед бурей? Я слишком долго ждал, и тут годнота за годнотой
Как всегда, чётко и по делу. Вадим, благодарю тебя за то что ты делаешь.
Я, когда прокрастинирую, занимаюсь вот таким причесыванием кода. А сегодня еще и смотрел как другие это делают, прогресс :)
Шикарное видео! Очень полезное! Чётко, ёмко и понятно. Огромное спасибо!
Спасибо большое за видео! Очень нравится ваш формат, особенно то, как много мелочей вы пытаетесь учесть. Возникает вопрос: как работать с первоисточником? Мне как разработчику, который только более-менее встал на ноги было бы так же интересно узнать о том, как вы следите за развитием веба. Иными словами, какими инфо-каналами пользуетесь, как фильтруете информацию, и в какой момент понимаете, когда пора лезть в доку и изучать новые фишки. Сейчас очень много информации самого разного качества и сложно в ней не заплутать, а требования как к разработчику постоянно растут и уже не подходит поверхностный серфинг темы(благо, на этот канал это не распростроняется) и все чаще нужно знать, как та или иная технология работает "под капотом".
Читаю Твиттер, тут нечего добавить. В основном, в англоязычном аккаунте полезное twitter.com/pepelsbey_/following
Для меня всё-таки удобнее, привычнее и красивее function declaration, так код выглядит более... декларативно. Т.е.
export function html() { . . . }
И сразу явно видно, что это не константа экспортируется, не какой-то какой-то кусок данных, а функция.
Кстати, в style guide от гугла рекомендуется именно такой синтаксис. От airbnb наверняка тоже, надо посмотреть.
С галпом работал с самых первых версий, как только он появился. Даже синтаксический сахар для него писал, когда ещё не было этих gulp.series.
До этого был самопальный сборщик на ноде, который работал гораздо примитивнее, так что я очень обрадовался, что наконец-то кто-то сделал нормальную сборку. Как же я ошибался... У галпа было много проблем, приходилось допиливать его под свои нужды.
И вот webpack реально спас мне много времени. А особенно потом webpack-dev-server с его hot reload. Работает значительно быстрее, гораздо удобнее в конфиге. Хотя в первые дни тоже было отрицание этого странного синтаксиса, какие-то лоадеры, чёёё. Но потом как понял и как вошёл во вкус.
Ну, и назначение у гульпа и вебпака разные. Первое - это task runner, а второе - module bundler. Т.е. гораздо удобнее (особенно для SPA) сборку переложить на вебпак, а в гульпе оставить все остальные задачи. Хотя за последние 4 года я ни разу не использовал gulp, абсолютно всё покрывает вебпак. Даже сборку Electron, если надо. Но я и не делаю многостраничные сайты.
По сути, gulp просто выполняет подряд функции длуг за другом. Это было удобно, когда ещё не было async/await синтаксиса в ноде. А сейчас можно обойтись и без таск раннера, просто скрипт написать, к чему лишние навороты? Особенно, если ты и так экспортишь функции. Gulp полезен только своими хелперами типа gulp.src (то же, что и glob), gulp.watch (который использует chokidar под капотом), gulp.dist (довольно просто заменить fs.copyFileSync). В общем, хз. Ни разу не приходилось строить длинные цепочки из тасков.
Про синтаксис я с вами, в принципе, согласен. Но в случае галп-файла, особенно простого, он уже выглядит достаточно декларативно и тебе становится важнее его лаконичность, чем принципиальное понимание где там функция, а где что. Или другими словами: чем чище и компактнее, тем проще читать. А если у вас развесистый код где-то ещё, то там можно писать иначе.
Спасибо 😊
Dynamic Imports подерживаются в 13 ноде, так что не обязательно выносить наверх плагины postcss, но придется использовать await так как import() вернет промис и я не уверен, что postcss это поддерживает. await import() должен работать.
Thanks for your tutorial 👌
I use gulp-imagemin (minify) and gulp.spritesmith (sprites) instead of just copy images. Maybe it can be useful for someone.
Я не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.
А сейчас, в середине 2021, метод ESM актуальный? Стоит ли его применять, а то больше не встречал такого синтаксиса в галпфайлах.
В сообществе разработчиков большая инерция к использованию ES-модулей. Лично я стараюсь брать этот подход по умолчанию всегда, как максимально future-proof. И только если что-то принцпиально не работает - брать попроще.
Спасибо за видео, Вадим!
Подскажи, пожалуйста, есть ли хороший способ в Gulp собирать JS файлы?
Допустим
// main.js
export frist from 'path_to_frist.js'
// some code //
// first.js
export second from 'path_to_second.js'
// some code //
// second.js
// some code //
Чтобы он собрал это в нужном порядке в один файл? Заранее спасибо!
github.com/fword-dev/f-word.dev/blob/master/gulpfile.js#L28
@@pepelsbey Спасибо! Заодно узнал, что можно ссылаться на строки GitHub)
В свое время пользовался Browserify для сборки JavaScript модулей и подключал к Gulp. Сейчас это уже неактуально? Понимаю, что у Webpack гораздо больше фич, но есть ли что-то другое для небольших проектов? Может у кого-то есть опыт и может что-то порекомендовать?
Мне кажется, что Browserify уже отстал и для модулей я бы скорее сегодня использовал Rollup.
Ещё можно сделать каталог, а не файл с названием gulpfile.js, и конфиг разделить на таски импортами или реквайрами по файлам, с главным файлом конфига index.js конечно же
Да, они пишут в документации, хочу попробовать большие файлы так разделить. Хотя выглядит немного хаком.
@@pepelsbey почему хаком? Когда конфиг большой удобно разделять, чтобы не писать портянку.
Я имею в виду сам механизм импорта index.js из папки, названной как файл. Странно это всё :)
@@pepelsbey ну в юниксе каталог это файл, импортам js тоже особо без разницы, указан файл или директория с файлом index.js, я думаю этим воспользовались и удобно сделали. Галп видимо и импортирует путь к конфигу просто по имени. А так бы был gulpfile.js и каталог для модулей, либо модули с галпфайлом бы валялись в корне проекта вместе с другими системными файлами. ((:
Спасибо за видео. Скажите, где я ошибся? Я повторял все по вашему видео, но когда я говорю "Хоп", у меня почему-то не копируются все остальные таски :(
Хоп-трюк требует очень сильной концентрации. Это придёт с годами. А пока придётся руками (
Эх, как же круто, что ты снова вернулся на ютюб ☺️ каждый ролик - лучший!
Галп для сборки и само то. Вебпак лучше всего для JS (ESM, React, Vue и т.д.). Если мы делаем обычный лендос, то html, css, картинки собирать галпом удобно, а js уже можно и на вебпаке собрать. И кстати вебпак тоже к галпу прикрутить можно, галп будет запускать вебпак для сборки.
Это называется webpack-stream
прикольная футболка :)
Склейка на 8:16 - это как я на матане, когда отвлеклась на секунду, а на доске уже километровая функция))
Спасибо, мега-актуально для меня сейчас, пойду свой галпфайл переписывать))
Ой, думал только я на на Галпе сижу :)
@@pepelsbey Нет, не только :)
[22:52:33] 'styles' errored after 922 ms
[22:52:33] Error: File not found with singular glob: /Users/melikovabdurahmon/Desktop/secondgulp/src/sty
les/index.css (if this was purposeful, use `allowEmpty` option)
at Glob. (/Users/melikovabdurahmon/Desktop/secondgulp/node_modules/glob-stream/readable.j
s:84:17)
Уважаеми Автор: Почему у мне таких ошибок на old version gulpfile.js
Если прочитать ошибку, то её суть в ненайденом или пустом файле. Но кроме этого может быть много причин, вам придётся разобраться самостоятельно.
Привет Вадим! Подскажи пожалуйста, если знаешь: почему после установки некоторых пакетов, появляются уязвимости уровня high? И как с ними бороться? Обычный npm audit fix - - force не помогает
Просто не понятно, от чего вообще это зависит? Создаю новый проект. Устанавливаю только Gulp. И сразу появляется 22 уязвимости.
Просто пакеты или их зависимости могут долго не обновляться и в дереве появляется какая-то зависимость, где нашли уязвимость. В 90% случаев это не проблема для обычной локальной сборки, так что можно это игнорировать. Почитайте у Дэна Абрамова об этом overreacted.io/npm-audit-broken-by-design/
Спасибо, хорошее видео.
Пользуюсь Gulp как основным инструментом для сборки проектов (не SPA), и по большей части как task runner.
Т.к. тасков много, храню их в отдельных файлах как модули.
Недавно переписал таск сборки JS на webpack (до этого был на Rollup, т.к. были проблемы с импортом модулей, manualChunk и с обновой node-resolve), при этом не меняя ничего отстального. В этом и прелесть Gulp.
Есть ли смысл переписавать таски на export (не считая просто рекомендацию разрабов)?
P.S. Бандлеры и компиляторы меняются, а Gulp остается=)
я пробовал всё делать на VSC, но там все плагины вразнобой и не связаны, а webpack больше заточен для SPA, по моему. Так что для проекта, где вёрстка является главной, gulp остаётся удобным инструментом. Спасибо, конечно полезно. Что нравится, уже говорил, но всё же - всегда объясняешь по ходу нюансы( "npx потому что..." ) - признак знатока.
Кстати, насчёт const мне понравилось это видео, довольно познавательно...ua-cam.com/video/VyJV77ZFLRI/v-deo.html
Ужасное видео, крайне не рекомендую прислушиваться к этому мнению. Лучше посмотри на codestyle таких компаний, как google, airbnb, они есть в открытом доступе, на них равняются многие компании, в т.ч. и российские. И это всё не без причин сделано. Доводы типа "мне лень набирать const, потому что у него 5 букв и они разбросаны по всей клавиатуре" - ну это бред полнейший. Программист бОльшую часть времени именно читает код, смотрит в монитор и думает над задачей, а не пишет. Поэтому потратить лишнюю секунду на 2 лишние буквы - ну это такая мелочь, букв что ли не хватает? Экономия на спичках, что называется. А потом другие участники команды читают это и ищут, а где же эта переменная изменяется дальше по коду? Нигде? А что хотел сказать автор, написав let?
Актуально, понятно и просто. Наконец-то дошли руки обновить свою сборку и это видео было очень кстати!
Секунда JS-занудства, даже скорее JS ОКРа. В стрелках можно не писать return, если не используются фигурные скобки и функция состоит из одного выражения, которое что-то возвращает.
const html = () => gulp.src(... и дальше по тексту
Я однострочники со стрелочными функциями и без скобок боюсь немного, а так бы с радостью.
Да, согласен, с непривычки выглядит как мешанина.
И ещё такой вопрос, почему именно terser, есть же бабелевский пресет minify? Или это не то? Я запутался. Может обзор пакетов для этого самого галпа устроить, с обоснованием какие пакеты зачем нужны и почему выбраны именно они? И про бабель, постцсс плагины, браузерлист, etc.
Иногда нет никаких обоснований, просто пришёлся под руку один пакет вместо другого. Но если будут какие-то серьёзные мысли на эту тему - расскажу.
vite лучший сборщик
К счастью, не бывает лучших сборщиков. Но бывают лучшие сборщики для вашей задачи. Vite хороший, но не лучший :)
Вадим, спасибо за классное видео! Скажите, у Вас в сборке нет ни одного плагина для оптимизации изображений. Это потому что Вы графику руками любите оптимизировать, или просто плагинов нет хороших?
Я чуть ниже уже ответил, но скопирую :)
Не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.
Спасибо Вадим. Менял таски на функции почти сразу как 4й галп появился. Было бы интересно посмотреть сборки, которые вы используете для верстки.
В описании ссылка на код, который в видео - что-то такое и использую последнее время.
Вадим, как всегда полезно! Спасибо!
Блин Вадим, ты супер, спасибо за видео
Побежал обновлять свой галп-конфиг ехехеххе
Пс. ты в видно, о том как настраивать сервер, сказал что покажешь как прикрутить гит-экшены на деплой. Пару дней назад, я использовал их в первый раз, что бы прикрутить линтеры всякие. Какой же каеф(Правда попрощался с Тревисом). Очень жду видос о том как сделать крутой деплой ❤️
Обязательно про экшены расскажу, сам от них прусь страшно. А пока можно посмотреть на то, что я на них написал для «Веб-стандартов» github.com/web-standards-ru/web-standards.ru/tree/master/.github/workflows
@@pepelsbey та я итак уже все "потырил", кроме деплоя. Обожаю вообще ходить по репозиториям крутых людей, и что-то одалживать ;)
У кого-то экшен крутой, у кого-то правило для линтера, и все вот это)
Это все ужасно. Нет, ваши видео замечательные. А вот эти современные конфиги и зоопарк сборщиков/разборщиков - это ужасно. Раньше было лучше)
Нативные модули под нодой это хорошо, но есть еще детские болезни у популярных библиотек. Поэтому пользуйтесь с осторожностью.
Например, ожидаемый синтаксис импорта не работает
github.com/ramda/ramda/issues/3019
Очень полезное видео, решил настроить себе галп для пэт-прожектов и зарылся на пару вечеров, на официальном сайте доки по современному синтаксису практически нет, какие то крупицы лежат на гите галпа.
Супер! У меня был всего день на изучение gulp. А тут ещё сразу в современном синтаксисе. Макеев - One Love!
Огромное, блин, спасибо за видос. А то я с этими модулями чуть не рехнулся)
Мне понравился новый синтаксис, когда он появился переписал на него свою сборку, в которой вебпак был только для js.
github.com/astrotrain55/gulp4webpack/tree/master/src/gulpfile.js
Правда недавно всё равно переехал полностью на вебпак, но за галпом планирую следить.
Заговор разработчиков, программистов - not ie 11 )))
Спасибо! Про gulp.task не знал. Надо переписать!:) Я еще по файлам разбил таски, потому что стало очень сложно ориентироваться в коде gulpfile`а, а когда все такси по файликам в отдельной папочке - красиво и удобно (для меня)!
Как раз недавно задумывался над обновлением gulp.
Спасибо за очередное доступное и полезное видео)
Вадим всегда классно объясняет. Спасибо, мы в команде используем gulp )
При просмотре данного видео возникло пару вопросов, надеюсь вы на них ответите, потому как сам я разобраться не смог) После команды npm i, появляются предупреждения о уязвимости, одна уязвимость высокая и две низкие. Сталкиваюсь с такой же ситуацией, при установки своей сборки. Если прописать команду npm audit fix, то уязвимости не исправляются. Как быть в этой ситуации? как править уязвимости в ручную? позволительно ли игнорировать данные предупреждения?
Заранее спасибо вам, у вас отличные видео, очень интересно объясняете.
Предупреждения об уязвимости - это ежедневная реальность платформы Node.js. Не забывайте обновлять саму Node.js и пакеты и всё будет в порядке. Обычно этот аудит важен не для локальной сборки, а для ситуаций, когда вы запускаете код на серверах.
И еще хотелось бы уточнить, я настраивал по доке галпа и там для того чтобы все современные фичи работали используется @babel/core, @babel/register и @babel/preset-env. С точки зрения более элегантного решения без установки доп. пакетов твоё решение безусловно выглядит лаконичнее и если я правильно уловил идею то с релизом 14 ноды можно в принципе отказываться от того варианта который использовал я?
Если я правильно помню, вам это уже не нужно было с 12-й версии - ES-модули там впервые начали появляться. Но в 14-й вот уж точно.
Ребят, а посоветуйте человеку который галп видел только в виде "ага, здесь надо в консоль записать gulp scss или gulp js и соберется то что нужно", какой сейчас есть хороший и правильный вариант подтянуть в него компиляцию ES7?
Я вот так делаю, например github.com/fword-dev/f-word.dev/blob/master/gulpfile.js#L29
Спасибо огромное за урок. Я тут 3 дня бился над ошибками современных gulp файлов (скачивал с github). А еще можно сделать урок как разбивать большой gulpfile на модули, функция которые лежат отдельными файлами и подключать по необходимости. Каждый task в своем файле. У меня к примеру gulpfile уже на 350 строк, становится сложно ориентироваться и изменять, дополнять функционал. Уроков понятный нет на youtube. Думаю будет многим полезно. А у Вас получается отличное объяснение.
Спасибо за идею, будет повод - запишу :)
Спасибо большое за ультра-полезности!
Вадим на голову выше всех обучающих каналов вместе взятых. Мне кажется нужна новая рубрика - Вадик проверяет на ошибки блогеров учителей Верстки. Там много чего можно найти. Он просто с солидарности молчит
Я их просто не смотрю :) И конечно соболезную вам, если там всё действительно так плохо.
На официальном сайте gulp говориться, что они отказалась от старого api gulp.src и т.д. Также рекомендуют вместо import gulp from "gulp" подключать только то что нужно import { src, dest, parallel, series } from "gulp"
У меня импорт частей { src, dest } заработал только в CJS-нотации, а в ESM не завелось, поэтому рассказывать не стал - пока не разберусь. Что касается gulp.src, то сборку хотелось скорее обновить, чем переписать принципиально без gulp-пакетов, на что намекает документация. Но это как-нибудь в следующий раз. Сегодня отказались от gulp.task и это уже маленькая победа :)
Ещё для минимализма можно избавится от return и фигурных скобок
Что для вас минимализм, то для меня нечитаемый код, так что извините :)
Спасибо! Мега полезная информация!
А можешь скинуть конфиг для баш терминала? Что бы показывало директорию текущую?
У меня вариация на дот-файлы Матиаса Байненса github.com/mathiasbynens/dotfiles
Вадим спасибо! очень полезно!
'html', 'styles' - вас не смущает такое именование для функций?
Пока нет, но вы расскажите, что смущает вас
Лайкос за футболку, она прекрасна как и всегда)
Как всегда круто
Что за тема для VS code?
GitHub Theme marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
@@pepelsbey спасибо, уже нашёл под прошлыми видео.
У вас ещё и font-weight в vs code 600 стоит?
У меня font-weight дефолтный, может просто macOS по-другому шрифты рендерит?
@@pepelsbey может быть
спасибо) будет чем заняться на досуге))
Вадим здравствуйте, пореккомендуйте ресурс где можно научиться пользоваться многострочным курсором, выделением слов как на видео и прочему, заранее благодарю!
Думаю, можно поискать в документации к вашему редактору. Например, VS Code code.visualstudio.com/docs/editor/codebasics
@@pepelsbey Благодарю за подсказку, посмотрю в документации.
Вадим, ты же ускоряешь моменты, когда делается npm install и подобное? Почему оно так быстро происходит??) Неужели пора ноутбук менять :(
Ускоряю в видео, чтобы не тратить ваше время :)
Vadim Makeev фух. Успокоил
Интересное видео. А по манипуляциям с вс-кодом видео не планируется? Я про хоткеи интересные и плагины, ну и вообще почему именно он, а не шторм? Интересно было бы посмотреть сборку лайфхаков именно по рабочему процессу.
Про VS Code хочется подобнее рассказать, да. Спасибо за идею :)
@@pepelsbey будем с нетерпением ждать!) а то у нас тут команда поделилась на любителей шторма и на вскодеров. У каждой ИДЕ свои преимущества и свои недостатки, было бы интересно послушать ваше мнение, ну и лайфхаки по работе с той или иной ИДЕ.
Почему gulp не установлен глобально?
Да потому, что у меня глобально уже есть npm и npx, поэтому все таски я группирую в npm-скрипты (npm run task), а если нужно постестировать отдельные, то npx gulp task.
Спасибо, отличное видео
13:12 will dynamic imports work for postcss plugins imports inside CSS task?
Да, но нужно сделать async функции, полистайте комментарии под этим видео, есть несколько вариантов.
Vadim Makeev круто, спасибо! Не посмотрел их сначала) Спасибо за выпуск! Хороший пример рефакторинга.
Спасибо за видео! А как сделать такое лаконичное приветствие в терминале? Не поделишься конфигом?
У меня вариация на дот-файлы Матиаса Байненса github.com/mathiasbynens/dotfiles
@@pepelsbey Спасибо!
gulp агонь! Бро!))
Вадим, а расскажи что за клевая тема у тебя в vscode? И иконочки 🙏🏻
GitHub Theme marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
@@pepelsbey спасибо!
А еще вместо gulp можно попробовать в npm-scripts
Пробовал: сложно пишется, плохо читается, у многих пакетов нет нормальных CLI и в итоге проще написать на Gulp. Но для простых вещей пишу скрипты конечно.
@@pepelsbey ну там своих проблем хватает, это да. Как например - кросс-платформенные скрипты. Но когда сборщик не слишком сложный, как в вашем примере - postcss, минификация html да копипаста ассетов - можно в принципе обойтись и без абстракции в лице gulp.
Но у gulp тоже есть свои недостатки. Как например - плагины-обертки над другими пакетами. В каком-то роде абстракции над нужными пакетами + зависимость от этих абстракции. Тот самый случай, когда пакет обновился с breaking changes, а плагин который его использует - нет, или хуже того, вообще не поддерживается автором вовсе. И приходится немного погрузится в принципы работы со Stream и строчить свой плагин для gulp.
Хотя вместо gulp могут появится излишние cli (если в пакете этого по умолчания не было), и обмен может показаться в худшую сторону...
Но, по мои наблюдениям, проект, в котором овер-много scss, быстрее компилируется из коробки, чем через gulp. Плюс там еще и watcher есть со своими плюшками
Чем меня вебдев и забавляет, так это то, что одну и ту же задачу можно сделать разными способами. Это прикольно, я думаю
Спасибо
Обновление Gulp с 3-й на 4-ю версию очень много радости принесло когда имел неосторожность обновить старый проект(когда еще не использовали методы series и parallel). Сейчас стараюсь все держать в актуальном состоянии. К стати, я деструктуринг для методов галпа использую: const { src, dest, parallel, series } = gulp
Мне голые src и dest кажутся какой-то слишком уж магией, лучше писать явно gulp.src и gulp.dest. Плюс { src, dest } пока не работает в ESM-синтаксисе с Gulp.
@@pepelsbey А вот мне понятно, что значит src и dest(и другие, ведь видно что я импортирую) =). Но ответ решил написать потому что на Node.js 14 возможна полноценная работа с модулями(в т.ч. и { src, dest }). Возможно, и более ранние версии работают с таким подходом. Я выбрал эту версию просто потому что она последняя на данный момент, снова откатывать и проверять на старых немножко лениво. По правде говоря, gulp и node.js содержат всю необходимую документацию. Могу на гитхаб загрузить, но уровень владения английским такой, что мне будет очень неловко комментировать что и как нужно сделать :)
Но если коротко - убираем type="module" из package.json, меняем имя gulpfile.js на gulpfile.esm.js, ставим esm модуль(npm i esm -D). Done!
Можно и без -D / -save-dev, просто я разделяю модули на те, которые используются для сборки и те, которые становятся частью подключаемых библиотек.
убрать type="module" - не очевидная штука, потому что node.js требует ее для esm, но, вероятно, gulp + esm(модуль) используют свой подход и он не работает с нативными модулями.
На 13:19 можно делать динамический импорт в ES модулях, для этого используется функция import('/path/to/module'), которая возвращает промис. Современные браузеры даже поддерживают эту фичу. Подробнее можно почитать на mdn.
А в Node.js сработает?
@@pepelsbey сработает, но дело в том, что динамический импорт - это асинхронная операция. Таски придётся сделать асихронными функциями.
@@pepelsbey судя по документации должен, но только если сторонний модуль ESM. Свежей ноды под рукой сейчас нету, попозже только смогу проверить.
nodejs.org/api/esm.html#esm_import_expressions
@@pepelsbey проверил, прекрасно работает в любом контексте с любыми модулями. Вот код: github.com/Vilvarin/dynamic-import-test
Таски действительно должны быть асинхронными, как заметил liaFcipe, но это не большая проблема, gulp прекрасно с ними работает. Так что для следующего видео можно разобрать и такой кейс =)
@@0xFD1C41FA Если не ошибаюсь, таски Gulp'а всегда асинхронные. Хэндлер таска должен возвращать Promise/Stream/Process, или же запускать callback, который передаётся аргументом: (done) => { /* do something */; done(); }. В этих случаях при запуске такса Gulp успешно оборачивает хэндлер в нодовский stream и всё работает как положено. Иначе таски тупо не знают, когда заканчиваться.
👍👍👍
С переходом на импорты что-то получаем, а что-то теряем.
Например так уже не получится import { src, dest, series } from 'gulp'
Так как gulp не поддерживает именованный экспорт, и по всему файлу нужно постоянно дублировать слово gulp.что-то
А при require деструктуризация отлично работает - const {src, dest, series} = require('gulp');
Получается, что поддержку всех фишек современного js можно получить только если и node.js свежий > 13 и все пакеты написаны по-современному, а у gulp и всей его экосистемы с этим большие проблемы. Но будем надеяться, что разработчики не запустят gulp и обновят его код.
Вы правы, это пока только скромные шаги в сторону полной модульной красоты, но кое-что уже работает. Мне пока даже нравится, что нужно писать gulp перед вызовом функций - иначе src, dest, series слишком похожи на магию ниоткуда.
import gulp from 'gulp'
const {src, dest, series} = gulp
Срочно убрать все точки с запятыми!))
Нет, спасибо, мне нормально.
а зачем экспортить все таски? достаточно ж только необходимые серии сделать публичными, а остальные пусть так и висят приватными, не?
Скорее привычка, чтобы можно было удобно добраться из npm-скриптов до нужных задач и скомбинировать нужную. Я не ставлю gulp глобально, использую npm-скрипты.
сборка не работая на гите. выдаешь ошибку
Пока не очень понятно, что это значит