Не забудьте заглянуть сюда: ❓ Запись на консультацию - 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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо

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

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

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

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

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

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

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

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

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

спасибо

🙌🏻

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

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

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

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

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

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

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

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

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

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

Огромное спасибо! очень полезно! У пользователей 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

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

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

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

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

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

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

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

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

Привет! Спасибо очень полезный ролик, походу ты один из немногих кто по человечески осветил эту тему. У меня все работает, но как только я сменяю цвет шрифта или тому подобное в 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)

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

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

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

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

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

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

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

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

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

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

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

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

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" ?

Подскажите почему на 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;

Добрый день! при запуске команды 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;

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

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

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

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

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

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

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

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

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

Не могу понять почему не создается папка 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 устанавливать все пакеты. Мне казалось этот файл для того и нужен)

Terminal: ne zagrujaet posledniy zadavha gulp style. Chto delat

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

У меня такое (Ubuntu 18.04) [09:51:52] Using gulpfile ~/Стільниця/gulp-project/gulpfile.js /usr/lib/nodejs/gulp/bin/gulp.js:132 gulpInst.start.apply(gulpInst, toRun); ^ TypeError: Cannot read property 'apply' of undefined at /usr/lib/nodejs/gulp/bin/gulp.js:132:20 at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) at Function.Module.runMain (module.js:695:11) at startup (bootstrap_node.js:188:16) at bootstrap_node.js:609:3

VScode: льзя

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

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

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