Gulp для самых маленьких - подробное руководство

Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.

Таймкоды:
00:00 Начало урока
07:34 Инициализация проекта npm
10:32 Установка Gulp
11:36 Обзор папки node_modules
12:38 Создание структуры Gulp-проекта
16:30 Понимание задач (тасков) Gulp
22:30 Установка препроцессора Sass и создание таска
33:52 Наблюдение за файлами Gulp watch
37:07 Установка и настройка Browsersync
43:39 Модификация тасков для автообновления страницы
47:01 Как работает Browsersync
49:02 Обновление страницы при сохранении HTML и JS
52:02 Работа с JavaScript (подключение bower, модулей, сжатие JS)
1:06:16 Подключение стилей плагинов в Sass
1:08:29 Сжатие CSS
1:14:47 Создание таска "build" (сборка проекта)
1:26:20 Сжатие изображений в Gulp (оптимизация)
1:35:38 Работа с Autoprefixer CSS

[Rewolucjonier]

This is the best tutorial on Youtube I've seen so far about Gulp. I understand about 60% of Russian language but this video is very helpful. Thanks!

[suspiciouscandy]

Ура! Я продрался через все ошибки, поставил Node 11, Gulp 3, переборол еще несколько ошибок (спасибо форуму Хабра) и прошел этот урок.

[vladislavls]

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

[aurusaurum]

Вот это то, что доктор прописал! Спасибо вам большое!
Хотелось бы такое же по основам sass.

[moralvalue-exposer]

Преподователь от бога. Четкая, грамотная речь, которую приятно слушать и не взрывает мозги всякими ляпами, как у других . Очень много сейчас решили записывать уроки и называть их ---туториалами (ааа жесть ненавижу). и также без понятия о русском и английском языке и произношении несут чушь типа возьмите из папки саурсе, есть файл гитигноре или вместо баш говорят басх. Да еще со знанием будто только вчера выучили тему. После такого бреда, Ваш урок как бальзам на душу. Вам огромного терпения и времени, чтобы и в будущем мы могли радоваться качественным урокам и руководствам.

[alexeska]

пока я все это настроил, у меня мозги чуть не ужас!!!очень сложно начинающему, хотя если бы не такая педантичность Алексея, врядь ли бы я смог все это повторить и настроить, закончилось бы все это только установкой нод джи большое за такие подробные видео, кроме тебя на данном видео ресурсе никто так больше не умеет преподносить информацию.Буду смотреть твои туториалы и стараться не пропускать.Желаю чтобы не иссяк твой запал и твой канал жил еще минимум лет 20, что-бы выросло на нём несколько поколений веб-верстальщиков.Повторюсь еще раз, будет очень жаль если дальше не будет таких уроков.Жду с нетерпением новых

[fusome]

Огромная благодарность за такой подробный и, самое главное, понятный разбор возможностей gulp! Да и вообще, настолько насыщенных практической информацией уроков я больше нигде не видел. Спасибо ещё раз огромнейшее за то, что вы делаете!!!

[hugoboss]

Урок не на один день, если сталкиваешся с подобными вещами впервые.
Спасибо огромное.

[Tormin_run]

Спасибо за четкое изложение.Я не думал что это можно усвоить настолько быстро)(6 часов, повторял все и + фиксил свои ошибки+ 3 раза перезагружал комп)

[АннаШугай-рз]

Одним словом МОЛОДЕЦ!) Для самых маленьких действительно и прямо таки хочется заплатить за такой грандиозный труд. Спасибо огромное Вам за этот урок и удачи в новых начинаниях.

[alexanderfrize]

Отличное видео!

Все очень подробно, доходчиво, на реальных примерах.
Без "воды". Все четко и по теме.
В общем, именно то, что надо.

Огромное спасибо.

[heyjoe]

Когда первый раз увидел работу gulp - радовался как ребенок, которому фокус показали. Спасибо большое за урок.

[Borykss]

АГОНЬ!!! Прошел весь урок полность в практике, все работает! Спасибо большое, очень полезный контент! За час инфы получаю больше, чем где либо!

[unbelievebleee]

Лучшая инструкция по установке и настройки gulp! Долго искал, читал несколько "КАК ПРОСТО НАСТРОИТЬ GULP" - статей. Но это первая действительно стоящая вещь для новичков которая поможет все настроить. Спасибо большое автору, все подробно и на пальцах.

[MrKaplan]

Настолько подробного объяснения я ещё нигде не встречал!!! Браво мастеру!!

[ownermoney]

спасибо большое! Не часто такие длинные видео досмотришь до конца. Тут же час сорок без проблем)) Пока это лучшая информация, что мне попадалась по gulp. И только теперь решил его внедрить в свою работу ;)

[VMStrannik]

Лучший видео курс по этой теме - как будто с ложечки накормили знаниями! огромное спасибо!

[СергейПустовит-въ]

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

[ОксанаМельник-ыд]

Большое спасибо за урок! "самые маленькие" усвоили его, правда не без заморочек..с выносом мозга, многое не работало по не понятной причине))Смотрела уроки по gulp у других, там вообще ничего не понятно! Так что большое тебе человеческое спасибо!! Побольше маленьких машинок ))

[constantine]

БОЛЬШОЕ СПАСИБО за подробное видео по Gulp! Только начал с ним знакомство, ваш материал помог закрепить приобретенные знания. От себя хотелось бы добавить, что Gulp запускает ваш массив процессов параллельно (это видно по таймингу в cmd), для последовательного запуска можно поставить "плагин" run-sequence.