Скачать с ютуб Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020 в хорошем качестве

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

Привет! В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является 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 #верстка