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 #верстка