Gulp pug

Gulp pug смотреть последние обновления за сегодня на .

Add-on Lesson 2 - Automated Pug file compilation with Gulp

511
13
6
00:14:06
03.01.2022

Playlist: 🤍 How to set up Gulpfile automation to compile your Pug project automatically. Gulpfile.js at the end of the lesson: 🤍 The website www-dot-webinaction-dot-co-dot-uk is no longer active. If you find my videos helpful feel free to buy me a coffee at 🤍

Gulp + Pug em 5 minutos

2576
38
18
00:05:02
17.04.2017

Trabalhando com Pug através do Gulp em apenas 5 minutos.

Собери свою сборку на Gulp 4. Часть 2. Настройка Gulp-pug.

15141
361
74
00:09:45
03.10.2017

Всем привет. В интернете очень много видео с общим описанием системы сборки и автоматизации задач Gulp, но посмотрев данные видео все-таки также сложно настроить шаблон под себя. В данном видео мы разберемся как установить и настроить плагин gulp-pug Собери свою сборку на Gulp4 🤍 Не ограничивай себя видеоуроками на YouTube! Узнавайте еще больше полезной информации! 👍👍👍Telegram-чат: 🤍 Telegram-канал: 🤍 VK: 🤍 - Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

#16 Работа с Pug в Gulp, HTML Шаблонизатор Pug - Курс по Gulp 4 [2021]

685
29
17
00:05:32
18.01.2022

Работа с Pug в Gulp 4 это просто. HTML Шаблонизатор Pug позволяет писать код очень быстро. А работа с Pug на Gulp 4 настраивается в пару шагов. В этом уроке мы добавим в наш сборщик Gulp возможность работать с препроцессором/шаблонизатором Pug для упрощения работы с HTML. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #gulp #pug #itdoctor #gulp4

Gulp 4 - PUG + SASS + purgeCSS

3928
144
30
00:20:18
29.05.2020

👉SIGUEME EN TWITCH 🤍 👈 👉Obtén VENTAJAS EXCLUSIVAS!! 🤍 👈 👉SUSCRÍBITE para no perderte nada 🤍 👈 Comunidad de Discord 👇 🤍 📶Mis cursos en udemy al mejor precio 🤍 📶 🎨Tema visual studio code: 🤍 🎨 Repositorios en Github: 🤍 Utilizar import y export en node: 🤍 🏷️Curso de REACT 2020: 🤍 ☕ Apoya el canal donando por paypal, cualquier aporte por pequeño que sea ayuda. Muchas gracias. 🤍 📢 Únete a la comunidad de discord! 🤍 ⚡Repositorios en Github: 🤍 Mi setup: ⌨️ Teclado: 🤍 🎤 Micrófono 🤍 🐭 Ratón 🤍 🎞️ 32GB de RAM: 🤍 🧩 Placa base: 🤍 🎰 Procesador: 🤍 🖼️ Tarjeta Gráfica:🤍 Mis redes sociales: 💬 Facebook - 🤍 🐦Twitter - 🤍

Gulp + Sass + Pug + BrowserSync - Automatizar tareas

2937
80
20
00:23:41
11.08.2019

Aprende como configurar Gulp para automatizar la compilación de pug y sass. Espero que el video les sea de ayuda, como ya saben si tienen alguna duda, la dejan en la caja de comentarios. El pedido de videos y las dudas las respondo cuando tengo tiempo libre, sean pacientes plz

GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

127452
4978
1269
01:46:29
22.12.2021

Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp? Самостоятельно конвертирует и подключает шрифты, а также записывает подключение в файл стилей. Обновляет браузер. Собирает в один несколько HTML\PUG файлов. Работает с CSS препроцессорами, например SASS(SCSS) и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов с помощью WEBPACK, оптимизирует и сжимает их. Есть возможность работать в синтаксисе ES6. Умеет создавать SVG спрайты, создавать ZIP архив с результатом, Отправлять готовую верстку на FTP сервер и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! Если возникает ошибка: "[HTML] Error: Callback called multiple times"... Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов. 🔴 Скачать готовую сборку (патреон, любой уровень): 🤍 Спасибо за поддержку бесплатного обучающего контента! 🔴 Функция определения WEBP 🤍 ➕ Плагины от зрителей: gulp-cache, gulp-sharp-responsive 🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: 🤍 ✅ Набор на курс по верстке: 🤍 🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): 🤍 👉 Настройка редактора VS CODE: 🤍 🔴 Карта канала: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Курс по верстке: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 00:00:00 - Что умеет Gulp? 00:00:40 - Подготовка к работе. NodeJS, GIT Bush 00:03:16 - Создание Package.json. Включаем ES6 модули. 00:04:58 - Установка GULP. Глобально и в проект 00:06:42 - Структура файлов и папок. Архитектура сборки 00:10:23 - Копирование файлов 00:16:45 - Настройка наблюдателя (watch) 00:20:31 - Очистка папки с результатом 00:22:51 - Обработка HTML/PUG файлов 00:46:09 - Локальный сервер. Автообновление страницы. 00:49:59 - Обработка SASS/SCSS/CSS файлов 01:03:14 - Обработка JavaScript файлов. WEBPACK 01:10:15 - Оптимизация картинок. Создание WEBP 01:17:36 - Конвертация шрифтов. Запись в файл стилей. 01:25:49 - Создание SVG спрайтов. 01:30:37 - Режимы разработчика (dev) и продакшн (build) 01:37:03 - Создание ZIP архива с результатом 01:39:47 - Выгрузка результата на сервер по FTP 01:44:20 - Использование Gulp сборки для нового проекта 01:46:21 - Заключение 👉🤍IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - 🤍 👉🤍СЛУШАЙ! Канал с интересными историями из жизни. 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 #обучение #gulp #фрилансерпожизни 🤟 Живи, а работай в свободное время! ©

[ Gulp Arabic Tutorial 14 ] Gulp Plugins | 10 PUG/JADE Using Gulp-pug

431
30
4
00:05:11
13.03.2017

how to convert your pug/jade code into HTML using gulp-pug

🔥 Верстка сайта с нуля для начинающих | Pug, SCSS, VS Code, Figma

32407
984
137
02:14:30
03.04.2021

✅ CloudLite - 🤍 Промокод ANNBLOK дает скидку 50% на месяц аренды любого тарифа VDS или VDC (кроме тарифа VDS Linux Light). ⚡️ Макет можно получить через донат: 1) по подписке (доступ ко всем макетам) 🤍 2) по подписке (доступ ко всем макетам) 🤍 3) разовая оплата через крипту с получением одного макета 🤍 (в комментариях напишите email) ✌️ Материалы видео: Демо - 🤍 Адаптив от участника конкурса - 🤍 Pug - 🤍 CSS Gradient - 🤍 👇 Плагины для установки VS Code: - Live Server - Live Sass Compiler - pug - Path Intellisense Расширение для браузера PerfectPixel для наложения макета. ⚡️ Таймкоды: 00:00:00 Вступление 00:00:46 Реклама CloudLite 00:03:14 Промокод в подарок 00:03:30 №1 Подготовка проекта 00:14:45 №2 Верстка шапки сайта 00:39:21 №3 Верстка баннера 01:14:21 №4 Верстка контента 02:07:02 №5 Верстка подвала сайта 02:13:16 №6 Адаптив сайта 🔵 Instagram — 🤍 🔵 TikTok — 🤍 🔵 ВК — 🤍 🔵 Telegram — 🤍 🔵 Чат Telegram — 🤍 Задать вопрос про фронтенд или верстку — 🤍 Обучение по подписке - 🤍

Gulp 4 сборка для верстки сайтов. Gulp 4 + Pug + SCSS + BrowserSync + Linters

7637
255
55
00:28:27
30.03.2020

Всем привет. В данном видео я расскажу вам о своей новой сборке Gulp 4. Сборка - 🤍 Плейлисты моего канала, которые также могут быть вам интересны Верстка сайта #10. PSD 2 HTML . Верстка сайта по продаже строительных материалов - 🤍 Chrome DevTools - 🤍 Учим программирование через игры - 🤍 Верстка интернет - магазина - 🤍 Собери свою сборку на gulp4 - 🤍 Секреты Frontend Разработчика - 🤍 Практикум JavaScript - 🤍 Основы JavaScript - 🤍 Не ограничивай себя видеоуроками на YouTube! Узнавайте еще больше полезной информации! 👍👍👍Telegram-чат: 🤍 Telegram-канал: 🤍 VK: 🤍 - Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

#3 Gulp сборка проекта | pug, pug-linter

1678
49
10
00:12:39
22.02.2021

Материалы урока Код: 🤍 npm i gulp-pug gulp-plumber 🤍zoxon/emitty pug-lint save-dev Ссылки урока gulp-pug: 🤍 gulp-plumber: 🤍 emitty: 🤍 🤍zoxon/emitty: 🤍 пример emitty: 🤍 pug-lint: 🤍 настройки pug-lint: 🤍 Инкрементальная компиляция Pug-файлов: 🤍 Инкрементальная компиляция с emitty: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp #pug #pug-lint Таймкоды: 0:00 Интро 0:14 gulp-pug 3:36 gulp-plumber 4:31 emitty 9:33 pug-lint

Gulp v4 - Sass and BrowserSync setup

78962
2715
403
00:29:29
20.02.2019

In this video I look at how we can setup a gulp build that will compile Sass for us, and automatically sync all changes to html, sass files, and JS files, on save using BrowserSync. Save your file, and the page is updated. So nice! If you're coming from a previous version of Gulp, you may have noticed that the upgrade to v4 brought in some breaking changes, which is never fun. Instead of creating tasks, we now create functions, but other than that most things are still the same luckily :) - Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: 🤍 I have a newsletter! 🤍 New to Sass, or want to step up your game with it? I've got a course just for you: 🤍 - My Code Editor: VS Code - 🤍 How my browser refreshes when I save: 🤍 - Support me on Patreon: 🤍 I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: 🤍 Twitter: 🤍 Codepen: 🤍 Github: 🤍

Frontend Gulp workflow with SCSS and PUG

1692
20
3
00:03:56
01.06.2020

👉Kết nối với mình Fanpage: 🤍 Facebook: 🤍 Blog: 🤍 Source code download: 🤍

Gulp Task Automation for Beginners

96698
1689
106
00:21:27
24.07.2018

You will learn how automate all your web development tasks with Gulp. In this video we will be compiling Sass files to CSS and then minifying the CSS for production. 🔗Install node: 🤍 🔗Install Gulp: 🤍 Install Gulp Packages: 🔗Sass: 🤍 🔗Css uglify: 🤍 🎶Music by: Nicolai Heidlas Music - With you 🤍 ⭐️Tutorial from iEatWebsites. Check out their channel for more great tutorials: 🤍 Learn to code for free and get a developer job: 🤍 Read hundreds of articles on programming: 🤍 And subscribe for new videos on technology every day: 🤍

#Pug Изучаем Pug(HTML) c использованием webpack и gulp сборки для верстки

1794
26
9
00:38:15
06.09.2019

Pug — это шаблонизатор и html-препроцессор, написанный на javascript для node.js. Pug имеет целый ряд преимуществ по сравнению с обычным HTML, в этом мини уроке мы пройдем основу, так же сегодня будем использовать новый метод разработки создания страниц сайта - это использования сборщика проекта в связке webpack + gulp Все вопросы пишите в комментариях = ссылка на гит репозиторий откуда брать сборку проекта - 🤍 ссылка на оф. документацию Pug - 🤍 ссылка на онлай генератор из HTML в PUG - 🤍 ссылка на bootstrap 🤍

Jade / Pug Tips in 90 Seconds - #5 The Gulp Task

6874
54
10
00:01:32
13.05.2016

We can finally write our gulpfile to compile Jade to HTML - This video is part of the "Jade / Pug Tips in 90 Seconds" series: #1 Series Intro 🤍 #2 Getting Started 🤍 #3 Workflow Setup - npm and Gulp 🤍 #4 Folder Structure 🤍 #5 The Gulp Task 🤍 #6 Gulp Watch 🤍 #7 Syntax Overview 🤍 #8 Syntax Part II 🤍 #9 Variables 🤍 #10 Iteration 🤍 #11 Template Composition 🤍 #12 Append & Prepend 🤍 #13 Mixins 🤍 #14 Navigation Module, Part I 🤍 #15 Navigation Module, Part II 🤍

How to setup and using PUGJS with Gulp

604
13
2
00:16:09
23.10.2017

Halo jon. Bagi kalian yang sllicing psd to html pasti sangat membutuhkan plugin satu ini, dengan pugjs kita bisa dengan mudah membuat template menjadi modular. Hasil build dari command gulp serve:dist akan masuk ke folder dist dan berupa file .html. Link Web Starter Kit : 🤍 Link PUGJS : 🤍 Untuk kalian yang butuh tutorial atau ada pertanyaan langsung tulis komentar dibawah.

Jade / Pug Tips in 90 Seconds - #6 Gulp Watch

5108
59
25
00:01:47
14.05.2016

This is the last video about setting up gulp, I promise! We are adding a watch task that will re-run the jade task each time a jade file is saved, so we don't have to do it manually. - This video is part of the "Jade / Pug Tips in 90 Seconds" series: #1 Series Intro 🤍 #2 Getting Started 🤍 #3 Workflow Setup - npm and Gulp 🤍 #4 Folder Structure 🤍 #5 The Gulp Task 🤍 #6 Gulp Watch 🤍 #7 Syntax Overview 🤍 #8 Syntax Part II 🤍 #9 Variables 🤍 #10 Iteration 🤍 #11 Template Composition 🤍 #12 Append & Prepend 🤍 #13 Mixins 🤍 #14 Navigation Module, Part I 🤍 #15 Navigation Module, Part II 🤍

GULP установка настройка и плагины в 2022. Gulp 4 полный курс

8815
386
61
02:30:17
12.02.2022

Gulp - это планировщик задач и сборщик проектов. GULP умеет обновлять браузер, собирать в один несколько HTML или PUG файлов. Также Gulp работает с CSS препроцессорами, например LESS, SASS, STYLUS и оптимизирует их. Сжимает изображения и многое другое. GULP установка настройка и плагины в 2022. Gulp 4 полный курс. В этом уроке по Gulp мы будем работать с менеджером пакетов NPM в редакторе кода VS Code, инициализировать проект с помощью Node.js и создавать конфигурационный файл package.json, установим Gulp глобально и локально, научимся устанавливать и подключать NPM плагины в наш проект. Создадим базовую версию сборки проекта на Gulp, которая позволит нам обрабатывать стили, скрипты и отслеживать изменения в этих файлах автоматически. Сборка и настройка проекта Gulp в 2022 году это минимум который должен знать любой frontend разработчик или даже верстальщик. Так же я покажу, как повторно использовать готовую сборку в своих новых проектах размещу её на GitHub и вы в любой момент сможете скачать код настроенного Gulp проекта. Мы расширим возможности нашего сборщика Gulp и добавим возможность сжимать изображения, минифицировать HTML код, так же добавим несколько полезных плагинов для работы со стилями и скриптами. Улучшим вывод информации в терминал и настроим автоматическое обновление сайта при изменении любых файлов в нашем проекте. Я покажу как настроить плагины для работы с препроцессорами Sass, Stylus, Pug и языками Type Script и Coffee Script. После подведения итогов данного курса у вас будет полное понимание как работать с Gulp, как добавить что то в эту сборку или изменить её под себя, а так же вы получите готовый код сборки финальной версии нашего планировщика задач Gulp. ▶▶ Содержание◀◀ 00:00:00 gulp что это и установка gulp 4 00:05:38 Установка Node.js 00:13:10 Инициализация проекта NPM init 00:22:41 gulp плагины и npm пакеты 00:35:34 Константа с путями 00:42:17 Обработка стилей 00:54:12 gulp watch 01:02:53 Обработка скриптов 01:12:43 Повторное использование сборки 01:25:40 gulp 4 babel, autoprefixer, sourcemaps 01:37:04 Плагин Imagemin 01:44:08 Плагин HTMLmin 01:48:17 Плагин Size 01:51:25 Gulp Newer 01:56:21 gulp 4 browsersync 02:08:27 Работа с Pug 02:13:18 Препроцессор Stylus 02:16:55 настройка gulp sass 02:20:49 Язык TypeScript 02:25:02 Компиляция CoffeeScript 02:27:53 Итоги урока по Gulp 4 ▶▶ Функционал нашей GULP сборки ◀◀ - компиляция препроцессора PUG - минификация HTML, CSS, JavaScript - компиляция препроцессоров LESS, SASS, STYLUS - автоматическое добавление префиксов CSS - транспиляция языков Type Script и Coffee Script - преобразования кода ECMAScript 2015 + в обратно совместимую версию JavaScript с - помощью Babel - объединение нескольких файлов JavaScript в один - сжатие изображений - отслеживание новых изображений, которые еще не были сжаты - отслеживание изменений в файлах и автоматический запуск повторной обработки - генерация sourcemaps - отображение размеров файлов в терминале - локальный сервер с автоматическим обновлением страницы при изменении файлов ▶▶ GULP плагины из урока ◀◀ gulp Сборщик Gulp gulp-htmlmin Минификация HTML файлов gulp-pug Pug препроцессор HTML кода gulp-less Компиляция Less файлов gulp-stylus Компиляция Styl файлов sass Компилятор Sass gulp-sass Компиляция Sass и Scss файлов gulp-uglify Сжатие и оптимизация Java Script кода gulp-coffee Преобразует Coffee Script в Java Script gulp-typescript Преобразует Type Script в Java Script typescript Язык Type Script gulp-babel Преобразует Java Script в старый стандарт 🤍babel/coreЯдро Babel 🤍babel/preset-env Пресет для компиляции Babel gulp-clean-css Минификация и оптимизация CSS файлов del Удаление каталогов и файлов gulp-sourcemaps Карта строк кода для инструментов разработчика gulp-autoprefixer Автоматическое добавление префиксов в CSS gulp-imagemin Сжатие изображений gulp-concat Объединение нескольких файлов в один gulp-newer Отслеживание только новых файлов gulp-rename Переименовывает файлы gulp-size Отображение информации о размерах файлов в терминале browser-sync Автоматическое обновление сайта при изменении файлов Готовая сборка Gulp 4: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp4 #gulp #gulpbuild #itdoctor

【初学者向け】gulpについて解説!?現役フロントエンジニアの話

2661
47
2
00:12:32
22.11.2020

gulpファイルって何?!現役エンジニアが解説!という話をさせて頂きました。 Gulpってよく聞くけどわからないって人多いですよね。 なので、今回は簡単に実戦も含めてお話をしてみましたので、よろしくお願い致します。 【日常チャンネル】 🤍 UberEats: eats-pzftx2 #まっつんぱっつん #現役エンジニア Onlineサロンの入会方法 ーー条件ーー 1.チャンネル登録をしている 2.Twitterのフォロー ーー方法ーー 1.DMからサロンに入りたい旨を伝えて頂ければ、順次対応します。 ツイッター: 🤍imajin8280 [slackというコミュニケーションツールを紹介] 🤍 [環境構築について] part1:🤍 [初めてのHTMLについて] 🤍 [初めてのCSSについて] 🤍 [初めてのGITについて] 🤍 javascriptが分かれば大体の事はできる説 🤍 7payから学ぶセキュリティの重要性【解説編】 🤍 【自己分析について】 🤍 【タスク管理について】 🤍 【ajax通信】 🤍 【アジャイル開発とは何か】 🤍 【ウォーターフォールモデル開発について】 🤍 【ウォーターフォールモデルとアジャイル開発のメリットデメリット】 🤍 【なぜ仕様変更を嫌がるエンジニア、プログラマーが多いのか】 🤍 【Vuejsの環境構築】 🤍 【expressの環境構築】 🤍 【SESのメリット】 🤍 【SESのデメリット】 🤍 【タスク管理とは】 🤍 【trelloの使い方】 🤍 【wrikeのガントチャートや使い方の解説】 🤍

Моя сборка для верстки: Gulp + Webpack. Инструмент для ускорения работы верстальщика

4810
170
69
00:55:08
10.10.2021

В данном видео хочу продемонстрировать свою сборку для верстки сайтов. Данные сборки позволяют здорово экономить время за счет того, что выполняют за нас некоторые рутинные задачи. Например, компиляция препроцессорами pug и sass в html и css файлы соответственно, сборка иконок в спрайты, оптимизация изображений, автообновление страницы браузера и др. Данную сборку вы можете скачать с моего Github репозитория - 🤍 Там же найдете инструкцию в текстовом формате. Я постарался описать как можно подробнее, начиная с возможностей и завершая установкой и работой. Тайминги: 0:00 Вступление 03:15 Установка 06:08 Запуск и стартовый шаблон 07:18 Структура проекта 17:51 Автообновление страницы при изменении файлов 19:38 Компонентный подход 22:08 Автосоздание компонентов при помощи bem-tools-create 24:55 Сборка иконок в спрайты 30:38 Проверка js кода на наличие ошибок Eslint и автофикс 35:03 Конвертация изображений в webp формат 39:12 Минимизация файлов Html, Css и Js 41:38 Задача по удалению папки Dist 43:06 Автогенерация фавиконок 47:44 Создание ZIP-архива проекта 50:10 Копирование файлов по FTP 54:38 Заключение Фоновая музыка: –––––––––––––––––––––––––––––– First Light - Atch 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Over You - Atch 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Oceanside by Scandinavianz 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Song: Markvard - Desire (Vlog No Copyright Music) Music provided by Vlog No Copyright Music. Video Link: 🤍

Full beginner Gulp setup for SCSS, minifying Javascript, and minifying/webp images

11523
375
128
00:19:46
18.03.2021

I'll show you how to convert, autoprefix, and minify SCSS, minify javascript, and minify and create webp images with Gulp. Type one command in your terminal ('gulp') and focus on writing SCSS, JS, and adding images. Gulp will do the rest! We use a variety of plugins: • gulp-sass (convert SCSS to CSS) • gulp-autoprefixer (add support for older browsers) • gulp-clean-css (minify CSS) • gulp-terser (minify JS—support for ES6) • gulp-imagemin (minify images jpg and png for the web) • gulp-webp (create webp images for the web) Please like and subscribe for more content. And let me know in the comments what else you’d like me to cover! Source code: 🤍

[Khoá học Gulp-Pug-SCSS] Buổi 7

29
0
0
00:40:37
13.06.2021

Cách fix lỗi trong responsive

Оптимизация и работа с изображениями при помощи gulp pug

34
1
0
00:30:00
16.07.2019

1. Покажу скрипт скрипт оптимизации изображений на сборке gulp4 2. Покажу вывод изображения через picture 3. Раскажу о полифалах для корректного работы с тегом picture и css свойством object-fit

Gulp 4.0 Tutorial 2020 | Concat & Minify Your CSS and JS

23249
578
84
00:14:11
13.04.2020

Documentation: 🤍 If you are lazy like me and are always on the watch out of how you can optimize your workflow as a web developer this is the right video for you. Today we are going to learn what Gulp is and how you can use it to avoid boring repetitive steps especially in regards to deploying a html css javascript website. Before we start, around two years ago gulp updated from version 3 to version 4. If you see code on stack overflow or somewhere else on the internet like this, where there is no function statement in the beginning. This is the old syntax which most probably is not going to work with Gulp 4. So either install gulp 3 or learn here how it’s done with gulp version 4. So what is Gulp, Gulp says: gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. It’s also called toolkit or task runner A couple of practical examples can be, with gulp you can automate image optimization, copy files, rename files, uglify CSS or concatinate Javascript files with just a command in the terminal. Alternative To Gulp, even if not directly, are Grunt, Webpack or direct npm scripts. 1. npm init 2. Install Gulp Globally 3. CD in the project folder 4. Install Gulp as dev dependency 5. Create Gulpfile.js 6. Import gulp and deconstruct variables. 7. Let's go... CONTACT: 📱 Facebook - 🤍 🌎 Website - 🤍 📧 Email - contact🤍dev-world.info ABOUT THIS CHANNEL: Dev World is a mix of tutorials and educational videos around Coding, Online Marketing, and Design. #Coding #Webdesign #Marketing

Jade / Pug Tips in 90 Seconds - #3 Workflow Setup - npm and Gulp

10266
70
3
00:01:37
06.05.2016

In this video, we'll start a brand new project from the command line. We'll create a package.json manifest and install gulp and gulp-jade. If you want to learn more about using the command line, I highly recommend the excellent 🤍 free course by Wes Bos. - This video is part of the "Jade / Pug Tips in 90 Seconds" series: #1 Series Intro 🤍 #2 Getting Started 🤍 #3 Workflow Setup - npm and Gulp 🤍 #4 Folder Structure 🤍 #5 The Gulp Task 🤍 #6 Gulp Watch 🤍 #7 Syntax Overview 🤍 #8 Syntax Part II 🤍 #9 Variables 🤍 #10 Iteration 🤍 #11 Template Composition 🤍 #12 Append & Prepend 🤍 #13 Mixins 🤍 #14 Navigation Module, Part I 🤍 #15 Navigation Module, Part II 🤍

Hướng dẫn cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass cùng Evondev

120
0
2
00:03:28
05.10.2021

#evondev #thiet_ke_web #hoc_html_css Hướng dẫn cắt PSD sang HTML CSS toàn tập với Gulp, Pug, Sass cùng Evondev Học trọn bộ video tại đây: 🤍 Giới thiệu khóa học Khóa học Tự học thiết kế website hiệu quả với khoá học HTML CSS từ cơ bản tới nâng cao cho người mới Chào các bạn, mình xin giới thiệu các bạn khóa học Tự học thiết kế website hiệu quả với khoá học HTML CSS từ cơ bản tới nâng cao cho người mới. Khóa học này với hơn 100 videos trong khoá học Tự học thiết kế web bằng HTML/CSS của evondev sẽ dạy các bạn đi từ kiến thức cơ bản nhất cho đến nâng cao thông qua các videos kèm bài tập mỗi chương, các bài tập thực tế và các tài liệu tự học thiết kế web cho người mới bắt đầu. Ngoài ra evondev còn chia sẻ thêm cho các bạn những kiến thức liên quan bổ sung như cách tư duy, định hướng, phân tích giao diện, cách dùng phần mềm code hiệu quả, cách cải thiện mắt thẩm mỹ UI UX...Từ đó các bạn có thể tự tay code các giao diện từ A-Z với kiến thức về HTML CSS đã học mà không cần phải dùng bất kỳ thư viện nào. Khóa hướn dẫn bạn thiết kế website online cho người mới bài bản nhất. hãy đăng kí ngay hôm nay. QUYỀN LỢI KHI THAM GIA KHÓA HỌC: Nắm vững chắc các kiến thức cơ bản về HTML, các thẻ trong HTML – HTML5, cách đặt tên theo chuẩn BEM, học cách sử dụng Class Id và các attributes khác của HTML một cách chỉn chu từ đầu Học về tư duy, định hướng học, cách tự học tốt, cách luyện tập cho mau lên trình Nắm vững kiến thức về dàn giao diện với Flexbox thông qua ví dụ thực tế Học được cách phân tích thiết kế cho đến khi hoàn thiện giao diện Sử dụng thẻ HTML đúng đắn, lúc nào dùng thẻ này lúc nào dùng thẻ kia Hiểu về Responsive để xử lý giao diện ở nhiều loại màn hình một cách tốt nhất có thể Học, tìm hiểu và sử dụng SASS toàn tập để viết function, mixins, sử dụng biến, lồng code để hỗ trợ cho việc code CSS một cách nhanh nhất Biết thêm các công cụ, tiện ích, các trang web bổ ích hay hỗ trợ công việc một cách tốt nhất để nâng cao hiệu suất làm việc Nắm vững CSS Selectors và Combinators để làm chủ các bộ chọn trong CSS Và rất nhiều điều, kiến thức bổ ích khác đang chờ đợi các bạn Tự học thiết kế web bằng HTML Học HTML/CSS cơ bản qua bài tập thực tế Tự học HTML CSS trong 30 ngày Tài liệu tự học thiết kế website Học thiết kế web cho người mới bắt đầu Học thiết kế web online miễn phí Tự học thiết kế website bán hàng Tác giả: Evondev Học trọn bộ video tại đây: 🤍 Hoặc cần tư vấn hay cần khóa học nào bạn có thể liên hệ qua Liên hệ với mình qua zalo: 🤍 Liên hệ với mình qua fb: 🤍

pug con gulp

26
0
0
00:27:35
02.10.2017

🤍 🤍 🤍

HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный курс. Часть 1

12560
499
45
01:21:08
22.03.2021

Хватит мучиться с HTML кодом! Освойте простой и очень гибкий язык разметки Pug! В этой части мы изучим все основные возможности языка Pug, а также научимся быстро создавать эффектные прототипы разметок. Для освоения материала достаточно базовых знаний HTML и JavaScript. ➡️ Следующая часть: 🤍 📂 Материалы ролика: • Редактор CodePen: 🤍 • GitHub репозиторий с примерами: 🤍 🔗 Полезные ссылки • Официальный сайт Pug (документация с примерами): 🤍 • Pug на npm: 🤍 • Pug на GitHub: 🤍 📜 Содержание: 0:00 Вступление 1:38 Чем плох HTML? 3:06 Что такое Pug? 3:26 Преимущества Pug 3:53 Знакомство с редактором CodePen 5:58 Теги 8:45 Атрибуты 9:49 Классы и идентификаторы 10:56 Тег div 12:30 Комментарии 13:57 Пример: Красивое сообщение 19:43 Блоки JavaScript кода 21:50 JavaScript внутри тегов 23:39 Неэкранированный JavaScript внутри тегов 24:17 JavaScript в атрибутах 25:31 Неэкранированный JavaScript в атрибутах 26:15 Javascript в атрибутах и внутри тегов 27:18 Встраивание JavaScript в контент 28:32 Условия. if ... else 29:56 Условия. case ... when 31:29 Цикл while 33:09 Цикл each по массивам 35:12 Цикл each по объектам 36:37 Атрибуты без значения 37:54 Атрибуты через объект 39:18 Продвинутая работа с классами 41:28 Пример: Радуга 47:48 Пример: Массив сообщений 57:00 Понятие миксина 58:27 Миксины без параметра 59:30 Миксины с параметрами 1:02:01 Пример: Акцент-блок. Начало 1:04:10 Ключевое слово block 1:05:26 Пример: Акцент-блок. Завершение 1:08:23 Атрибуты миксина 1:11:16 Пример: Много сообщений через миксин 1:14:45 Пример: Рекурсивный миксин 1:20:23 Заключение #pug #pugjs #html #javascript #js

Ejemplo de pug, gulp y bootstrap 5

11
2
0
00:00:33
06.03.2021

#Ejemplo de #pug, #gulp y #bootstrap 5 #código en 🤍 #programacionparaaprender #programacion #diseño #cursos #educacion #educación #venezuela #perú #chile #brasil #brazil #arab #india #persian #windows #microsoft #linux #udemy #google

Generate a local HTML file with PUG (npm / gulp) - HTML

2
0
0
00:01:08
17.05.2022

Generate a local HTML file with PUG (npm / gulp) - HTML [ Glasses to protect eyes while coding : 🤍 ] Generate a local HTML file with PUG (npm / gulp) - HTML Disclaimer: This video is for educational purpose. The video demonstrates the study of programming errors and guides on how to solve the problem. Note: The information provided in this video is as it is with no modifications. Thanks to many people who made this project happen. Disclaimer: All information is provided as it is with no warranty of any kind. Content is licensed under CC BY SA 2.5 and CC BY SA 3.0. Question / answer owners are mentioned in the video. Trademarks are property of respective owners and stackexchange. Information credits to stackoverflow, stackexchange network and user contributions. If there any issues, contact us on - solved dot hows dot tech #GeneratealocalHTMLfilewithPUG(npm/gulp)HTML #Generate #a #local #HTML #file #with #PUG #(npm #/ #gulp) #- #HTML Guide : [ Generate a local HTML file with PUG (npm / gulp) - HTML ]

Что такое Gulp и зачем это нужно?

13818
467
12
00:08:35
12.06.2019

Весь курс по Gulp будет здесь, если будет много желающих: 🤍

Назад
Что ищут прямо сейчас на
gulp pug mac ile dałbym fish4ever джой джой лика Devops даздурк room makeover vaaya moodra channel prank fissa usb microphone Zmysło sad melody Enna Solla Pogirai audio launch pugazh speech садовый мир brusko minican vs feelin mini гаргантос ersa music galaxy s21 fe 5g АвтоРынок