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

0 Просмотры
Издатель

Понравился видеоролик "Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020"? Если да, то напиши свой комментарий и поделись им в соцсетях. Тем самым ты поддержишь наш проект. Спасибо!

Описание видео: Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является 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 - заключение Полезные ссылки: clck.ru/Pjikc - исходники из видео на GitHub nodejs.org/en/ - сайт node.js gulpjs.com/ - сайт gulp medium.com/@artvaleyev/gulp-webpack-jquery-4251c58c8946 - по настройке webpack-stream Использованные плагины: npmjs.com/package/browser-sync npmjs.com/package/babel-loader npmjs.com/package/del npmjs.com/package/gulp-autoprefixer npmjs.com/package/gulp-clean-css npmjs.com/package/gulp-file-include npmjs.com/package/gulp-notify npmjs.com/package/gulp-rename npmjs.com/package/gulp-sass npmjs.com/package/gulp-sourcemaps npmjs.com/package/gulp-svg-sprite npmjs.com/package/gulp-tinypng-compress npmjs.com/package/gulp-ttf2woff/v/0.0.1 npmjs.com/package/gulp-ttf2woff2 npmjs.com/package/gulp-uglify-es npmjs.com/package/gulp-util npmjs.com/package/vinyl-ftp npmjs.com/package/webpack npmjs.com/package/webpack-stream Меня зовут Максим Васянович. Ctrl+c два раза - для остановки сборки. Понравилось? clck.ru/Gr9Ec Моя страница вконтакте: vk.com/maxdenaro Мой блог: blog.maxgraph.ru Мой сайт: maxgraph.ru Канал в телеграм: teleg.run/maxgraph Чат для верстальщиков: teleg.run/maxgraph_chat #обучение #gulp #верстка... В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Поехали! Привет! Фрилансер уже 5 лет, создал более 50 коммерческих сайтов.

Официальный источник видео youtube.com/watch?v=Hc5ivLLxV4Q именно от туда подгружается разрешенный автором к встраиванию контент и картинки. Авторские права полностью соблюдены!

Категория
Секс фотки



Яндекс.Метрика