Установка готовой сборки Gulp 4 на Windows и MacOS, используя Chocolatey и Homebrew
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2019
- На сайте есть готовая сборка tpverstak.ru/gulp/, которая помогает многим. Но у некоторых всё же возникают вопросы по поводу установки под разные системы. Это видео поможет решить многие вопросы.
Рекомендую посмотреть установку для двух систем, т.к. в Windows я демонстрирую установку на компьютер, на котором еще не был установлен ранее Git и NodeJS, а в разделе про MacOS - показываю внутреннее содержание файлов в редакторе кода.
Github репозиторий сборки - github.com/andreyalexeich/gul...
__
Купить ежедневник Frontend Book - tpverstak.ru/frontendbook
Задать вопрос фронтендеру бесплатно - frontendhelp.me/ru
__
Сайт - tpverstak.ru
ВК - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak
Чат Telegram - t.me/tpverstakchat
__
Курсы и марафоны - tpverstak.ru/courses/
Отзывы - topic-149247708_35960122
![[LIVE] : ONE ลุมพินี 68 | คู่เอก "พระจันทร์ฉาย vs โจนาธาน"](http://i.ytimg.com/vi/F3IM3w-XchI/mqdefault.jpg)
Тайм-коды по видео:
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.
Как решил ?
Спасибо за видео!!! Ждем видео с практическим применением данной сборки.
Такое видео будет
@@annblok_webdev Также ждем видео с применением Gulp :-) насколько Gulp реально используется в ИТ фирмах на практике?
Очень полезное видео, спасибо!
О, Аня, я аж прям слезу проронил, как вспомнил о том что через Gulp проекты собирал))) Последние несколько лет кроме Webpack, сборщиков и не видел. Эх, золотое было время))) За ностальгию спасибо и лайк!)
gulp это не сборщик а таск менеджер а webpack сборщик для js, не надо путать, то что некоторые разработчики за счет плагинов извращаются над webpack и то что он умеет по умолчанию
каждый инструмент должен выполнять равно те функции к которым он заточен, это тоже самое что сказать что в photoshop можно и фотки обрабатывать и сайты рисовать и т.д. но для разных функций есть разные инструменты
Всегда пожалуйста 😄😄😄
@@vladi4507 Да ё-моё. вот и хвали после этого людей))) Я знаю что webpack - это сборщик, а gulp - это таскранер. Я просто обобщил и назвал это сборщиками. Т.к. так или иначе оба этих модуля выполняют схожие задачи - сборка production версии проекта.
@@YauhenKavalchuk webpack больше по js и его фреймворкам. Зачем верстальщику костыли в виде mini css loader? Webpack можно подключить как задачу в Gulp, и он будет работать с js файлами. А вот наоборот не получится, webpack таски не выполняет.
Очень понятное объяснение. Спасибо за ролик.😁👍
Огромное спасибо за видео) Запишите пож-ста видео о том как им пользоваться, как создавать новые проекты от и до, в целом Gulp для верстки
И это как всегда круто! Спасибо большое мил человек!!!
Спасибо за видео подскажите есть ли где нибудь видео о том как этим всем пользоваться?
Спасибо за полезную информацию и труд
вместо npm install yarn -g танцы с бубном, збс
Офигеть!! Thank you very must:-)Лайк)
Спасибо за урок и сборку. Понимаю что работа и канал, проект занимают много времени, но находи время и высыпаться.
Спасибо за заботу. Сон в моей жизни присутствует, не беспокойтесь)
Открыл main.css, main.js, и понял что до этого занимался не версткой, а детским садом. Ну wtf! Теперь пол жизни разбираться!
main.css и main.js это все ещё детский сад
@@WapSter92 Я надеюсь ты понял что я о файлах которые находятся в сборке.
И вообще я же писал это для простых смертных, а не для Отца программирования, коим ты являешься
Бесценное видео ❤️
я немного не понял с подключением сторонних библиотек js, почему их нельзя импортировать ?
Надеюсь со временем найдется мастер, соберет все это в кучу и засунет в нормальный человеческий установщик.
Анна, всегда рады Вас видеть и смотреть Ваши интересные ролики.
Теперь по делу: развитие технологий это хорошо, но не всегда.
Пока очередную софтину скачаешь установишь, изучишь - уже 3 сайта нормально сверстаешь!
Я периодически балуюсь - изучаю новые методы вёрстки сайтов, но! как верстал ручками так и верстаю (берёшь блоки из старых проектов и копируешь в новый проект, быстренько настраиваешь, и код чистый). Даже фреймворки не использую - по времени тоже самое, только с ними заморочек больше.
От новых софтин ничего хорошего - времени на изучение на много больше, чем предполагается, куча мусорных кодов, постоянно всё съезжает (не в ПК-версии, так в мобильной).
Как-нибудь попробую Gulp 4.
Отличная сборка, сделал на ней несколько проектов. Только приходится svg symbol включать зачастую. Вот где я эту сборку увидел, значит. Спасибо большое ) Не знаю, как я раньше жил без помодульной сборки js файлов )
Добрій день. Есть воприс по подключению библиотек JS. Не получается подулючить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. Поги если можешь
@@user-vs4hx6tz6f Я, к сожалению, не изучал webpack и не очень хорошо представляю себе, как он собирает бандл. В большинстве случаев достаточно бывает установить через yarn (или npm) библиотеку и в файле, где она используется, импортировать. Например, в файле для блока с всплывающим окном, нужно использовать jquery, я пишу "import $ from 'jquery'" или "import Inputmask from 'inputmask'", и обращаюсь к импортированным ссылкам. Если забываю название либы смотрю в packaje.json, или в репозитории либы написано уже всё. Видимо, в библиотеке предусмотрена такая возможность, и там используется конструкция es6 вроде expot default или экспорт common.js, но в некоторых либах этого нет и тогда я просто ищу аналог. Но подавляющее большинство библиотек работает как надо.
Спаисбо большое)
Сама сборка хорошая, но есть несколько не понятных ситуаций.
Это подключение сторонних библиотек, как gulp работает с изображением ( сам подставляет в разметку разрешение.webp или же мне нужно самому полставлять в тэг picture. И т.д.
Было бы замечательно сделать видео с работой этой сборки.
Сориентируйте как подключать библиотеки с расширением .css и .js? Хочу попробовать эту сборку и мне нужно подключить 6-9 библиотек, среди них и js и css файлы
Привет! Подскажите на mac не могли бы протестировать gulp-svg-sprite, сделал одну сборку и работать больше не хочет.......
И вообще не сталкивались с проблемами на mac os по работе др. плагинов???
То, что в создании БЭМ структуры, присутствует какая-то автоматизация - это хорошо, конечно. Но гораздо прикольнее было бы, если бы какой-то инструмент анализировал классы в html коде и выстраивал файловую бэм-структуру на основе этой информации. Насколько мне известно, такие штуки есть в БЭМ стеке. Только там сложно все, запутанно. Вот если бы вы разобрались, адаптировали к сборке, да всем рассказали - ох и замечательно было бы :)
в /blocks/modules/ создавать для каждого блока отдельный модуль или лучше просто оставить header & footer и писать все остальные блоки в html?
Огромное спасибо!
Умница.
при копировании команды из Chocolatey в командной строке пишет *не является внутренней или внешней командой*
А теперь можно видео для самых маленьких, что совсем этим делать)) Рабочий процесс так сказать.
Да, плюсую! Как правильно со всем этим работать? Куча всяких _mixins, _variables, что с этим делать?))
@@user-bu7xt5nk2p обучиться scss?
Очень хотелось бы увидеть видео с реальной версткой на этой сборке))
Пока такое есть только на продвинутом курсе по верстке tpverstak.ru/training-profi/
У меня не получилось, не установил ярн вы можете мне помочь?
Было бы очень интересно узнать о работе stylelint и jslint, я вижу что настройки по первому включены в сбоку а вот в тасках пока ничего не нашел, чтобы узнать о его работе, да и вообще о них в ру ютюбе информации нет от слова вообще спасибо
Обычно редакторы их подхватывают. А так в gulp файле создаёшь задачу с запуском линта и его настройке, в интернете куча инструкций и конфигураций
Пора Вам Ань делать новое видео на эту тему. С шоколадом я помучился немного. Хотя, кто хочет, тот разберётся.
Аня, расскажите пожалуйста про сасс. Его можно использовать совместно с галпом?
sass компилируется только в папку dist, зачем нужен тогда css в папке view?
У меня не получается установить chocolatey. В командной строке пишет что не является внутренней или внешн. командой. запускал от админа
Мое почтение все работает четко))
Отлично 👍🏻
поскажите пожалуйста есть ли видео применения данной сборки?
Выдало ошибку на Mac после введение команды yarn error /Users/.../gulp-scss-starter/node_modules/sharp: Command failed.
[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.
'Set-ExecutionPolicy' не распознается как внутренняя или внешняя команда, работающая программа или пакетный файл. получаю эту ошибку при попытке установить chocolaty через cmd Может из-за того что у меня есть npm? npm можно использовать в этой сборке?
Спасибо ))
В час ночи ролики делаешь? :o
Как подключить jquery в такой проект?
чем npm плох ? тем более он идет в комплекте с node
Как правильно привязать еще pug к этой сборке?
Попробуйте использовать nunjucks для html
После всего этого, у меня вообще npm не работает, не устанавливает ничего. Постоянно ошибка выходит. Что не может найти модули . Cannot find module 'webp-converter/cwebp'. Зачем только полез , все работало так хорошо. Теперь ничего не работает, постоянно это ошибка выходит.
П.с. точнее при попытки запустить галп
Попробуйте глобально установить пакет " npm install -g npm-check-updates " ( обновляет зависимости package.json до последних версий, игнорируя указанные версии ) . Затем в папке проекта запустите " npm install ", чтобы обновить установленные пакеты.
@@KabachenkoVyacheslav где вы раньше были))) 👍👍👍👍 это, кстати, и помогло! После обновления зависимостей. Спасибо большое 👍
командную строчку)
brew install yarn
-bash: brew: command not found
делаю как на видос не х не пашет!
Такая же проблема, не sync не gulp подклучить не могу .. уже кучу всего перерыла ((
у тебя не установлен brew, обычно его на мак ОС ставят. Переведи фразу "command not found", это значит надо найти способ установить сначала brew
@@user-mx3xe2ll7c спс
единственный минус, сборка не работает с gulp-twig плагином. Twig - это классный шаблонизатор, на сколько мне удалось разобраться, это бабель не поддерживает .twig формат.
Как подключить шрифты?!?!?
после вставки текста для установки chocolatey в командную строку ничего не происходит. помогите
@Make Creative спасибо большое)
Как правильно со всем этим работать? Куча всяких _mixins, _variables, что с этим делать?))
Было бы просто афигенно, если бы еще объяснили чайникам в каких случаях и как этим пользоваться!
Сказать, то что я в шоке - это ничего не сказать. Куда я смотрел, не понимаю, но сейчас сижу и разбираюсь в методологии БЭМ и работе SCSS и GUPL, я столько потерял, упустил, сколько лишней работы делал, бесконечные костыли...
Почему-то не обновляет браузер
КукОЛДЫ здеся?
Всё понятно только не понятно зачем нужен chocolate?
Пакетный менеджер для windows
Анна научи делать сбоку для чистки не нужного css и js
Добрый вечер!
Проблема такого характера:
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.
Добрый день. Есть вопрос по подключению библиотек JS. Не получается подключить пишет not found как не боролся. Пришлось немного доработать сборку. Добавил папки с библиотеками, и добавил таски для их переноса, а остальное подключил через CDN. Но как с node_modules подключать не понимаю. И вопрос к подключению библиотек со стилями bootstrap-4.css/scss и animate.css/scss. Погите если можете. facebook.com/timur.kharkov.9
когда вожу вторую строчку
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. Очень, очень жаль