Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020

Автор: MaxGraph - cайты как страсть

Загружено: 2020-07-20

Просмотров: 33224

Описание:

Привет!
В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является Gulp.

Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое.

В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. Поехали!

ctrl+c два раза - для остановки сборки.

У этого видео есть обновление - добавление новых функций в сборку. Ссылка -    • Gulp. Обновление сборки. Новые фичи и поле...  

Содержание:
00:00 - вступление
01:40 - про Node.js и npm
02:57 - создаем папку проекта
03:26 - открываем консоль в конкретной папке
03:45 - создаем файл package.json
05:10 - установка gulp
09:17 - создаем папку исходников - src
10:24 - создаем файл gulpfile.js для написания тасков
11:28 - работа со стилями
27:47 - вотчинг и browsersync (для стилей)
32:36 - обработка html через file-include (и вотчинг)
42:08 - простая перегонка картинок (пока без обработки)
46:10 - работа с svg-спрайтами
52:19 - работа со шрифтами
1:04:15 - простая перегонка ресурсов
1:07:45 - работа с js (webpack-stream)
1:19:48 - делаем build-версию (сжимаем все сильнее + подключаем tinypng)
1:27:52 - деплой верстки на хостинг
1:32:17 - как пользоваться Gulp на других проектах, как запустить сборку в другом месте
1:34:44 - показываю устройство моих файлов в базовой сборке
1:38:00 - заключение


ВАЖНО! Я изменил сборку совсем чуть-чуть, после видео, когда протестил ее побольше и увидел небольшую проблемку - при любой ошибке js-кода сборка вылетала. Исправление уже есть по ссылке на github ниже. Я добавил следующий код, чтоб ловить ошибки, не убивая сборку:

.on('error', function (err) {
console.error('WEBPACK ERROR', err);
this.emit('end'); // Don't stop the rest of the task
})


Полезные ссылки:
https://clck.ru/Pjikc - исходники из видео на GitHub
https://nodejs.org/en/ - сайт node.js
https://gulpjs.com/ - сайт gulp
  / gulp-webpack-jquery   - по настройке webpack-stream

Использованные плагины:
https://www.npmjs.com/package/browser...
https://www.npmjs.com/package/babel-l...
https://www.npmjs.com/package/del
https://www.npmjs.com/package/gulp-au...
https://www.npmjs.com/package/gulp-cl...
https://www.npmjs.com/package/gulp-fi...
https://www.npmjs.com/package/gulp-no...
https://www.npmjs.com/package/gulp-re...
https://www.npmjs.com/package/gulp-sass
https://www.npmjs.com/package/gulp-so...
https://www.npmjs.com/package/gulp-sv...
https://www.npmjs.com/package/gulp-ti...
https://www.npmjs.com/package/gulp-tt...
https://www.npmjs.com/package/gulp-tt...
https://www.npmjs.com/package/gulp-ug...
https://www.npmjs.com/package/gulp-util
https://www.npmjs.com/package/vinyl-ftp
https://www.npmjs.com/package/webpack
https://www.npmjs.com/package/webpack...

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.


Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat


#обучение #gulp #верстка

Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#8464 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "Hh1aDoWMJXA" ["related_video_title"]=> string(89) "Gulp 2024, полное руководство, современный синтаксис" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(13) "От 0 до 1" } [1]=> object(stdClass)#8437 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "D_HW-tvyKKE" ["related_video_title"]=> string(147) "Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> string(50) "ВебКадеми | Юрий Ключевский" } [2]=> object(stdClass)#8462 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "OGJX0VBEjKQ" ["related_video_title"]=> string(172) "АСЛАНЯН: Причина убогости АвтоВАЗа. Купите Аляску? Илон Маск похоронил электромобили / МАШИНЫ" ["posted_time"]=> string(23) "7 часов назад" ["channelName"]=> string(29) "Ходорковский LIVE" } [3]=> object(stdClass)#8469 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "R9DTbDA_ZVE" ["related_video_title"]=> string(51) "Webpack. Базовая сборка проекта" ["posted_time"]=> string(21) "4 года назад" ["channelName"]=> string(42) "MaxGraph - cайты как страсть" } [4]=> object(stdClass)#8448 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "qSZvGlIKGPg" ["related_video_title"]=> string(165) "Gulp сборка 2023 с нуля | Установка настройка и запуск — полный курс по Gulp для верстки сайтов" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> string(9) "CodeQuest" } [5]=> object(stdClass)#8466 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "nkAlxzTuf2I" ["related_video_title"]=> string(86) "Декодер. Игра гения (2024, фильм) Decoded | Dram, Historical film" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> string(23) "Doctor Smile Azerbaijan" } [6]=> object(stdClass)#8461 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "D4v_d95Nwew" ["related_video_title"]=> string(129) "⚡️Путин согласился на встречу с Зеленским || Срочное обращение Кремля" ["posted_time"]=> string(24) "11 часов назад" ["channelName"]=> string(23) "Время Прядко" } [7]=> object(stdClass)#8471 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "blWdjRUPP6E" ["related_video_title"]=> string(72) "Разведчик о том, как использовать людей" ["posted_time"]=> string(25) "2 недели назад" ["channelName"]=> string(18) "Коллектив" } [8]=> object(stdClass)#8447 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "SBqOLUJEgC0" ["related_video_title"]=> string(71) "Путин встретился с главами мировых СМИ" ["posted_time"]=> string(24) "11 часов назад" ["channelName"]=> string(13) "AKIpress news" } [9]=> object(stdClass)#8465 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "ODl2iCkIPpg" ["related_video_title"]=> string(143) "Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(13) "От 0 до 1" } }
Gulp 2024, полное руководство, современный синтаксис

Gulp 2024, полное руководство, современный синтаксис

Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы

Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, авто-префиксы

АСЛАНЯН:  Причина убогости АвтоВАЗа. Купите Аляску? Илон Маск похоронил электромобили / МАШИНЫ

АСЛАНЯН: Причина убогости АвтоВАЗа. Купите Аляску? Илон Маск похоронил электромобили / МАШИНЫ

Webpack. Базовая сборка проекта

Webpack. Базовая сборка проекта

Gulp сборка 2023 с нуля | Установка настройка и запуск — полный курс по Gulp для верстки сайтов

Gulp сборка 2023 с нуля | Установка настройка и запуск — полный курс по Gulp для верстки сайтов

Декодер. Игра гения (2024, фильм) Decoded | Dram, Historical film

Декодер. Игра гения (2024, фильм) Decoded | Dram, Historical film

⚡️Путин согласился на встречу с Зеленским || Срочное обращение Кремля

⚡️Путин согласился на встречу с Зеленским || Срочное обращение Кремля

Разведчик о том, как использовать людей

Разведчик о том, как использовать людей

Путин встретился с главами мировых СМИ

Путин встретился с главами мировых СМИ

Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite

Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]