Что такое Taskrunner и Bundler? Что такое gulp и зачем он нужен. Установка Gulp 4 

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

Хорошо, что объясняешь, как для школьников, иногда хочется подучиться на релаксе 🙂

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

Лысый ты оч крут!))

ЕДИНСТВЕННЫЙ .Ты единственный кто помог. -интернета слишком много инфы с примесью говна

этеншен , gulp-sass обновился , потому стоит изменить строку в файле gulpfile.js - var sass = require('gulp-sass')(require('sass'));. , а так все работает))

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

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

Виталь, да какие там могут быть сложности? Ты настолько хорошо объясняешь, что там ребенок это все выучит и пойдет программистом в Google работать)

Мужик, ты лучший! Я уже думал что никто не сможет мне это объяснить, продолжай в том же духе!

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

Класс! Какой полезный канал! просто находка)

О чистый код, спасибо за видео, 2 дня ушло на подготовку галпа, так как не мог понять в чем причине ненахода, но всё же, понял в чем заключается работа галп, и закончил пошаговую инстукцию видео

Виталий, ты мега чувак! Ты настолько понятно и информативно показываешь сложные вещи))) Спасибо тебе! Продолжай в том же формате выпускать новые видосы)

Полезное видео, Спасибо!

Просто економия часов работы, спасибо!))

Отличная подача материала! Реально полезные ролики)

Спасибо вам Виталий за работу ! очень интересно)

Огромное Вам СПАСИБО! Вы - супер учитель!!!

Спасибо за урок!)

Спасибо большое за объяснение! Все прояснилось, только после ваших роликов. Что-куда-зачем.

Это одно из лучших обучающих видео по данной теме. Спасибо Вам!

Спасибо большое за урок

Спасибо! Крутой канал. Все ждут продолжения и развития канала

Просто шикарно, без лишних слов:DDD

Автор объясняет очень доходчиво, без воды и в мелочах. Великолепно. Заинтересован даже перейти посмотреть, что там еще на канале.

Виталий - большущее спасибо за видео! Много видел уроков и статей по теме Gulp, но в большинстве своём они или устаревшие или не адекватные, хорошо что поискал на твоём канале, премного благодарен.

Спасибо, всё получилось!!!!)))

Это просто пушка !!!!

*Исполнил всю эту ютубовскую шаурму: расписался, поставил лоу-кик и 2 коммента влепил*

Спасибо, помог разобраться.

750-й Like ))) спасибо за простое и подробное видео: теперь у меня есть базовая заготовка, что для новичка очень полезно и удобно конечно же не будет лишним разобраться с JavaScript'ом в принципе и применительно к данному уроку в частности - это задача на самое ближайшее время

Для тех, у кого WIN10 и после установки нельзя проверить gulp -v, надо в powershell от админа убрать ограничение коммандой: Set-ExecutionPolicy RemoteSigned

Спасибо большое!

Ребята, плагин gulp-sass обновился до 5 версии, из-за этого может выдавать ошибку на этапе gulp style. Сделайте следующее: Дополнительно установите пакет sass npm i sass --save-dev И заменитe способ подключения с const scss = require('gulp-sass'); на const scss = require('gulp-sass')(require('sass'));

Ну справедливости ради можно было сперва выпустить ролики которые бы подводили к использованию данных программ в проекте, а потом уже показывать как ими пользоваться, а так получается что если человек идёт от первого ролика то наверное он не поймёт зачем это ему и как это использовать. По крайней мере у меня так случилось. Хотя я слишком рано начал жаловаться. В конце более менее стало понятно что к чему, просто на 10 минуте я поплыл совсем и не понимал для чего мы это делаем, тем более ещё и с JS начали баловаться, а я только 2-3 недели знакомлюсь с HTML и CSS. Но когда мне понадобится использовать всё это я обязательно пересмотрю ролик)

Спасибо

Спасибо большое за качественный контент!

Господе, я не знаю каким образом, но все очень доходчиво сделано и объяснено. Ошибки были, но там как правило пишется в самом терминали где косяк, можно разобраться. Итог : создал проект, сделал свой gulpfile.js - Огонь!)

спасибо

Но и обновлять HTML страницу тоже лень!!! Посмеялся от души!!!

Настроил по этому гайду аналогично pug, browserSync, autoprefixer, sourcemaps. Теперь галпом приятно пользоваться из терминала VSCode. И даже Prepros больше не нужен.

Отличное видео, коротко и по теме! По шаблону ватчер не отрабатывал изменения HTML, всё решилось добавкой строки ghostMode: false function watch () { browserSync.init({ server: { baseDir: './' }, ghostMode: false }); gulp.watch('./*.html').on('change', browserSync.reload); gulp.watch('./scss/**/*.scss', style); } Это на linuxmint) Вдруг поможет кому

🙌🏻

Огромное спасибо! Вы очень хорошо объясняете, но вот только размер шрифта маловат, и пришлось щуриться(

Ничего не понятно но очень интересно.

Спасибо за качественное видео Виталий Вопрос , подскажите browser-sync можно же заменить live server , ведь на сколько я понял он сразу показывает изменинея в коде . Или какие-то есть приумущества при вашем использовании добавления по npm ? Знание спасибо.

Понравилось. Видео мотивирует навести порядок в своём gulp файле и использовать встроенную консоль в VSCode. Интересно узнать от тебя, как настроить папку node_modules одну для всех проектов? Сам делаю через создание символьной ссылки, которую раскидываю по всем папкам проектов. Но может быть есть способ лучше?

Виталик, как по мне то для новичков метод использования Sass далеко не самый легкий. Не легче ли в VSCode установив расширение Sass создавать файл style.scss в папке где будет потом лежать непосредственно файл стилей и нажать Watching Sass в VSC?

Огромное спасибо! очень полезно! У пользователей Windows возможно будет SecureError, винда будет жаловаться на команду gulp style. Надо будет менять политику выполнения команд в терминале. Если что вот Команды которые мне помогли. Get-ExecutivePolicy -list Для вывода параметров выполнения команд. Get-ExecutivePolicy Scope -CurrentUser Для изменения параметров выполнения команд под удаленной подписью. походу админ права для терминала vs code. Подробнее на about_execution_policies по ссылке docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7

спасибо за видео. Но, если в vs code есть live server, получается в browser-sync смысла нет?

Спасибо большое. У меня такой вопрос. Есть проект на nodeJs, я хочу подключить Gulp, но в проекте есть 2 файла, АПИ и основной файл. api.js и project.js, каждый на своем порту. Как запустит оба файла и чтобы browserSync запустил основной файл? или такое не возможно. сейчас я запускаю это так killall -9 node&&node api.js&&node project.js

Добавлю, что версию ноды ставим LTS, после установки ноды перезагружаем редактор кода. Славные ролики, однако, мелковаты шрифты для показа. Не аксэсэбл для слабовидящих))

Сколько не задавал там вопросов, ни кто не ответили, такое чувство там тусняк для своих собрался!

Привет! Спасибо очень полезный ролик, походу ты один из немногих кто по человечески осветил эту тему. У меня все работает, но как только я сменяю цвет шрифта или тому подобное в SCSS gulp выдает такую ошибку [Browsersync] Serving files from: ./ [Browsersync] Reloading Browsers... [17:43:17] Starting 'style'... [17:43:17] 'style' errored after 11 ms [17:43:17] TypeError: gulp.src(...).pipe(...).pipe(...).pipre is not a function at style (D:\Верстка\Тест_проект3\gulpfile.js:9:10) at bound (domain.js:426:14) at runBound (domain.js:439:12) at asyncRunner (D:\Верстка\Тест_проект3 ode_modules\async-done\index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:79:11) с чем это может быть связано?? при первом запуске gulp wathc все ок- затем эта проблема. приходится заново прерывать-запускать gulp watсh (работаю в PHPstorm)

Здравствуйте, а почему сразу не создать .CSS файл? И расскажите подробнее про то где должна располагаться папка style.css, что бы программа понимала такой путь CSS/style.css ?

Добрый день Виталий. В VS Code есть функция автосохранения файлов с определенной задержкой. Не проще активировать ее, а не сохранять вручную каждый раз файлы после внесения изменений? И было бы очень интересно услышать про подходы, альтернативные БЭМ (один из Ваших комментариев, "Но она не будет связана с БЭМом. Я предпочитаю иные подходы.")

Что именно нужно записывать в baseDir?

Была ошибка при запуске команды gulp watch. На linux решилась прописыванием команды echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p в строке. В остальном все отлично. Единственное хотелось бы узнать. Есть некий простенький сервер на django, можно ли средствами gulp подключиться к нему и релоадить браузер при изменении статических файлов?

В видео слышу предложение добавляться в Telegram. А ссылки на группу нет. Не порядок))

Привет. при запуске gulp watch, browserSync в браузере пишет Cannnot GET /... что это может быть и как с этим бороться? Спасибо за контент :)

а что нибудь посложнее будет? например сборка gulp для БЭМ структуры, затронуть настройку наследования и т.д

exports.style = style ненаходиться в терминале, в чем проблема может быть?

Проблемы возникают когда после продолжительного перерыва хочешь вырнутся к старому проекту и сборка из-за различных обновлений в зависимостях просто не собирается. Как с этим быть? Пока в голову приходит просто переписать gulpfile.js с нуля

Крутой урок, но у меня вопрос, после вёрстки и сдачи проекта папка node modules и файлы gulp и Json удаляются?

Интересен конфиг с gulp + webpack для многостраничного сайта и в качестве html-шаблонизатора использовать nunjucks. Или может хватит одного webpack'а для создания многостраничника с генерацией svg спрайтов для иконок, сжатием картинок?

Привет, а если у меня новый проект, то что туда скопировать? Галп файл и package.json ? и выполнить команду npm i верно? был же комент об этом внизу и не могу его найти(

Вопросик есть. Вот допустим я создаю другой проект, а первый уже есть и все файлы как у вас в видео есть, создаю новую папку, но при этом все эти команды копирую, и у меня соответственно все файлы уже в новом проекте будут с такими же именами, тоесть и index.html и gulp.js и тд, ну вообщем все идентичные, ну разумеется они будут пустые. Это как-то повлияет на работу или пофиг как называются файлы если они в другой папке? И надо ли мне будет для нового проекта на этом же компе прописывать -npm i --save... или можно просто скопировать из другой папки package.json, package-lock.json и node modules?

Привет, такой вопрос, у меня из командной строки все ставится в какую-то левую папку C/users/homе. Как то можно изменить адресную строку в командной строке, чтоб все ставилось в нужную папку (gulp-project) или можно просто вручную переместить потом эти джейсоны ноуд модулс... в свою папку?

здравствуйте спасибо за видео но на последнем этапе не работает автообновлениме страницы браузера хоть и пишет что обновляеться

Не могу видеть что пишешь на Vs code. Сделай zoom пожалуйста🙏🏻🙏🏻🙏🏻

добрый день Виталий очень понятные видео скажите пожалуйста будут ли видео по JS ? очень интересует эта тема так как нормального объяснения нет ! может подскажете где порыть что посмотреть ? потому что как то не очень заходит JS а без него на работу не берут просто хорошие верстальщики не кому не нужны

Все хорошо, но мелковато, ибо не у всех мониторы 32 дюйма

А с чем может быть связано, что после выполнения команды gulp watch открывается Edge, а не Хром, который по умолчанию? Ну соответственно мгновенные изменения видны только в edge

При установки gulp-sass возникает ошибка(gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.) в чем может быть проблема?

А Live Server не сможет с scss работать?

а зачем экспортировать каждую функцию? они и так будут работать если написать gulp style или gulp watch в терминале?

Вопрос для знатоков: У нас есть видео 16x9, в которое надо вставить видео 14x9. Что будем делать: a) Растянем видео по ширине, обрезав бесполезную панель мака внизу. (потеряем разрешение, и возможность похвастаться маком) б) Переснимем видео в нормальном формате (потратим кучу времени) в) Добавим по бокам полосы, соответствующие цвету контента, а именно тёмно-серые. г) Добавим по бокам полосы, но покрасим их в максимально контрастный к контенту цвет - белый, чтобы было максимально некомфортно смотреть. Что же выбрать. Даже не знаю…

Ребят, как в эту сборку ещё и autoprefixer вставить ?

Було б класно від вас побачити налаштування gulp і для js з збірками, мініфікаціями і т п

При попытке запустить команду gulp style выдает следующее [21:13:22] The following tasks did not complete: style [21:13:22] Did you forget to signal async completion? Что делать?

Есть у кого-нибудь ссылка на данную сборку?

Добрый день! при запуске команды gulp style выдает следующее: PS C:\Users\andre\OneDrive\Рабочий стол\gulp-project> gulp style internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'browser-sync' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object. (C:\Users\andre\OneDrive\Рабочий стол\gulp-project\gulpfile.js:3:21) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) Win 10. Node.js пробовал переустановить, начинал проект заново. Ничего не помогает. Подскажите как быть? Загуглил полностью эту ошибку, есть варианты очистить кэш ноды и убрать из окружения. Также парный TEMP удалить. Но все не увенчалось успехом. Вот мой код: const gulp = require('gulp'); const sass = require('gulp-sass'); const browserSync = require('browser-sync'); function style () { return gulp.src('./scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')) } exports.style = style;

Подскажите почему на 19:40 gulp style?????? выдает ошибку и не хочет запускаться const gulp = require('gulp'); const gulp = require('gulp-sass'); const browserSyns = require('browser-syns'); function style () { return gulp.src('./scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')) } exports.style = style;

А чем это отличается от расширения для VScode? Вроде тоже самое...

Не могу понять почему не создается папка css, после выполения экспорта. Вот код: const gulp = require('gulp') const sass = require('gulp-sass') const browserSync = require('browser-sync') function style () { return gulp.src('./scss/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')) } exports.style = style; вот ответ терминала: MBP-Roman:my-project romandolzenkov$ gulp style [21:34:33] Using gulpfile ~/Desktop/TT Project/my-project/gulpfile.js [21:34:33] Starting 'style'... [21:34:33] Finished 'style' after 19 ms

С телефона когда смотрю, очень мелкий код, ничего не видно или тяжело разобрать

а не легче копировать package.json и потом просто командой npm i устанавливать все пакеты. Мне казалось этот файл для того и нужен)

Привет, возник вопрос: как пофиксить ошибку "gulp : Невозможно загрузить файл C:\Users\user\AppData\Roaming pm\gulp.ps1, так как выполнение сценариев отключено в этой системе."

а зачем browser sync, если есть live server от vsc?

+плагин Save Typing и тогда даже сохранять не надо

А зачем тогда нам live compiler sass?

Никто случайно не сталкивался с такой проблемой, после установке gulp gulp-sass browser-sync sublime-text 3 постоянно выдает ошибку и прекращает работу.

npm WARN deprecated resolve-url@0.2.1: github.com/lydell/resolve-url#deprecated npm WARN deprecated urix@0.1.0: Please see github.com/lydell/urix#deprecated Это критичные ошибки? Выдает при "npm i gulp-cli -g" ?

Terminal: ne zagrujaet posledniy zadavha gulp style. Chto delat

VScode: льзя

webpack это бандлер и он сборщик . ТАк почему gulp называют сборщик ? ( и ты тоже )

Спасибо, а возможно подружить browserSync с php?

no gulp file found сохранил файл и все равно вылазит этот геморой

Добрый вечер. Спасибо Вам и сразу к проблеме: Сегодня устанавливал модули и на модуль gulp-saas была 404, а точнее npm ERR! code E404 npm ERR! 404 Not Found - GET registry.npmjs.org/gulp-saas - Not found npm ERR! 404 npm ERR! 404 'gulp-saas@latest' is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\koval\AppData\Roaming pm-cache\_logs\2019-12-28T22_37_25_741Z-debug.log Пытался найти решение сам, но мои попытки вам не интересны, поскольку они не привели меня к решению. Может ли бить, что модуль поменял название и теперь настройку saas нужно искать отдельно? Жду Вашего ответа и еще раз спасибо!