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

@kost9kost

3 жыл бұрын

Почему не используешь scss, sass вложенность? намного удобней писать же

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

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

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

@pepelsbey

4 жыл бұрын

Ой, думал только я на на Галпе сижу :)

@IIIu6ko

4 жыл бұрын

@@pepelsbey Нет, не только :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@pepelsbey

4 жыл бұрын

Читаю Твиттер, тут нечего добавить. В основном, в англоязычном аккаунте полезное twitter.com/pepelsbey_/following

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

Спасибо 😊

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

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

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

@xaaser2006

4 жыл бұрын

Это называется webpack-stream

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

@pepelsbey

4 жыл бұрын

Обязательно про экшены расскажу, сам от них прусь страшно. А пока можно посмотреть на то, что я на них написал для «Веб-стандартов» github.com/web-standards-ru/web-standards.ru/tree/master/.github/workflows

@VladyslavZubko69

4 жыл бұрын

@@pepelsbey та я итак уже все "потырил", кроме деплоя. Обожаю вообще ходить по репозиториям крутых людей, и что-то одалживать ;) У кого-то экшен крутой, у кого-то правило для линтера, и все вот это)

Спасибо

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

@pepelsbey

4 жыл бұрын

Я их просто не смотрю :) И конечно соболезную вам, если там всё действительно так плохо.

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

@pepelsbey

2 жыл бұрын

К счастью, не бывает лучших сборщиков. Но бывают лучшие сборщики для вашей задачи. Vite хороший, но не лучший :)

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

@pepelsbey

4 жыл бұрын

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

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

@pepelsbey

4 жыл бұрын

Хоп-трюк требует очень сильной концентрации. Это придёт с годами. А пока придётся руками (

👍👍👍

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

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

@pepelsbey

3 жыл бұрын

Спасибо за идею, будет повод - запишу :)

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

@pepelsbey

4 жыл бұрын

Я чуть ниже уже ответил, но скопирую :) Не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.

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.

@pepelsbey

4 жыл бұрын

Я не люблю сжимать картинки при сборке, мне жалко гонять без толку процессор при CI/CD и подогревать и без того горячую планету. Я их готовлю либо отдельно, либо отдельной задачей при деплое - если нужно нарезать варианты для из оригинала.

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

@pepelsbey

3 жыл бұрын

Про синтаксис я с вами, в принципе, согласен. Но в случае галп-файла, особенно простого, он уже выглядит достаточно декларативно и тебе становится важнее его лаконичность, чем принципиальное понимание где там функция, а где что. Или другими словами: чем чище и компактнее, тем проще читать. А если у вас развесистый код где-то ещё, то там можно писать иначе.

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

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

@pepelsbey

3 жыл бұрын

Если я правильно помню, вам это уже не нужно было с 12-й версии - ES-модули там впервые начали появляться. Но в 14-й вот уж точно.

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

@pepelsbey

4 жыл бұрын

Мне голые src и dest кажутся какой-то слишком уж магией, лучше писать явно gulp.src и gulp.dest. Плюс { src, dest } пока не работает в ESM-синтаксисе с Gulp.

@Battlehater

4 жыл бұрын

​@@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!

@Battlehater

4 жыл бұрын

Можно и без -D / -save-dev, просто я разделяю модули на те, которые используются для сборки и те, которые становятся частью подключаемых библиотек.

@Battlehater

4 жыл бұрын

убрать type="module" - не очевидная штука, потому что node.js требует ее для esm, но, вероятно, gulp + esm(модуль) используют свой подход и он не работает с нативными модулями.

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

@pepelsbey

4 жыл бұрын

А в Node.js сработает?

@eahaeybsdbsyhs

4 жыл бұрын

@@pepelsbey сработает, но дело в том, что динамический импорт - это асинхронная операция. Таски придётся сделать асихронными функциями.

@igorshadrin4636

4 жыл бұрын

​@@pepelsbey судя по документации должен, но только если сторонний модуль ESM. Свежей ноды под рукой сейчас нету, попозже только смогу проверить. nodejs.org/api/esm.html#esm_import_expressions

@igorshadrin4636

4 жыл бұрын

@@pepelsbey ​ проверил, прекрасно работает в любом контексте с любыми модулями. Вот код: github.com/Vilvarin/dynamic-import-test Таски действительно должны быть асинхронными, как заметил liaFcipe, но это не большая проблема, gulp прекрасно с ними работает. Так что для следующего видео можно разобрать и такой кейс =)

@modusvivaldi7701

4 жыл бұрын

@@eahaeybsdbsyhs Если не ошибаюсь, таски Gulp'а всегда асинхронные. Хэндлер таска должен возвращать Promise/Stream/Process, или же запускать callback, который передаётся аргументом: (done) => { /* do something */; done(); }. В этих случаях при запуске такса Gulp успешно оборачивает хэндлер в нодовский stream и всё работает как положено. Иначе таски тупо не знают, когда заканчиваться.

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

@pepelsbey

4 жыл бұрын

Да, но нужно сделать async функции, полистайте комментарии под этим видео, есть несколько вариантов.

@Staxa2012Chanell

4 жыл бұрын

Vadim Makeev круто, спасибо! Не посмотрел их сначала) Спасибо за выпуск! Хороший пример рефакторинга.

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

@pepelsbey

2 жыл бұрын

Просто пакеты или их зависимости могут долго не обновляться и в дереве появляется какая-то зависимость, где нашли уязвимость. В 90% случаев это не проблема для обычной локальной сборки, так что можно это игнорировать. Почитайте у Дэна Абрамова об этом overreacted.io/npm-audit-broken-by-design/

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

@pepelsbey

3 жыл бұрын

github.com/fword-dev/f-word.dev/blob/master/gulpfile.js#L28

@antonmikaskin1892

3 жыл бұрын

@@pepelsbey Спасибо! Заодно узнал, что можно ссылаться на строки GitHub)

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

@pepelsbey

3 жыл бұрын

Про VS Code хочется подобнее рассказать, да. Спасибо за идею :)

@Kumigy

3 жыл бұрын

@@pepelsbey будем с нетерпением ждать!) а то у нас тут команда поделилась на любителей шторма и на вскодеров. У каждой ИДЕ свои преимущества и свои недостатки, было бы интересно послушать ваше мнение, ну и лайфхаки по работе с той или иной ИДЕ.

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

@pepelsbey

3 жыл бұрын

В сообществе разработчиков большая инерция к использованию ES-модулей. Лично я стараюсь брать этот подход по умолчанию всегда, как максимально future-proof. И только если что-то принцпиально не работает - брать попроще.

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

@pepelsbey

4 жыл бұрын

У меня вариация на дот-файлы Матиаса Байненса github.com/mathiasbynens/dotfiles

@cubucul

4 жыл бұрын

@@pepelsbey Спасибо!

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

@pepelsbey

4 жыл бұрын

У меня вариация на дот-файлы Матиаса Байненса github.com/mathiasbynens/dotfiles

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

@pepelsbey

4 жыл бұрын

Мне кажется, что Browserify уже отстал и для модулей я бы скорее сегодня использовал Rollup.

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

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

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

@pepelsbey

4 жыл бұрын

GitHub Theme marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

@IvanIsayev

4 жыл бұрын

@@pepelsbey спасибо!

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

@pepelsbey

4 жыл бұрын

Думаю, можно поискать в документации к вашему редактору. Например, VS Code code.visualstudio.com/docs/editor/codebasics

@dmitrykuzmin6524

4 жыл бұрын

@@pepelsbey Благодарю за подсказку, посмотрю в документации.

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

@pepelsbey

3 жыл бұрын

Я вот так делаю, например github.com/fword-dev/f-word.dev/blob/master/gulpfile.js#L29

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

@pepelsbey

4 жыл бұрын

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

я пробовал всё делать на VSC, но там все плагины вразнобой и не связаны, а webpack больше заточен для SPA, по моему. Так что для проекта, где вёрстка является главной, gulp остаётся удобным инструментом. Спасибо, конечно полезно. Что нравится, уже говорил, но всё же - всегда объясняешь по ходу нюансы( "npx потому что..." ) - признак знатока. Кстати, насчёт const мне понравилось это видео, довольно познавательно...kzread.info/dash/bejne/iK1-uJlwiqmygqw.html

@Disorrder

3 жыл бұрын

Ужасное видео, крайне не рекомендую прислушиваться к этому мнению. Лучше посмотри на codestyle таких компаний, как google, airbnb, они есть в открытом доступе, на них равняются многие компании, в т.ч. и российские. И это всё не без причин сделано. Доводы типа "мне лень набирать const, потому что у него 5 букв и они разбросаны по всей клавиатуре" - ну это бред полнейший. Программист бОльшую часть времени именно читает код, смотрит в монитор и думает над задачей, а не пишет. Поэтому потратить лишнюю секунду на 2 лишние буквы - ну это такая мелочь, букв что ли не хватает? Экономия на спичках, что называется. А потом другие участники команды читают это и ищут, а где же эта переменная изменяется дальше по коду? Нигде? А что хотел сказать автор, написав let?

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

@pepelsbey

4 жыл бұрын

Ускоряю в видео, чтобы не тратить ваше время :)

@KonstantinKochh

4 жыл бұрын

Vadim Makeev фух. Успокоил

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

@pepelsbey

4 жыл бұрын

У меня импорт частей { src, dest } заработал только в CJS-нотации, а в ESM не завелось, поэтому рассказывать не стал - пока не разберусь. Что касается gulp.src, то сборку хотелось скорее обновить, чем переписать принципиально без gulp-пакетов, на что намекает документация. Но это как-нибудь в следующий раз. Сегодня отказались от gulp.task и это уже маленькая победа :)

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

@pepelsbey

4 жыл бұрын

Что для вас минимализм, то для меня нечитаемый код, так что извините :)

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

@pepelsbey

4 жыл бұрын

GitHub Theme marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

@Vladyslav_Sliusar

4 жыл бұрын

@@pepelsbey спасибо, уже нашёл под прошлыми видео. У вас ещё и font-weight в vs code 600 стоит?

@pepelsbey

4 жыл бұрын

У меня font-weight дефолтный, может просто macOS по-другому шрифты рендерит?

@Vladyslav_Sliusar

4 жыл бұрын

@@pepelsbey может быть

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

@pepelsbey

4 жыл бұрын

Да потому, что у меня глобально уже есть npm и npx, поэтому все таски я группирую в npm-скрипты (npm run task), а если нужно постестировать отдельные, то npx gulp task.

[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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

4 жыл бұрын

Я однострочники со стрелочными функциями и без скобок боюсь немного, а так бы с радостью.

@iamo0

4 жыл бұрын

Да, согласен, с непривычки выглядит как мешанина.

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

@pepelsbey

4 жыл бұрын

Да, они пишут в документации, хочу попробовать большие файлы так разделить. Хотя выглядит немного хаком.

@astrotrain

4 жыл бұрын

@@pepelsbey почему хаком? Когда конфиг большой удобно разделять, чтобы не писать портянку.

@pepelsbey

4 жыл бұрын

Я имею в виду сам механизм импорта index.js из папки, названной как файл. Странно это всё :)

@astrotrain

4 жыл бұрын

@@pepelsbey ну в юниксе каталог это файл, импортам js тоже особо без разницы, указан файл или директория с файлом index.js, я думаю этим воспользовались и удобно сделали. Галп видимо и импортирует путь к конфигу просто по имени. А так бы был gulpfile.js и каталог для модулей, либо модули с галпфайлом бы валялись в корне проекта вместе с другими системными файлами. ((:

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

@pepelsbey

4 жыл бұрын

Иногда нет никаких обоснований, просто пришёлся под руку один пакет вместо другого. Но если будут какие-то серьёзные мысли на эту тему - расскажу.

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

@pepelsbey

4 жыл бұрын

Пробовал: сложно пишется, плохо читается, у многих пакетов нет нормальных CLI и в итоге проще написать на Gulp. Но для простых вещей пишу скрипты конечно.

@alehmakaranka1089

4 жыл бұрын

@@pepelsbey ну там своих проблем хватает, это да. Как например - кросс-платформенные скрипты. Но когда сборщик не слишком сложный, как в вашем примере - postcss, минификация html да копипаста ассетов - можно в принципе обойтись и без абстракции в лице gulp. Но у gulp тоже есть свои недостатки. Как например - плагины-обертки над другими пакетами. В каком-то роде абстракции над нужными пакетами + зависимость от этих абстракции. Тот самый случай, когда пакет обновился с breaking changes, а плагин который его использует - нет, или хуже того, вообще не поддерживается автором вовсе. И приходится немного погрузится в принципы работы со Stream и строчить свой плагин для gulp. Хотя вместо gulp могут появится излишние cli (если в пакете этого по умолчания не было), и обмен может показаться в худшую сторону... Но, по мои наблюдениям, проект, в котором овер-много scss, быстрее компилируется из коробки, чем через gulp. Плюс там еще и watcher есть со своими плюшками Чем меня вебдев и забавляет, так это то, что одну и ту же задачу можно сделать разными способами. Это прикольно, я думаю

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

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

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

@pepelsbey

4 жыл бұрын

Вы правы, это пока только скромные шаги в сторону полной модульной красоты, но кое-что уже работает. Мне пока даже нравится, что нужно писать gulp перед вызовом функций - иначе src, dest, series слишком похожи на магию ниоткуда.

@user-xg5fp3xe8u

4 жыл бұрын

import gulp from 'gulp' const {src, dest, series} = gulp

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

@pepelsbey

4 жыл бұрын

Пока нет, но вы расскажите, что смущает вас

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

@pepelsbey

3 жыл бұрын

Нет, спасибо, мне нормально.

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

@pepelsbey

4 жыл бұрын

Скорее привычка, чтобы можно было удобно добраться из npm-скриптов до нужных задач и скомбинировать нужную. Я не ставлю gulp глобально, использую npm-скрипты.

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

@pepelsbey

4 жыл бұрын

Пока не очень понятно, что это значит