Тайм-коды по видео: 0:49 - установка Gulp для Win 10 2:15 - установка NodeJS 3:36 - установка Chocolatey 6:29 - установка Git 10:13 - установка Gulp для MacOS 10:59 - установка Homebrew 13:29 - просмотр содержимого файлов в Gulp сборке
О, Аня, я аж прям слезу проронил, как вспомнил о том что через Gulp проекты собирал))) Последние несколько лет кроме Webpack, сборщиков и не видел. Эх, золотое было время))) За ностальгию спасибо и лайк!)
gulp это не сборщик а таск менеджер а webpack сборщик для js, не надо путать, то что некоторые разработчики за счет плагинов извращаются над webpack и то что он умеет по умолчанию
каждый инструмент должен выполнять равно те функции к которым он заточен, это тоже самое что сказать что в photoshop можно и фотки обрабатывать и сайты рисовать и т.д. но для разных функций есть разные инструменты
@@vladi4507 Да ё-моё. вот и хвали после этого людей))) Я знаю что webpack - это сборщик, а gulp - это таскранер. Я просто обобщил и назвал это сборщиками. Т.к. так или иначе оба этих модуля выполняют схожие задачи - сборка production версии проекта.
@@YauhenKavalchuk webpack больше по js и его фреймворкам. Зачем верстальщику костыли в виде mini css loader? Webpack можно подключить как задачу в Gulp, и он будет работать с js файлами. А вот наоборот не получится, webpack таски не выполняет.
Анна, всегда рады Вас видеть и смотреть Ваши интересные ролики. Теперь по делу: развитие технологий это хорошо, но не всегда. Пока очередную софтину скачаешь установишь, изучишь - уже 3 сайта нормально сверстаешь! Я периодически балуюсь - изучаю новые методы вёрстки сайтов, но! как верстал ручками так и верстаю (берёшь блоки из старых проектов и копируешь в новый проект, быстренько настраиваешь, и код чистый). Даже фреймворки не использую - по времени тоже самое, только с ними заморочек больше. От новых софтин ничего хорошего - времени на изучение на много больше, чем предполагается, куча мусорных кодов, постоянно всё съезжает (не в ПК-версии, так в мобильной). Как-нибудь попробую Gulp 4.
Отличная сборка, сделал на ней несколько проектов. Только приходится svg symbol включать зачастую. Вот где я эту сборку увидел, значит. Спасибо большое ) Не знаю, как я раньше жил без помодульной сборки js файлов )
Добрій день. Есть воприс по подключению библиотек JS. Не получается подулючить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. Поги если можешь
@@TimurKharkov Я, к сожалению, не изучал webpack и не очень хорошо представляю себе, как он собирает бандл. В большинстве случаев достаточно бывает установить через yarn (или npm) библиотеку и в файле, где она используется, импортировать. Например, в файле для блока с всплывающим окном, нужно использовать jquery, я пишу "import $ from 'jquery'" или "import Inputmask from 'inputmask'", и обращаюсь к импортированным ссылкам. Если забываю название либы смотрю в packaje.json, или в репозитории либы написано уже всё. Видимо, в библиотеке предусмотрена такая возможность, и там используется конструкция es6 вроде expot default или экспорт common.js, но в некоторых либах этого нет и тогда я просто ищу аналог. Но подавляющее большинство библиотек работает как надо.
Сориентируйте как подключать библиотеки с расширением .css и .js? Хочу попробовать эту сборку и мне нужно подключить 6-9 библиотек, среди них и js и css файлы
После всего этого, у меня вообще npm не работает, не устанавливает ничего. Постоянно ошибка выходит. Что не может найти модули . Cannot find module 'webp-converter/cwebp'. Зачем только полез , все работало так хорошо. Теперь ничего не работает, постоянно это ошибка выходит. П.с. точнее при попытки запустить галп
Попробуйте глобально установить пакет " npm install -g npm-check-updates " ( обновляет зависимости package.json до последних версий, игнорируя указанные версии ) . Затем в папке проекта запустите " npm install ", чтобы обновить установленные пакеты.
То, что в создании БЭМ структуры, присутствует какая-то автоматизация - это хорошо, конечно. Но гораздо прикольнее было бы, если бы какой-то инструмент анализировал классы в html коде и выстраивал файловую бэм-структуру на основе этой информации. Насколько мне известно, такие штуки есть в БЭМ стеке. Только там сложно все, запутанно. Вот если бы вы разобрались, адаптировали к сборке, да всем рассказали - ох и замечательно было бы :)
Сама сборка хорошая, но есть несколько не понятных ситуаций. Это подключение сторонних библиотек, как gulp работает с изображением ( сам подставляет в разметку разрешение.webp или же мне нужно самому полставлять в тэг picture. И т.д. Было бы замечательно сделать видео с работой этой сборки.
@@WapSter92 Я надеюсь ты понял что я о файлах которые находятся в сборке. И вообще я же писал это для простых смертных, а не для Отца программирования, коим ты являешься
Привет! Подскажите на mac не могли бы протестировать gulp-svg-sprite, сделал одну сборку и работать больше не хочет....... И вообще не сталкивались с проблемами на mac os по работе др. плагинов???
'Set-ExecutionPolicy' не распознается как внутренняя или внешняя команда, работающая программа или пакетный файл. получаю эту ошибку при попытке установить chocolaty через cmd Может из-за того что у меня есть npm? npm можно использовать в этой сборке?
Было бы очень интересно узнать о работе stylelint и jslint, я вижу что настройки по первому включены в сбоку а вот в тасках пока ничего не нашел, чтобы узнать о его работе, да и вообще о них в ру ютюбе информации нет от слова вообще спасибо
Пора Вам Ань делать новое видео на эту тему. С шоколадом я помучился немного. Хотя, кто хочет, тот разберётся. Аня, расскажите пожалуйста про сасс. Его можно использовать совместно с галпом?
единственный минус, сборка не работает с gulp-twig плагином. Twig - это классный шаблонизатор, на сколько мне удалось разобраться, это бабель не поддерживает .twig формат.
Сказать, то что я в шоке - это ничего не сказать. Куда я смотрел, не понимаю, но сейчас сижу и разбираюсь в методологии БЭМ и работе SCSS и GUPL, я столько потерял, упустил, сколько лишней работы делал, бесконечные костыли...
Добрый день. Есть вопрос по подключению библиотек JS. Не получается подключить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. И вопрос к подключению библиотек со стилями bootstrap-4.css/scss и animate.css/scss. Погите если можете. facebook.com/timur.kharkov.9
К сожалению, при попытке установки yarn выходи следующее сообщение: "error inotify@1.4.6: The platform "win32" is incompatible with this module. error Found incompatible module." StackOver, к сожалению, не помог.
Тайм-коды по видео:
0:49 - установка Gulp для Win 10
2:15 - установка NodeJS
3:36 - установка Chocolatey
6:29 - установка Git
10:13 - установка Gulp для MacOS
10:59 - установка Homebrew
13:29 - просмотр содержимого файлов в Gulp сборке
Когда пытаюсь запустить проект, вот такая ощибка появляется Command failed with exit code 1.
Как решил ?
О, Аня, я аж прям слезу проронил, как вспомнил о том что через Gulp проекты собирал))) Последние несколько лет кроме Webpack, сборщиков и не видел. Эх, золотое было время))) За ностальгию спасибо и лайк!)
gulp это не сборщик а таск менеджер а webpack сборщик для js, не надо путать, то что некоторые разработчики за счет плагинов извращаются над webpack и то что он умеет по умолчанию
каждый инструмент должен выполнять равно те функции к которым он заточен, это тоже самое что сказать что в photoshop можно и фотки обрабатывать и сайты рисовать и т.д. но для разных функций есть разные инструменты
Всегда пожалуйста 😄😄😄
@@vladi4507 Да ё-моё. вот и хвали после этого людей))) Я знаю что webpack - это сборщик, а gulp - это таскранер. Я просто обобщил и назвал это сборщиками. Т.к. так или иначе оба этих модуля выполняют схожие задачи - сборка production версии проекта.
@@YauhenKavalchuk webpack больше по js и его фреймворкам. Зачем верстальщику костыли в виде mini css loader? Webpack можно подключить как задачу в Gulp, и он будет работать с js файлами. А вот наоборот не получится, webpack таски не выполняет.
Спасибо за видео!!! Ждем видео с практическим применением данной сборки.
Такое видео будет
@@annblok_webdev Также ждем видео с применением Gulp :-) насколько Gulp реально используется в ИТ фирмах на практике?
Очень полезное видео, спасибо!
Анна, всегда рады Вас видеть и смотреть Ваши интересные ролики.
Теперь по делу: развитие технологий это хорошо, но не всегда.
Пока очередную софтину скачаешь установишь, изучишь - уже 3 сайта нормально сверстаешь!
Я периодически балуюсь - изучаю новые методы вёрстки сайтов, но! как верстал ручками так и верстаю (берёшь блоки из старых проектов и копируешь в новый проект, быстренько настраиваешь, и код чистый). Даже фреймворки не использую - по времени тоже самое, только с ними заморочек больше.
От новых софтин ничего хорошего - времени на изучение на много больше, чем предполагается, куча мусорных кодов, постоянно всё съезжает (не в ПК-версии, так в мобильной).
Как-нибудь попробую Gulp 4.
Огромное спасибо за видео) Запишите пож-ста видео о том как им пользоваться, как создавать новые проекты от и до, в целом Gulp для верстки
Отличная сборка, сделал на ней несколько проектов. Только приходится svg symbol включать зачастую. Вот где я эту сборку увидел, значит. Спасибо большое ) Не знаю, как я раньше жил без помодульной сборки js файлов )
Добрій день. Есть воприс по подключению библиотек JS. Не получается подулючить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. Поги если можешь
@@TimurKharkov Я, к сожалению, не изучал webpack и не очень хорошо представляю себе, как он собирает бандл. В большинстве случаев достаточно бывает установить через yarn (или npm) библиотеку и в файле, где она используется, импортировать. Например, в файле для блока с всплывающим окном, нужно использовать jquery, я пишу "import $ from 'jquery'" или "import Inputmask from 'inputmask'", и обращаюсь к импортированным ссылкам. Если забываю название либы смотрю в packaje.json, или в репозитории либы написано уже всё. Видимо, в библиотеке предусмотрена такая возможность, и там используется конструкция es6 вроде expot default или экспорт common.js, но в некоторых либах этого нет и тогда я просто ищу аналог. Но подавляющее большинство библиотек работает как надо.
Спасибо за видео подскажите есть ли где нибудь видео о том как этим всем пользоваться?
Спасибо за урок и сборку. Понимаю что работа и канал, проект занимают много времени, но находи время и высыпаться.
Спасибо за заботу. Сон в моей жизни присутствует, не беспокойтесь)
я немного не понял с подключением сторонних библиотек js, почему их нельзя импортировать ?
И это как всегда круто! Спасибо большое мил человек!!!
Сориентируйте как подключать библиотеки с расширением .css и .js? Хочу попробовать эту сборку и мне нужно подключить 6-9 библиотек, среди них и js и css файлы
Очень понятное объяснение. Спасибо за ролик.😁👍
Бесценное видео ❤️
вместо npm install yarn -g танцы с бубном, збс
У меня не получилось, не установил ярн вы можете мне помочь?
Мое почтение все работает четко))
Отлично 👍🏻
поскажите пожалуйста есть ли видео применения данной сборки?
Надеюсь со временем найдется мастер, соберет все это в кучу и засунет в нормальный человеческий установщик.
Спасибо за полезную информацию и труд
После всего этого, у меня вообще npm не работает, не устанавливает ничего. Постоянно ошибка выходит. Что не может найти модули . Cannot find module 'webp-converter/cwebp'. Зачем только полез , все работало так хорошо. Теперь ничего не работает, постоянно это ошибка выходит.
П.с. точнее при попытки запустить галп
Попробуйте глобально установить пакет " npm install -g npm-check-updates " ( обновляет зависимости package.json до последних версий, игнорируя указанные версии ) . Затем в папке проекта запустите " npm install ", чтобы обновить установленные пакеты.
@@KabachenkoVyacheslav где вы раньше были))) 👍👍👍👍 это, кстати, и помогло! После обновления зависимостей. Спасибо большое 👍
[09:56:21] Failed to load external module @babel/register
[09:56:21] Error: Cannot find module '@babel/register' from 'D:\5\gulp-scss-starter'
[09:56:21] Failed to load external module babel-register
[09:56:21] Error: Cannot find module 'babel-register' from 'D:\5\gulp-scss-starter'
[09:56:21] Failed to load external module babel-core/register
[09:56:21] Error: Cannot find module 'babel-core/register' from 'D:\5\gulp-scss-starter'
[09:56:21] Failed to load external module babel/register
[09:56:21] Error: Cannot find module 'babel/register' from 'D:\5\gulp-scss-starter'
[09:56:21] Local modules not found in D:\5\gulp-scss-starter
[09:56:21] Try running: yarn install
error Command failed with exit code 1.
Огромное спасибо!
То, что в создании БЭМ структуры, присутствует какая-то автоматизация - это хорошо, конечно. Но гораздо прикольнее было бы, если бы какой-то инструмент анализировал классы в html коде и выстраивал файловую бэм-структуру на основе этой информации. Насколько мне известно, такие штуки есть в БЭМ стеке. Только там сложно все, запутанно. Вот если бы вы разобрались, адаптировали к сборке, да всем рассказали - ох и замечательно было бы :)
Сама сборка хорошая, но есть несколько не понятных ситуаций.
Это подключение сторонних библиотек, как gulp работает с изображением ( сам подставляет в разметку разрешение.webp или же мне нужно самому полставлять в тэг picture. И т.д.
Было бы замечательно сделать видео с работой этой сборки.
Открыл main.css, main.js, и понял что до этого занимался не версткой, а детским садом. Ну wtf! Теперь пол жизни разбираться!
main.css и main.js это все ещё детский сад
@@WapSter92 Я надеюсь ты понял что я о файлах которые находятся в сборке.
И вообще я же писал это для простых смертных, а не для Отца программирования, коим ты являешься
Выдало ошибку на Mac после введение команды yarn error /Users/.../gulp-scss-starter/node_modules/sharp: Command failed.
Офигеть!! Thank you very must:-)Лайк)
А теперь можно видео для самых маленьких, что совсем этим делать)) Рабочий процесс так сказать.
Да, плюсую! Как правильно со всем этим работать? Куча всяких _mixins, _variables, что с этим делать?))
@@ДмитрийРайдак обучиться scss?
Очень хотелось бы увидеть видео с реальной версткой на этой сборке))
Пока такое есть только на продвинутом курсе по верстке tpverstak.ru/training-profi/
Привет! Подскажите на mac не могли бы протестировать gulp-svg-sprite, сделал одну сборку и работать больше не хочет.......
И вообще не сталкивались с проблемами на mac os по работе др. плагинов???
Как правильно привязать еще pug к этой сборке?
в /blocks/modules/ создавать для каждого блока отдельный модуль или лучше просто оставить header & footer и писать все остальные блоки в html?
при копировании команды из Chocolatey в командной строке пишет *не является внутренней или внешней командой*
У меня не получается установить chocolatey. В командной строке пишет что не является внутренней или внешн. командой. запускал от админа
'Set-ExecutionPolicy' не распознается как внутренняя или внешняя команда, работающая программа или пакетный файл. получаю эту ошибку при попытке установить chocolaty через cmd Может из-за того что у меня есть npm? npm можно использовать в этой сборке?
Умница.
Спаисбо большое)
brew install yarn
-bash: brew: command not found
делаю как на видос не х не пашет!
Такая же проблема, не sync не gulp подклучить не могу .. уже кучу всего перерыла ((
у тебя не установлен brew, обычно его на мак ОС ставят. Переведи фразу "command not found", это значит надо найти способ установить сначала brew
@@AlexanderYank-b8n спс
Было бы очень интересно узнать о работе stylelint и jslint, я вижу что настройки по первому включены в сбоку а вот в тасках пока ничего не нашел, чтобы узнать о его работе, да и вообще о них в ру ютюбе информации нет от слова вообще спасибо
Обычно редакторы их подхватывают. А так в gulp файле создаёшь задачу с запуском линта и его настройке, в интернете куча инструкций и конфигураций
Пора Вам Ань делать новое видео на эту тему. С шоколадом я помучился немного. Хотя, кто хочет, тот разберётся.
Аня, расскажите пожалуйста про сасс. Его можно использовать совместно с галпом?
sass компилируется только в папку dist, зачем нужен тогда css в папке view?
после вставки текста для установки chocolatey в командную строку ничего не происходит. помогите
@Make Creative спасибо большое)
единственный минус, сборка не работает с gulp-twig плагином. Twig - это классный шаблонизатор, на сколько мне удалось разобраться, это бабель не поддерживает .twig формат.
Добрый вечер!
Проблема такого характера:
C:\Users\Work\gulp-scss-starter>yarn run dev
yarn run v1.22.5
$ gulp
[21:17:44] Requiring external module @babel/register
Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp.node'
Require stack:
- C:\Users\Work\gulp-scss-starter
ode_modules\sharp\lib\constructor.js
- C:\Users\Work\gulp-scss-starter
ode_modules\sharp\lib\index.js
- C:\Users\Work\gulp-scss-starter
ode_modules\favicons\dist\helpers.js
- C:\Users\Work\gulp-scss-starter
ode_modules\favicons\dist\index.js
- C:\Users\Work\gulp-scss-starter
ode_modules\gulp-favicons\index.js
- C:\Users\Work\gulp-scss-starter\gulp-tasks\favicons.js
- C:\Users\Work\gulp-scss-starter
ode_modules
equire-dir\index.js
- C:\Users\Work\gulp-scss-starter\gulpfile.babel.js
- C:\Users\Work\gulp-scss-starter
ode_modules\gulp-cli\lib\shared
equire-or-import.js
- C:\Users\Work\gulp-scss-starter
ode_modules\gulp-cli\lib\versioned\^4.0.0\index.js
- C:\Users\Work\gulp-scss-starter
ode_modules\gulp-cli\index.js
- C:\Users\Work\gulp-scss-starter
ode_modules\gulp\bin\gulp.js
- Remove the "node_modules/sharp" directory, run "npm install" and look for errors
- Consult the installation documentation at sharp.pixelplumbing.com/en/stable/install/
- Search for this error at github.com/lovell/sharp/issues
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
Спасибо ))
Как правильно со всем этим работать? Куча всяких _mixins, _variables, что с этим делать?))
Было бы просто афигенно, если бы еще объяснили чайникам в каких случаях и как этим пользоваться!
Всё понятно только не понятно зачем нужен chocolate?
Пакетный менеджер для windows
Как подключить шрифты?!?!?
чем npm плох ? тем более он идет в комплекте с node
Как подключить jquery в такой проект?
Сказать, то что я в шоке - это ничего не сказать. Куда я смотрел, не понимаю, но сейчас сижу и разбираюсь в методологии БЭМ и работе SCSS и GUPL, я столько потерял, упустил, сколько лишней работы делал, бесконечные костыли...
Попробуйте использовать nunjucks для html
В час ночи ролики делаешь? :o
КукОЛДЫ здеся?
Добрый день. Есть вопрос по подключению библиотек JS. Не получается подключить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. И вопрос к подключению библиотек со стилями bootstrap-4.css/scss и animate.css/scss. Погите если можете. facebook.com/timur.kharkov.9
Почему-то не обновляет браузер
Анна научи делать сбоку для чистки не нужного css и js
когда вожу вторую строчку
command not found: yarn
хренота конкретная навсовывали хлама. я думал будет нормально объяснение по установке, а тут просто клонирование чужого проекта
командную строчку)
Помогииите нубу разобраться в подключении скриптов 😢
@Make Creative да, уже разобрался давно))
нет той строки что копирует автор видео, которую потом вставляет в командную стороку
chocolatey.org/docs/installation#non-administrative-install
Но у меня все равно не получилось установить именно на этом этапе. Win7, x32
К сожалению, при попытке установки yarn выходи следующее сообщение: "error inotify@1.4.6: The platform "win32" is incompatible with this module.
error Found incompatible module." StackOver, к сожалению, не помог.
то же самое. Нашли ответ?
error inotify@1.4.6: The platform "darwin" is incompatible with this module. Очень, очень жаль