Свежий взгляд на Gulp: функции и ES-модули 

01:15 Устройство сборки 04:06 Обновление до ES 10:20 Обновление до ESM 16:04 Выводы

Это было затишье перед бурей? Я слишком долго ждал, и тут годнота за годнотой

Вадим, как всегда полезно! Спасибо!

Эх, как же круто, что ты снова вернулся на ютюб ☺️ каждый ролик - лучший!

Как раз недавно задумывался над обновлением gulp. Спасибо за очередное доступное и полезное видео)

Шикарное видео! Очень полезное! Чётко, ёмко и понятно. Огромное спасибо!

Актуально, понятно и просто. Наконец-то дошли руки обновить свою сборку и это видео было очень кстати!

Как всегда, чётко и по делу. Вадим, благодарю тебя за то что ты делаешь.

Спасибо! Мега полезная информация!

Спасибо! Про gulp.task не знал. Надо переписать!:) Я еще по файлам разбил таски, потому что стало очень сложно ориентироваться в коде gulpfile`а, а когда все такси по файликам в отдельной папочке - красиво и удобно (для меня)!

Вадим всегда классно объясняет. Спасибо, мы в команде используем gulp )

Склейка на 8:16 - это как я на матане, когда отвлеклась на секунду, а на доске уже километровая функция)) Спасибо, мега-актуально для меня сейчас, пойду свой галпфайл переписывать))

спасибо) будет чем заняться на досуге))

Спасибо большое за ультра-полезности!

Вадим спасибо! очень полезно!

прикольная футболка :)

Огромное, блин, спасибо за видос. А то я с этими модулями чуть не рехнулся)

Спасибо большое за видео! Очень нравится ваш формат, особенно то, как много мелочей вы пытаетесь учесть. Возникает вопрос: как работать с первоисточником? Мне как разработчику, который только более-менее встал на ноги было бы так же интересно узнать о том, как вы следите за развитием веба. Иными словами, какими инфо-каналами пользуетесь, как фильтруете информацию, и в какой момент понимаете, когда пора лезть в доку и изучать новые фишки. Сейчас очень много информации самого разного качества и сложно в ней не заплутать, а требования как к разработчику постоянно растут и уже не подходит поверхностный серфинг темы(благо, на этот канал это не распростроняется) и все чаще нужно знать, как та или иная технология работает "под капотом".

Я, когда прокрастинирую, занимаюсь вот таким причесыванием кода. А сегодня еще и смотрел как другие это делают, прогресс :)

Спасибо, отличное видео

Галп для сборки и само то. Вебпак лучше всего для JS (ESM, React, Vue и т.д.). Если мы делаем обычный лендос, то html, css, картинки собирать галпом удобно, а js уже можно и на вебпаке собрать. И кстати вебпак тоже к галпу прикрутить можно, галп будет запускать вебпак для сборки.

Очень полезное видео, решил настроить себе галп для пэт-прожектов и зарылся на пару вечеров, на официальном сайте доки по современному синтаксису практически нет, какие то крупицы лежат на гите галпа.

Как всегда круто

Лайкос за футболку, она прекрасна как и всегда)

Спасибо 😊

gulp агонь! Бро!))

Супер! У меня был всего день на изучение gulp. А тут ещё сразу в современном синтаксисе. Макеев - One Love!

Спасибо Вадим. Менял таски на функции почти сразу как 4й галп появился. Было бы интересно посмотреть сборки, которые вы используете для верстки.

Спасибо

Блин Вадим, ты супер, спасибо за видео Побежал обновлять свой галп-конфиг ехехеххе Пс. ты в видно, о том как настраивать сервер, сказал что покажешь как прикрутить гит-экшены на деплой. Пару дней назад, я использовал их в первый раз, что бы прикрутить линтеры всякие. Какой же каеф(Правда попрощался с Тревисом). Очень жду видос о том как сделать крутой деплой ❤️

Спасибо, хорошее видео. Пользуюсь Gulp как основным инструментом для сборки проектов (не SPA), и по большей части как task runner. Т.к. тасков много, храню их в отдельных файлах как модули. Недавно переписал таск сборки JS на webpack (до этого был на Rollup, т.к. были проблемы с импортом модулей, manualChunk и с обновой node-resolve), при этом не меняя ничего отстального. В этом и прелесть Gulp. Есть ли смысл переписавать таски на export (не считая просто рекомендацию разрабов)? P.S. Бандлеры и компиляторы меняются, а Gulp остается=)

Dynamic Imports подерживаются в 13 ноде, так что не обязательно выносить наверх плагины postcss, но придется использовать await так как import() вернет промис и я не уверен, что postcss это поддерживает. await import() должен работать.

Спасибо огромное за урок. Я тут 3 дня бился над ошибками современных gulp файлов (скачивал с github). А еще можно сделать урок как разбивать большой gulpfile на модули, функция которые лежат отдельными файлами и подключать по необходимости. Каждый task в своем файле. У меня к примеру gulpfile уже на 350 строк, становится сложно ориентироваться и изменять, дополнять функционал. Уроков понятный нет на youtube. Думаю будет многим полезно. А у Вас получается отличное объяснение.

Вадим, спасибо за классное видео! Скажите, у Вас в сборке нет ни одного плагина для оптимизации изображений. Это потому что Вы графику руками любите оптимизировать, или просто плагинов нет хороших?

Обновление Gulp с 3-й на 4-ю версию очень много радости принесло когда имел неосторожность обновить старый проект(когда еще не использовали методы series и parallel). Сейчас стараюсь все держать в актуальном состоянии. К стати, я деструктуринг для методов галпа использую: const { src, dest, parallel, series } = gulp

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.

Вадим на голову выше всех обучающих каналов вместе взятых. Мне кажется нужна новая рубрика - Вадик проверяет на ошибки блогеров учителей Верстки. Там много чего можно найти. Он просто с солидарности молчит

👍👍👍

vite лучший сборщик

Интересное видео. А по манипуляциям с вс-кодом видео не планируется? Я про хоткеи интересные и плагины, ну и вообще почему именно он, а не шторм? Интересно было бы посмотреть сборку лайфхаков именно по рабочему процессу.

Для меня всё-таки удобнее, привычнее и красивее 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). В общем, хз. Ни разу не приходилось строить длинные цепочки из тасков.

На 13:19 можно делать динамический импорт в ES модулях, для этого используется функция import('/path/to/module'), которая возвращает промис. Современные браузеры даже поддерживают эту фичу. Подробнее можно почитать на mdn.

Мне понравился новый синтаксис, когда он появился переписал на него свою сборку, в которой вебпак был только для js. github.com/astrotrain55/gulp4webpack/tree/master/src/gulpfile.js Правда недавно всё равно переехал полностью на вебпак, но за галпом планирую следить.

Спасибо за видео. Скажите, где я ошибся? Я повторял все по вашему видео, но когда я говорю "Хоп", у меня почему-то не копируются все остальные таски :(

Спасибо за видео! А как сделать такое лаконичное приветствие в терминале? Не поделишься конфигом?

Нативные модули под нодой это хорошо, но есть еще детские болезни у популярных библиотек. Поэтому пользуйтесь с осторожностью. Например, ожидаемый синтаксис импорта не работает github.com/ramda/ramda/issues/3019

Спасибо за видео, Вадим! Подскажи, пожалуйста, есть ли хороший способ в 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 // Чтобы он собрал это в нужном порядке в один файл? Заранее спасибо!

Вадим, а расскажи что за клевая тема у тебя в vscode? И иконочки 🙏🏻

И еще хотелось бы уточнить, я настраивал по доке галпа и там для того чтобы все современные фичи работали используется @babel/core, @babel/register и @babel/preset-env. С точки зрения более элегантного решения без установки доп. пакетов твоё решение безусловно выглядит лаконичнее и если я правильно уловил идею то с релизом 14 ноды можно в принципе отказываться от того варианта который использовал я?

Привет Вадим! Подскажи пожалуйста, если знаешь: почему после установки некоторых пакетов, появляются уязвимости уровня high? И как с ними бороться? Обычный npm audit fix - - force не помогает Просто не понятно, от чего вообще это зависит? Создаю новый проект. Устанавливаю только Gulp. И сразу появляется 22 уязвимости.

я пробовал всё делать на VSC, но там все плагины вразнобой и не связаны, а webpack больше заточен для SPA, по моему. Так что для проекта, где вёрстка является главной, gulp остаётся удобным инструментом. Спасибо, конечно полезно. Что нравится, уже говорил, но всё же - всегда объясняешь по ходу нюансы( "npx потому что..." ) - признак знатока. Кстати, насчёт const мне понравилось это видео, довольно познавательно...ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VyJV77ZFLRI.html

А можешь скинуть конфиг для баш терминала? Что бы показывало директорию текущую?

На официальном сайте gulp говориться, что они отказалась от старого api gulp.src и т.д. Также рекомендуют вместо import gulp from "gulp" подключать только то что нужно import { src, dest, parallel, series } from "gulp"

Вадим здравствуйте, пореккомендуйте ресурс где можно научиться пользоваться многострочным курсором, выделением слов как на видео и прочему, заранее благодарю!

При просмотре данного видео возникло пару вопросов, надеюсь вы на них ответите, потому как сам я разобраться не смог) После команды npm i, появляются предупреждения о уязвимости, одна уязвимость высокая и две низкие. Сталкиваюсь с такой же ситуацией, при установки своей сборки. Если прописать команду npm audit fix, то уязвимости не исправляются. Как быть в этой ситуации? как править уязвимости в ручную? позволительно ли игнорировать данные предупреждения? Заранее спасибо вам, у вас отличные видео, очень интересно объясняете.

13:12 will dynamic imports work for postcss plugins imports inside CSS task?

А сейчас, в середине 2021, метод ESM актуальный? Стоит ли его применять, а то больше не встречал такого синтаксиса в галпфайлах.

Ребят, а посоветуйте человеку который галп видел только в виде "ага, здесь надо в консоль записать gulp scss или gulp js и соберется то что нужно", какой сейчас есть хороший и правильный вариант подтянуть в него компиляцию ES7?

Вадим, ты же ускоряешь моменты, когда делается npm install и подобное? Почему оно так быстро происходит??) Неужели пора ноутбук менять :(

В свое время пользовался Browserify для сборки JavaScript модулей и подключал к Gulp. Сейчас это уже неактуально? Понимаю, что у Webpack гораздо больше фич, но есть ли что-то другое для небольших проектов? Может у кого-то есть опыт и может что-то порекомендовать?

Ещё для минимализма можно избавится от return и фигурных скобок

[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

Ещё можно сделать каталог, а не файл с названием gulpfile.js, и конфиг разделить на таски импортами или реквайрами по файлам, с главным файлом конфига index.js конечно же

И ещё такой вопрос, почему именно terser, есть же бабелевский пресет minify? Или это не то? Я запутался. Может обзор пакетов для этого самого галпа устроить, с обоснованием какие пакеты зачем нужны и почему выбраны именно они? И про бабель, постцсс плагины, браузерлист, etc.

Что за тема для VS code?

Почему gulp не установлен глобально?

Секунда JS-занудства, даже скорее JS ОКРа. В стрелках можно не писать return, если не используются фигурные скобки и функция состоит из одного выражения, которое что-то возвращает. const html = () => gulp.src(... и дальше по тексту

А еще вместо gulp можно попробовать в npm-scripts

С переходом на импорты что-то получаем, а что-то теряем. Например так уже не получится import { src, dest, series } from 'gulp' Так как gulp не поддерживает именованный экспорт, и по всему файлу нужно постоянно дублировать слово gulp.что-то А при require деструктуризация отлично работает - const {src, dest, series} = require('gulp'); Получается, что поддержку всех фишек современного js можно получить только если и node.js свежий > 13 и все пакеты написаны по-современному, а у gulp и всей его экосистемы с этим большие проблемы. Но будем надеяться, что разработчики не запустят gulp и обновят его код.

Заговор разработчиков, программистов - not ie 11 )))

Это все ужасно. Нет, ваши видео замечательные. А вот эти современные конфиги и зоопарк сборщиков/разборщиков - это ужасно. Раньше было лучше)

'html', 'styles' - вас не смущает такое именование для функций?

Срочно убрать все точки с запятыми!))

а зачем экспортить все таски? достаточно ж только необходимые серии сделать публичными, а остальные пусть так и висят приватными, не?

сборка не работая на гите. выдаешь ошибку