Одну секунду
Что-то сучилось. Попробуйте еще раз.
Gulp 4 смотреть последние обновления за сегодня на .
Обновленная начальная сборка по gulp 4. Создал сборку для дальнейшего масштабирования и верстки проектов на канале. Видео о препроцессорах: 🤍 Node: 🤍 Gulp: 🤍 npm: 🤍 git: 🤍 Мой патреон: 🤍 0:40 Что такое Gulp 3:17 Как установить Gulp 17:38 Как установить Gulp локально 20:30 Создание структуры папок 26:32 Установка плагина gulp-sass и sass 40:24 Установка плагина gulp-concat 44:40 Установка плагина gulp-uglify-es 52:00 Добавление функции watch 57:06 Установка плагина browsersync 1:10:20 Добавление функции parralel 1:17:00 Установка плагина gulp-autoprefixer 1:22:50 Как поключить несколько файлов js 1:29:55 Как подключать css из библиотек 1:34:45 Как настроить билд 1:39:05 Установка плагина gulp-clean 1:42:30 Добавление функции series 1:47:18 Как использовать сборку на практике Подпишитесь на канал, если вам понравилось данное видео: 🤍
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
🔥 Learn more with my Gulp for Beginners course! 🤍 Get the files from this project from my GitHub repo: 🤍 0:00 - Intro 0:25 - Install Node.js 0:43 - Install Gulp CLI, create package.json, and install npm packages 3:22 - Create gulpfile.js file and import packages 7:36 - Create Sass task 10:00 - Create JavaScript task 11:17 - Create Cachebust task 15:33 - Create Watch task 17:12 - Create default Gulp task 19:09 - Add SCSS and JS files, and folders for workflow 22:53 - Testing the Gulp workflow! _ SUPPORT THE CHANNEL ⭐ Join channel members and get perks: 🤍 👏🏽 Hit the THANKS button in any video! 🎨 Get my VS Code theme: 🤍 WANT TO LEARN WEB DEV? Check out my courses: 🌟 Responsive Design for Beginners: 🤍 🌟 Gulp for Beginners: 🤍 RECOMMENDATIONS ⌨ My keyboard get 10% off with code THECODERCODER 🤍 💻 Other gear 🤍 📚 My Favorite Books 🤍 📺 My Favorite Courses 🤍 🔽 FOLLOW CODER CODER Blog 🤍 Twitter 🤍 Instagram 🤍 #webdevelopment #coding #programming
Создание сайта от А до Я (комплексный курс): 🤍 Создание интернет-магазина от А до Я: 🤍 Создание крутого слайдера (+посадка на CMS): 🤍 Все курсы в одном комплекте: 🤍 Всем привет, друзья! Это обновленное и переработанное руководство Gulp 4, в котором мы детально разберем работу с Gulp, ознакомимся с новыми методами построения задач (тасков), вы узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. По традиции, мы будем знакомиться с возможностями инструмента на реальном примере и создадим удобное рабочее окружение для HTML верстки от А до Я. Страница урока: 🤍 ВКонтакте: 🤍 Телеграм: 🤍 Дзен: 🤍
gulp js task runner javascript Gulp.js Tutorial Getting Started With Gulp js learn gulp.js gulp.js how to compile sass to css how to minify js file how to use gulp js
Друзья, обновил старое видео по gulp 4, использую новый, более удобный, современный синтаксис. Записал вам пошаговое руководство и советы, как обновить свою сборку. Видео о препроцессорах: 🤍 Node: 🤍 Gulp: 🤍 npm: 🤍 browser-sync: 🤍 Тайм-коды: 0:00 Приветствие 1:20 Что такое gulp 2:57 NodeJs (🤍 4:28 Чем удобен VS CODE 5:09 Способ 1 консоль (Самый удобный) 5:48 Способ 2 консоль (Не самый удобный) 7:37 Рекомендации 8:47 Установка gulp глобально 10:14 NPM ( 🤍 12:17 Если уже установлен Gulp 12:57 Установка gulp в Папку (Не спеши нажимать Enter) 13:51 Инициализация проекта ( init - пишем в первую очередь! ) 16:45 Что такое -save-dev 18:30 Файл package-lock.json 18:50 Папка Node_modules 22:36 Выпьем не много чаю и поехали дальше ^^^ 22:50 Создание gulpfile.js 24:18 Что такое предпроцессоры,смотрите видео по ссылке (Видео о препроцессорах: 🤍 24:52 Что умеет gulp 25:40 Первый Плагин (gulp-sass) 40:35 Что такое конкатенация ? 42:32 Второй Плагин (gulp-concat) 45:38 Watch (Слежение) 51:33 Зачем gulp, если есть VSCODE 55:40 Третий Плагин (browser-sync) 1:13:13 скрипты 1:14:31 Четвертый плагин (gulo-uglify-es) 1:34:13 Пятый Плагин (gulp-autoprefixer) 1:40:00 Таcк build 1:45:00 Шестой плагин (gulp-imagemin) 1:54:40 Седьмой плагин ( del) 2:03:07 Как Работать с другими проектами 2:06:46 Конец Подпишитесь на канал, если вам понравилось данное видео: 🤍
🔥 My course: Responsive Design for Beginners! 🤍 💻 Become a full-stack web dev with Zero to Mastery: 🤍 In this video we will set up a frontend web development workflow for Sass/SCSS using Browsersync and Gulp.is. 0:00 - Intro 0:44 - Set up Node/npm and Gulp CLI 02:41 - Install npm packages 03:35 - Create and configure gulpfile.js 05:09 - Sass and JS Gulp tasks 07:31 - Browsersync Gulp tasks 09:30 - Default Gulp task 10:00 - Watch task and Browsersync reloading 13:14 - Testing the Gulp and task 13:46 - Testing that website is synced with code changes Source code on GitHub: 🤍 _ SUPPORT THE CHANNEL ⭐ Join channel members and get perks: 🤍 👏🏽 Hit the THANKS button in any video! 🎨 Get my VS Code theme: 🤍 WANT TO LEARN WEB DEV? Check out my courses: 🌟 Responsive Design for Beginners: 🤍 🌟 Gulp for Beginners: 🤍 RECOMMENDATIONS ⌨ My keyboard get 10% off with code THECODERCODER 🤍 💻 Other gear 🤍 📚 My Favorite Books 🤍 📺 My Favorite Courses 🤍 🔽 FOLLOW CODER CODER Blog 🤍 Twitter 🤍 Instagram 🤍 #webdevelopment #coding #programming
Обновленное видео, новому синтаксису - 🤍 В видео я полностью объясняю зачем нужен Gulp, показываю тонкости работы с Gulp 4. C абсолютного нуля создаю сборку которую можно использовать для работы над реальными проектами. Подпишитесь на канал, если вам понравилось данное видео: 🤍 Сайт Node: 🤍 Сайт Gulp: 🤍 Урок по scss/sass: 🤍 Видео о сss grid: 🤍 Верстка сайта он начала до завершения: 🤍
Here we walk through upgrading from Gulp 3 to Gulp 4 with the source code to show what we did. We make multiple changes to use functions instead of gulp task and using the new Series/Parallel to organize the tasks rather than using the dependencies from tasks. The articles available on the web generally give you fragments of what you need for an upgrade. I had to piece together multiple sources to make a successful upgrade. Hopefully this video helps someone make the upgrade. Example Repo - 🤍 Gear Used to make this video: Webcam - Logitech HD Pro Webcam C920 🤍 Microphone - Blue Snowball Ice: 🤍 The above are affiliate links that I may receive a percentage of sales from Amazon.
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. Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое. В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. Поехали! ctrl+c два раза - для остановки сборки. У этого видео есть обновление - добавление новых функций в сборку. Ссылка - 🤍 Содержание: 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 }) Полезные ссылки: 🤍 - исходники из видео на GitHub 🤍 - сайт node.js 🤍 - сайт gulp 🤍 - по настройке webpack-stream Использованные плагины: 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #gulp #верстка
Видеокурс по изучению таск-менеджера Gulp JS. В курсе вы научитесь создавать таски, а также оптимизировать веб разработку при помощи Gulp 4. Вы научитесь конвертировать SASS в CSS, автоматически обновлять браузер, минимизировать CSS и делать еще множество других вещей. 1) Курс по Gulp на itProger: 🤍 2) Официальный сайт Gulp: 🤍 3) Официальный сайт Node JS: 🤍 4) Каталог плагинов для Gulp: 🤍 ✔ Сообщество программистов: 🤍 ✔ - Вступай в группу Вк - 🤍 🚀 Группа FaceBook - 🤍 Инстаграм itProger: 🤍 Instagram: 🤍 Telegram: 🤍 Twitter - 🤍 - Уроки от #GoshaDudar 👨🏼💻 - Все уроки по хештегу #goshaGulp
Article ► 🤍 Abonnez-vous ► 🤍 La version 4 de gulp changent certains fonctionnements afin de le rendre plus simple à utiliser et simplifie notamment la composition de tâches. Soutenez Grafikart: Devenez premium ► 🤍 Donnez via Utip ► 🤍 Retrouvez Grafikart sur: Le site ► 🤍 Twitter ► 🤍 Discord ► 🤍
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: 🤍
Это максимально подробный большой видеоурок по настройке с нуля Gulp 4 для начинающих, в нём по шагам объясняется, как правильно и без ошибок установить и настроить сборщик (таскраннер) Gulp. Изучив данный курс вы получаете свою собственную понятную сборку Gulp, мы разберём, как работает gulpfile.js, как устроен package.json и многое другое. После изучения курса, вы сможете сами создавать удобные сборки Gulp для любых ваших задач, и сможете понимать, как всё устроено в конфигурационных файлах. Сборка обновлена и построена на основе устаревшей сборки Gulp Дмитрия Валака (канал BrainsCloud), с объяснением и уточнением многих моментов. В этом видео: 0:00 Что такое Gulp и зачем он нужен 4:30 Установка Node JS 6:52 Установка Git Bash 9:49 Как установить Gulp глобально 10:51 Создание папки для Gulp-проекта 12:15 Создание Package.json | Начальная настройка 16:28 Создание Gulpfile.js 19:20 Установка модулей/плагинов для Gulp 19:55 Плагин Gulp-Autoprefixer | Установка и зачем он нужен 22:14 Плагин Gulp-CSSBeautify | Установка и зачем он нужен 23:21 Плагин Gulp-Strip-CSS-Comments | Установка и зачем он нужен 24:16 Плагин Gulp-Rename | Установка и зачем он нужен 25:21 Плагин Gulp-Sass | Установка и зачем он нужен 25:40 Ошибка Gulp-Sass | Решение ошибки 27:25 Плагин Gulp-CSSnano | Установка и зачем он нужен 28:08 Плагин Gulp-Rigger | Установка и зачем он нужен 29:14 Плагин Gulp-Uglify | Установка и зачем он нужен 29:30 Плагин Gulp-Plumber | Установка и зачем он нужен 30:22 Плагин Gulp-Imagemin | Установка и зачем он нужен 31:02 Ошибка Gulp-Imagemin | require is not defined in ES module 33:17 Плагин Del | Установка и зачем он нужен 33:54 Ошибка плагина Del 34:43 Плагин Panini | Установка и зачем он нужен 35:31 Плагин BrowserSync | Установка и зачем он нужен 36:16 Удобная структура проекта 39:15 Сonst Path | Настройка путей к папкам проекта 49:51 Таск HTML | Настройка GULP-Тасков 58:07 Таск CSS | Настройка GULP-Тасков 1:07:31 Таск JS | Настройка GULP-Тасков 1:13:43 Таск IMAGES | Настройка GULP-Тасков 1:20:01 Таск CLEAN | Настройка GULP-Тасков 1:24:10 Таск FONTS | Настройка GULP-Тасков 1:25:01 Одновременный запуск тасков | Настройка Build | Gulp.series 1:28:11 Таск WATCH | Настройка слежения за изменениями | Gulp.parallel 1:33:45 Настройка BrowserSync | Live Reload | Локальный сервер 1:39:33 Gulp-Nofify | Красивое отображение ошибок | Установка, настройка 1:45:23 Плагин Panini | Как установить, настроить 1:48:20 Плагин Panini | Шаблоны, разбиение HTML на части | Layouts Partials 1:55:41 Плагин Panini | Как работать с Data JSON 1:59:03 Перенос настроек Gulp в новый проект 2:03:59 Заключение
In this video, I’m going to show you how to install Gulp JS version 4 and create your first Gulp task to start using it. Do you prefer reading the textual version of this? Link to the Article: 🤍 Table of Contents: 00:00 Introduction 00:18 Check Node.JS and NPM Installation 00:33 Clone the GitHub Project 01:28 Initialise an NPM Project 01:50 Install Gulp JS 02:26 Create gulpfile.js 02:45 Create a Gulp JS Task 03:08 Run the Gulp Task GitHub Repository: 🤍 #GulpJS #JavaScript #WebDevelopment
В этом уроке я расскажу что такое Gulp и для чего он нужен. Мы разберемся с тем, как нам поможет Gulp в оптимизации многих процессов и ознакомимся с официальным сайтом Gulp. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Nesse vídeo você aprenderá gulp js de maneira rápida e prática, como criar suas primeiras tasks para minificar os arquivos em tempo real e compilar código SCSS para CSS! 📚 Materiais gratuitos em diversas áreas da programação: 🤍 📚 Minicurso GRATUITO domine a base da web (HTML, CSS e Javascript): 🤍 ✅ Formação Desenvolvedor de Software Full-Stack Completo, que ensina como trabalhar remotamente para grandes empresas ganhando R$4.000,00 por mês ou mais: 🤍 VÍDEOS IMPORTANTES ▶️ Bootcamp Full Stack JavaScript da Cataline Funciona? Veja o Curso por Dentro: 🤍 ▶️ Pacote Full Stack Master da Danki Code vale a pena? Veja o Curso por Dentro: 🤍 ▶️ Programador Full Stack JavaScript One Bit Code Vale A Pena? Veja o Curso por Dentro: 🤍 ▶️ Playlist criando um site completo: 🤍 FALE CONOSCO: 🔒 Grupo de Networking e conteúdos exclusivos no Telegram: 🤍 ❤️ Siga a nossa página no Instagram: 🤍featurecode_ 👍🏼 Siga a nossa fanpage no Facebook: 🤍luis.featurecode Nesse vídeo, você irá aprender em detalhes como aprender gulp js da melhor maneira, rapidamente e de graça! Desenvolvedores web front-end possuem todo um fluxo de trabalho para seus projetos, que envolvem tarefas como compilar CSS de pré-processadores, verificar erros de JavaScript, combinar e minificar assets, otimizar imagens... enfim, tarefas necessárias que fazem parte de qualquer workflow minimamente profissional. A web tem evoluído muito rapidamente e, com essa evolução, novos padrões e preocupações acabaram surgindo. Otimizar imagens, compilar CSS, minificar arquivos e testar o site em diferentes browsers são algumas dessas preocupações. Mas definitivamente essas tarefas são muito repetitivas e nada divertidas. Por sorte, existem os automatizadores, que se encarregam de fazê-las para nós. Este é, precisamente, o caso do Gulp: com a intenção de ajudar na automação de tarefas repetitivas e liberar a mente criativa dos desenvolvedores, é uma das melhores e mais eficientes ferramentas para front-end dos últimos anos. Vantagens de se utilizar o Gulp JS; - É Fácil de usar; - Eficiente; - Alta qualidade; - Fácil de aprender; Este vídeo tem como objetivo fornecer de maneira simples e prática e em detalhes como você pode minificar seus arquivos JavaScript e Css utilizando o gulp e transpilar seu código SASS para ser interpretado pelo navegador! Compartilhe esse vídeo e ajude a comunidade a crescer para trazermos ainda mais dicas para vocês! ▶️ Como Usar o Gulp JS - Tutorial de gulp completo: 🤍
Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! 🔴 ОБНОВЛЕННОЕ ВИДЕО: 🤍 🔴 Готовая сборка GULP из урока (патреон): 🤍 Спасибо за поддержку бесплатного обучающего контента! Уточнения. ☝️imagemin следует оставлять 7й версии! ☝️ UPD 26/06/2021 - Обновился SASS, из-за этого сборки Gulp могут не запускаться. В package.json: "sass": "latest" в gulpfile.js меняем на: scss = require('gulp-sass')(require('sass')); а также: scss({ outputStyle: 'expanded' }).on('error', scss.logError) Обновил файлы шаблонов и сборок. ☝️ У кого проблемы с плагином WEBPCSS нужно установить converter командой - npm install webp-converter🤍2.2.3 save-dev ☝️ Папка проекта не должна называться gulp ☝️ Запускать можно и отдельные функции, например gulp css ☝️ У кого копирует в dist только .jpg попробуйте немного изменить запись форматов с /*.{jpg, png, svg, gif, ico, webp} на /*.+(png|jpg|gif|ico|svg|webp) ☝️ Для WEBP-CSS следует использовать настройки: webpcss({webpClass: '.webp',noWebpClass: '.no-webp'} ☝️ WEBP-CSS выдает ошибку если в названии файла картинки есть пробелы и/или кириллица 👉 Ссылки: NodeJS - 🤍 Gulp - 🤍 Форматы изображений в веб-разработке - 🤍 👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS: 🤍 👉Настройка редактора VS Code: 🤍 Содержание: 00:00 - Вступление 00:58 - Установка Node.js 02:24 - Работа с терминалом (командной строкой) 04:02 - Установка Gulp глобально 04:46 - Создание package.json 06:53 - Установка Gulp в проект 08:21 - Создание gulpfile.js, файлов и папок проекта 10:38 - Первый запуск Gulp 11:21 - Очистка пакетного менеджера (решение проблем) 12:16 - Написание "сценария", создание переменных 19:28 - Обновление браузера 23:24 - Работа с HTML, подключение других файлов 35:20 - Удаление папки с результатом 37:04 - Работа с CSS (SASS/SCSS) 48:25 - Работа с JavaScript файлами 52:34 - Работа с изображениями, конвертация в WEBP 01:05:56 - Работа со шрифтами 01:15:16 - Запуск нового проекта 01:16:52 - Важное напутствие! 👉 Страницы плагинов: BrowserSync - 🤍 File Include - 🤍 Del - 🤍 Sass - 🤍 Autoprefixer - 🤍 Group CSS media-queries - 🤍 Rename - 🤍 Clean CSS - 🤍 Uglify ES - 🤍 Babel - 🤍 Imagemin - 🤍 WEBP - 🤍 WEBP HTML - 🤍 WEBP CSS - 🤍 Fonter - 🤍 ttf2woff - 🤍 ttf2woff2 - 🤍 SVG Sprite - 🤍 👉JS функции и миксин из урока: 🤍 👉Решение проблем: npm cache clean force (очистака npm) npm i npm -g (установка npm) 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Простая сборка проекта для новичков. concat, autoprefixer и cleanCSS. uglify. watcher + browser Sync. Дальнейшее развитие сборок для вёрстки и javascipt присутствует на курсах: 🤍 🤍
В этом уроке мы установим Node.js научимся проверять его версию и версию менеджера пакетов NPM. Начнем работу с Gulp, установим его и создадим новый проект. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Ever wondered how other developers minify their code and add tons of enhancements to their projects or apps? I can tell you a secret; they don’t do it themselves! They use something like gulp to automate that stuff for them. Learn this and more with a free trial! 🤍 Follow along as I show you how I build out a basic gulpfile from scratch using gulpjs. Never heard of gulp before? Not to worry, I’ll take you through the process step-by-step in this beginner guide to setting up a gulpfile. With only a basic knowledge of JavaScript, npm, and Node.js, you’ll be able to follow along comfortably and start automating your workflow like a seasoned developer. If videos aren't your thing or want to take your time to work at your own pace, check out our blog 🤍 GitHub repo: 🤍 gulpjs website: 🤍 Treehouse related courses: JavaScript Basics: 🤍 Node.js Basics: 🤍 npm Basics: 🤍 Chapters: 0:00 Intro to gulpjs 00:53 Starting notes 01:39 Getting started 02:03 Installing dependencies 04:00 Setting up variables and functions 06:20 Directory structure 07:03 Writing the styles function 09:27 Writing the scripts function 10:17 Setting up a watch task 11:39 Exporting functions 12:07 Running the gulpfile 13:03 Testing styles 13:46 Testing scripts 14:30 Outro Learn how to build websites and apps, write code, or start a business at Treehouse. Learn from over 1,000 videos created by our expert teachers on web design, coding, business, and much more. Treehouse teaches the in-demand technology skills you need to land your dream job.
На сайте есть готовая сборка 🤍 которая помогает многим. Но у некоторых всё же возникают вопросы по поводу установки под разные системы. Это видео поможет решить многие вопросы. Рекомендую посмотреть установку для двух систем, т.к. в Windows я демонстрирую установку на компьютер, на котором еще не был установлен ранее Git и NodeJS, а в разделе про MacOS - показываю внутреннее содержание файлов в редакторе кода. Github репозиторий сборки — 🤍 Купить ежедневник Frontend Book — 🤍 Задать вопрос фронтендеру бесплатно — 🤍 Сайт — 🤍 ВК — 🤍 Instagram — 🤍 Telegram — 🤍 Чат Telegram — 🤍 Курсы и марафоны — 🤍 Отзывы - 🤍
Addy and Matt are back with Season 3 and heaps more insightful tips! In this episode, Addy and Matt walk through Gulp 4, a big update to the popular task running which introduces improvements like gulp.series for running tasks in order and gulp.parallel for running tasks in parallel. Watch more episodes of Totally Tooling Tips here: 🤍 Links for this episode: Early docs: 🤍 Final docs will be at GulpJS.com when released. Web Starter Kit: 🤍 run-sequence: 🤍 gulp.parallel and gulp.series: 🤍 Migrating to Gulp 4 by example: 🤍 Subscribe to the Chrome Developers channel at 🤍
👉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: 🤍 🏷️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 - 🤍
:: Support Me :: 🤍 🤍 🤍 Try SkySilk VPS: 🤍 Check out Elementor: 🤍 NordVPN: 🤍 :: Join the Forum :: 🤍 :: Tutorial Series :: WordPress 101 - Create a theme from scratch: 🤍 WordPress Premium Theme Development: 🤍 WordPress Mega Menu: 🤍 Learn SASS from Scratch: 🤍 Design Factory: 🤍 Affinity Designer: 🤍 :: My Website :: 🤍 :: Follow me on :: Twitter: 🤍 Google+: 🤍 Facebook: 🤍
Combine the fish catching profile of a Jerkshad and the enticing tail action of a grub and you get the Berkley Gulp! Nemesis. Designed in Australia, the Nemesis shape is available in a 4” size. The tail action of this shape has to be seen to be believed. On the drop or on the wind, the Nemesis tail swims at the slowest of speeds delivering continuous lifelike action. Being waterbased each Nemesis is loaded with Berkley’s exclusive Gulp! scent and flavour formula, a powerful scent dispersion system that also makes Gulp! 100% biodegradable.
Keep Gulp running watching files for changes and then run tasks with Gulp Watch. Subscribe to Level Up Pro for extra features! 🤍 Subscribe to the Level Up Newsletter 🤍 For questions post in the comments or visit: 🤍 To Support Level Up Tuts: 🤍 Simple cloud hosting, built for developers.: 🤍
Várias pessoas me procuraram porque tiveram problemas na hora de rodar o Gulp devido as versões diferentes no tutorial e em seu computador. Se você também utilizou as sintaxes do Gulp 3 e encontrou algum erro da hora de rodar o comando Gulp com o Gulp 4 instalado em seu computador este vídeo pode te ajudar. Também provavelmente a mensagem de erro que você viu foi: "Task function must be specified" No final deste vídeo você saberá como resolver este problema. Repositório no GitHub: 🤍 Ajude a manter o canal: 🤍
In this video we can use ready 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. Git repository for ready code click on below the link :- 🤍 Step - 00 : Install Node.js latest version "🤍" this link to download. Step - 01 : [Install the gulp command line utility] : npm i gulp-cli -g Step - 02 : npm i [ node modules installation. If package json file already created so just use this command "npm i" ] Step - 03 : After installing all plugins just add the last command for the gulp task call. " gulp " [Note : Run Project]
Серия контента по верстке сложного пакета, использую сборку на gulp 4 и препроцессор scss. Макет нарисован в figma, дизайнер постарался с интерактивными элементами, так что нам будет что делать и над чем подумать. Велком и приятного просмотра. Макет: 🤍 Gulp сборка: 🤍 Телеграм канала: 🤍 ссылка на канал если в ваше стране блочат телеграм: 🤍 Телеграм чат по верстке: 🤍 ссылка на чат если в ваше стране блочат телеграм: 🤍 Вк канала: 🤍 Мой instagram: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
This is completely updated tutorial video on Gulp 4.0 with NodeJS, BrowserSync, SASS, SourceMaps, CleanCSS , AutoPrefixer, Gulp Changed, Gulp Uglify and more. My previous videos have been rendered obsolete since Gulp has been updated from 3.9 to 4.0. That's the beauty of software development, it keeps you on your toes. Code Your Very Own WordPress Theme with DevWP: 🤍 Code for your Gulpfile and Links to More Resources: 🤍 I felt it was my duty to create a new Gulp 4.0 video featuring some of the most widely used Gulp Plugins. This is an Advanced Gulp tutorial video that I make approachable for beginners as well as advanced users. I demonstrate how to create a gulpfile and a package json file along with how to use gulp to streamline your workflow and save you a tremendous amount of time. Gulp is a toolkit for web designers and developers to help automate their workflow. It's usage has continuously grown over the years and with almost 4,000 gulp plugins available, it's no wonder Gulp is one of the most popular task runners. Gulp uses NodeJS which is server side JavaScript used by a growing number of web developers. In this video I showcase several useful Gulp plugins like: 1 - Browser Sync 2 - Image Min 3 - Gulp Sass 4 - Gulp Source Maps 5 - Gulp Concat 6 - Gulp Clean CSS 7 - Uglify for JavaScript Minification 8 - Line Ending Corrector 9 - and more Table of Contents: Unproductive Workflow 00:52 Gulp Plugins Used 05:08 Start The Actual Tutorial 05:46 Node 06:55 Remove Old Gulp Version 08:45 Install Gulp 4 Globally 09:16 Make a Directory for Gulp & Node 09:55 Package JSON File 10:42 Gulp Local Project Installation 11:42 Install Gulp Plugins: 13:18 Creating the Gulpfile.js 22:56 Testing our Gulpfile 01:02:42 If you've found yourself running out of time with your coding projects, or spending to much time on very simple, basic but time consuming tasks, then using Gulp JS will make you a more productive web designer and developer. My goal is to help you achieve your goal of becoming a productive coder. Hopefully you enjoyed this Gulp 4.0.0 tutorial for beginners and advanced users. #gulp #gulpjs #gulp4
👉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: 🤍 🎨 🏷️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 будет здесь, если будет много желающих: 🤍
In this video I’m going to show you how to compile (convert) SASS/SCSS files to CSS and then, minify (minimize) and bundle (combine) generated CSS files into a single CSS file automatically every time you change a SCSS file. Chapters: 00:00 Intro 00:17 Project Setup 00:47 Create a Gulp Task to Compile SASS Files (using gulp-sass) 01:37 Run the Gulp Task Automatically (using Gulp watch) 02:23 Minify Generated CSS Files (using gulp-clean-css) 02:50 Generate Source Map for CSS Files (using gulp-sourcemaps) 03:21 Combine CSS Files into a Single CSS File (using gulp-concat)
Get Elementor Pro: 🤍 :: Support Me :: 🤍 🤍 🤍 Try SkySilk VPS: 🤍 Check out Elementor: 🤍 NordVPN: 🤍 :: Join the Forum :: 🤍 :: Tutorial Series :: WordPress 101 - Create a theme from scratch: 🤍 WordPress Premium Theme Development: 🤍 WordPress Mega Menu: 🤍 Learn SASS from Scratch: 🤍 Design Factory: 🤍 Affinity Designer: 🤍 :: My Website :: 🤍 :: Follow me on :: Twitter: 🤍 Google+: 🤍 Facebook: 🤍
В этом уроке мы создадим задачу (task) для обработки стилей, которые мы можем писать на препроцессоре Less. Так же весь преобразованный код из Less в CSS будет минифицироваться и иметь суффикс .min в названии. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Gulpjs series where I go over the basic content: ⦾ intro ⦾ gulp tasks ( series & parallel ) ⦾ compiling SCSS ⦾ cleaning/minifying CSS ⦾ compiling JS ⦾ cleaning/minifying JS ⦾ File watchers ⦾ browsersync slides: 🤍 repo: 🤍 docs: gulp-sourcemaps: 🤍
Серия контента по верстке сложного пакета, использую сборку на gulp 4 и препроцессор scss. Макет нарисован в figma, дизайнер постарался с интерактивными элементами, так что нам будет что делать и над чем подумать. Велком и приятного просмотра. Макет: 🤍 Gulp сборка: 🤍 Видосы по Gulp: ч1 - 🤍 ч2 - 🤍 Видос по препроцессору: 🤍 Телеграм канала: 🤍 ссылка на канал если в ваше стране блочат телеграм: 🤍 Телеграм чат по верстке: 🤍 ссылка на чат если в ваше стране блочат телеграм: 🤍 Вк канала: 🤍 Мой instagram: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
.svg){kind=small}
![#1 Введение в Gulp - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/xv7_eNqd_eQ/mqdefault.jpg "#1 Введение в Gulp - Курс по Gulp 4 [2021]")
![#2 Установка Node.js - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/qIMv7rjT8ik/mqdefault.jpg "#2 Установка Node.js - Курс по Gulp 4 [2021]")
![#6 Обработка стилей в Gulp - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/NvwxZzqPESs/mqdefault.jpg "#6 Обработка стилей в Gulp - Курс по Gulp 4 [2021]")
