Обновление сборки Gulp. Видеоинструкция
HTML-код
- Опубликовано: 30 сен 2024
- Привет! В этом видео расскажу об изменениях в своей сборке gulp и покажу, как лучше ей пользоваться.
github.com/max... - ссылка на сборку
• Gulp 4. Полное руковод... - ссылка на руководство по Gulp
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #верстка #gulp
сборка после обновления ошибку выдает, [ERR_REQUIRE_ESM]: require() of ES Module.
как минимум нужно npm install del@6.1.1 (откатить).
Привет. Если не трудно, ответь на такой вопрос: почему отказался от вебпака для сборки js ? чем он бекенду не угодил?
бэкендеру не очень удобно, когда у него огромный код вебпака пихается в бандл)
@@maxgraphпонял))) если это единственная причина, то мне искренне жаль, бекендера)))
@@charleksvikto Соглашусь с вами)) Сейчас бы из-за этого менять под бэк
Увы)
Спасибо. кэш не получилось настроить, ругался. Можно для html использовать gulp-rigger, поддержки его нет, но отлично работает и упрощает подключение файлов html до записи //= name.html.
В CSS не хватает gulp-group-css-media-queries. Он сам перемещает медиа запросы вниз, очень удобно писать их сразу для текущего класса
Зачет! Все понятно рассказано. Делал свою сборку по твоему первому видосу, изменил немного под себя. Красавчик! Продолжай дальше делать такие видео, у тебя хорошо получается
Спасибо)
Я тоже свои три копейки добавлю, если позволите, может кому пригодится......
Под Linux Mint Node нужна не старше 14 верси, иначе на работает, gulp-imagemin нужено поменять на 7.1.0 версии, добавить пакеты node-sass, sass. Переменная sass в gulpfile.js должна выглядеть таким образом: const sass = require('gulp-sass')(require('sass'));
Спасибо)
Максим а подскажите сразу после тэга body идет site-container со стилем overflow:"hidden", зачем делать такую обертку?
На всякий случай, мало ли что сломается
с меня лайк. А вы еще не писали какой-нибудь проект с помощью данной сборке?
Писал, последнее видео на канале)
ну эти правки скорее субъективные и зависят от того или тех, с чем или с кем работаешь. так что, эта обновлённая версия скорее для тех, кому пригодится. продолжаю следить за каналом
Так оно и есть)
Помогите пожалуйста.Не подключаются миксины.
Error: no mixin named flex-all-sb
on line 32 of src/scss/components/_footer.scss
from line 4 of src/scss/main.scss
>> @include flex-all-sb;
-----------------^
Привет, а почему для бэкенда не нужно использовать вебпак для js?))
Не очень читаемый код
@@maxgraph то есть нужно просто с помощью gulp-concat объединять файлы? И пожертвовать npm)) или типо каким-то gulp-rigger подключать отдельные файлы.
Hey, gulp and eslint & prettier, could you help these? Except no React.
Макс привет, у тебя сейчас в актуальной сборке в файле _functions.js из папки js написано, что
// Данный файл - лишь собрание подключений готовых компонентов.
// Рекомендуется создавать отдельный файл в папке components и подключать все там
Можно ли сразу создать все файлы в папке components, и подключить всё в файл _components.js, а потом раскомментировать нужные?
И всё ли в файле _functions.js это компоненты?
Привет) Да, это все компоненты сборки, про это есть в документации.
Лучше подключать только то что нужно в проекте
А почему burger.js не в components, а в папке functions?)@@maxgraph
Привет! Скажи пожалуйста а как реализовать добавление css файлов без создания vendor.scss. Чтоб в linkах они шли отдельными min.css.
Добрый день, допишите что на версии node js 16.1 не устанавливается gulp-sass": "^4.1.0
На версии 14 все установилось без проблем
Спасибо! Крутая сборка! Доступно, понятно! В общем круть! Лайк!
Как вообще жить без import в js. Я бы все-таки срекстил с вебпаком, ну я и скрестил
Легко)
А бекендер как бы должен уметь с таким js взаимодействовать. Ну вот я сначала писал в галпе верстку, когда на laravel садили, то я там быстренько mix.webpack набросал, там очень легко настраивается. Ну правда сначала бекендер тупо взял коговый js файл и css файл, потом я разобрался что к чему и добавил свои sass и js файлы
Сложно когда код обфусцирован))
А вы не рассматриваете структуру файлов (только блоков) по БЭМ (nested)? Удобно, если проект большой. Можно генерировать файлы блока/элемента/модификатора, вот пример:
gist.githubusercontent.com/leon9208/3506c5b7dc2886a99fe4137bbd97bdae/raw/a18b0e29200e7cb0cfbedafe28ba651a8483a8c6/NPM%2520-%2520autogenerate%2520files
не рассматривал)
У меня сборка не запускается. Пишет вот это:
Error: Cannot find module 'gulp-image'
Если отключить плагин 'gulp-image' и const images, убрать слежение watch и вообще все что связано с img, то сборка работает.
Почему так?
Не установился модуль, видимо.
Привет ! Удивительно ноль дизлайков . Круто , так держать !
Я новичок и задолбался разбираться с этим галпом. Только на твоем канале все сдвинулось с мертвой точки . Хотя и здесь столкнулся с проблемой. Буду очень благодарен , если поможешь решить проблему.
Stylelint: Unexpected named color "red" (color-named)
Привет, посмотреть надо)
Привет. Проблема произошла с подключением шрифта. Шрифты нужно забрасывать в ttf разрешении или woff2? и оно самое будет конвертировать?
Woff2 сразу)
Сборка огонь! Спасибо!!)
Единственный момент.. как быть с php если пока рано в этом разбираться?
Сборка не для этого)
хм. если нет вебпака и вебпака-стрим, то будет ли так, что сложные npm-плагины (такой как swiper) теперь будут собираться без проблем (к в случае с zonex-магазином)? Или же функция scripts() будет просто переносить из node-modules их компоненты? И так и не понял, почему выпили из сборки замысловатый алгоритм со шрифтами.
Потому что слишком замысловатый
Из нпм автоматом ничего не подцепится
Лично я проверяю, если внутри _fonts что-то написано, то я его не обновляю, так не приходится каждый раз менять название шрифта в _fonts. Правда, если нужно будет добавить потом новый шрифт придется почистить _fonts, или же можно сделать gulp.task, но мне в принципе и так норм)
Думаю проще почистить, но зависит от того сколько там и сколько добавляется 1+4 или 4+1. Я для себя сделал спрайты и шрифты отдельными тасками, т.к. они нужны не всегда
а есть ли возможность менять цвет path у svg спрайта, если например у свг пара элементов с разными цветами?
Да, конечно. Обращаться к каждому придётся
С кэшом не особо понял, если я бэку отдаю вёрстку, он в добавил все подключения стилей с название к примеру about.css. Потом мне пришли правки, я их делаю, запускаю кэш, и имя файла меняется, значит и бэку менять имя файла в подключении?
И ещё такой момент, в многостраничных сайтах все же лучше разбитвать свои стили на разные файлы, а на бэке подключать нужные стили к нужной странице
Для бэка кэш не нужен) только для билда.
ну насчет подключения разных стилей - тут двояко, кто-то делает так, кто-то иначе - особой разницы нет
Круто! Мне кажется ты забыл добавить svg, которые не будут попадать в спрайты, а я знаю ты в своих верстках иногда используешь свг ;) И более аккуратнее будет смотреться, если в массив передавать только расширения файлов, а не весть путь к файлу в итоге дополнительно поменять 6 путей, а не 2, хотя и путь можно записать в переменную. В общем можно ещё немного допилить, а так огонь!
В текущей сборке есть все) это все же старое видео
Супер! Спасибо огромное за видео (причем за все)! Очень полезно, информативно, а главное какая огромная работа проделана, чтобы все это сделать, записать и поделиться со всеми :)
Пожалуйста)
еще лучше было бы добавить PUG, чтобы через миксины можно было быстро добавлять циклы и массивы, допустим тот же самый каталог, сверстать одну карточку, а там уже массивом данных вывести всю верстку
Ну тут уже как сами хотите :)
Получается о ie придется забыть? в плане js
Я о нем в принципе забыл)
Только сегодня увидел, что пул реквест принят, увидел что сильно обновилась сборка и подумал, что готовится видео с обновлением. А вечером вышло видео :)
)) да-да)
Очень ждем марафон под эту сборку!
в апреле)
Здравствуйте, теперь надо самому вызывать миксины для шрифтов?
Здравствуйте, да
@@maxgraph Не подскажете, какой код надо прописать?
@include font-face(и тут передать три параметра, они уже опциональные для вас)
как добывать библиотеку бутстрап и куда именно в вендор scss не подключает
не понял, что не так?)
берете файлик css, вставляете в папку vendor и в файле vendor.scss подключаете
@@maxgraph не работает не добавляет или путь в style.css показывает путь не правильно
Вопрос а как внедрить в данную сборку что бы еще создавалась изображение в формате webp ?
Я нашел что есть плагин www.npmjs.com/package/gulp-webp, но у меня получается так что он создает только webp, а оригинальное изображение не оставляет
const {src, dest, parallel, series, watch} = require('gulp'); const imagemin = require('gulp-imagemin'); const webp = require('imagemin-webp'); const extReplace = require('gulp-ext-replace'); const exportWebP = () => { return src(['./src/img/**/*.jpg', './src/img/**/*.png'], {base: 'src'}) .pipe(imagemin([ webp({ quality: 60, }) ])) .pipe(extReplace('.webp')) .pipe(dest('./app/')) } watch(['./src/img/**/*.jpg', './src/img/**/*.png'], exportWebP); exports.default = series(parallel(exportWebP));
Сорян за такой ответ, просто ссылка не отправляется в комменты
Max, привет. Подскажи плз. После вёрстки сайта можно подключить к нему галп, чтобы тот его пересобрал так скажем. Имеется в виду уже готовый сайт
Лучше начинать сайт на галп
Ага, понял.
Большое спасибо.
Извини за беспокойство.
Webp не юзаешь?
Нет
Крутая сборка! Было бы круто добавить pug и папку для компонентов pug
вы можете ее дополнить, добавив нужный таск, если вам нужно :) Я не пользуюсь пагом :)
@@maxgraph он не сможет вот и просит)
@@maxgraph Понял Добавить смогу)
Установил свайпер npm install swiper
А как теперь его подключить в сборке?
а то копирование файлов не айс, да и некоторые npm пакеты не имеют для скачки этих файлов, приходится лесть в node_modules искать нужный мне файл и копировать в папку для подключения.
может круто было бы добавить что-то, где указываешь путь в папке node_modules откуда он будет брать файлы css js
Я так не хочу) и npm скрипты не хочу
@@maxgraph может в этом что есть) но сборка офигенная
Спасибо)
@@maxgraph
при использовании e CSStractor
выдается такая ошибка
command 'extension.ecsstractor_port_runwithbemandcomments' not found
можно как-то это исправить?