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