Планировщик задач Gulp

Преподаватель
Ismail Useinov
Категория:
Программирование
Document

Описание

В этом видео курсе вы изучите работу с Gulp. Продолжительность курса около 3 часов. В курсе для вас подготовлен 21 видео урок. Обязательно изучите все дополнительные материалы прикрепленные к урокам. Курс состоит из 3 глав, в которых вы научитесь работать с Gulp.

Что будет на курсе

В первой главе мы будем работать с менеджером пакетов NPM, инициализировать проект с помощью Node.js и создавать конфигурационный файл package.json, установим Gulp глобально и локально, научимся устанавливать и подключать NPM плагины в наш проект

Расширим возможности нашего сборщика и добавим возможность сжимать изображения, минифицировать HTML код, так же добавим несколько полезных плагинов для работы со стилями и скриптами.

Создадим базовую версию сборки проекта на Gulp, которая позволит нам обрабатывать стили, скрипты и отслеживать изменения в этих файлах автоматически.

Улучшим вывод информации в терминал и настроим автоматическое обновление сайта при изменении любых файлов в нашем проекте.

Настроим плагины для работы с препроцессорами Sass, Stylus, Pug и языками Type Script и Coffee Script.

После подведения итогов данного курса у вас будет полное понимание как работать с Gulp, как добавить что то в эту сборку или изменить её под себя, а так же вы получите готовый код сборки финальной версии нашего планировщика задач Gulp.

Для кого подходит курс

Для начинающих веб разработчиков

Для разработчиков желающих оптимизировать и ускорить свою работу

Что вы будите изучать на этом курсе?

  • Планировщик задач Gulp
  • Работу с NPM
  • Подключение плагинов Node JS
  • Командную строку
  • Настройку сборщика проекта Gulpfile

Требования

  • Базовые знания HTML и Java Script

Как проходит обучение

Видеоуроки

После покупки курса вам будут доступны видеоуроки с подробным объяснением необходимой теории

Практика

В ходе обучения будет практическая работа, которая необходима для наработки навыков и закрепления изученного материала

Связь с преподавателем

Если в процессе обучения, у вас появились вопросы, вы можете их легко задать преподавателю

Пожизненный доступ

Все обучающие материалы предоставляются вам бессрочно. Вы сможете в любой момент зайти и пересмотреть уроки

Почему стоит обучаться именно у нас

Опыт образовательной деятельности
12 лет

Самая выгодная стоимость курсов среди конкурентов

Профессиональное сообщество по РФ

Методические материалы, практикумы, тестирования

Как приобрести курс и начать прохождение

Пройдите регистрацию в верхнем правом углу страницы
Заполните свои данные
(имя, email, пароль) и нажмите “Регистрация”
После регистрации вы сможете зайти
в свой личный кабинет, нажав кнопку
“Войти” сверху страницы
Определившись с курсом, перейдите на его страницу и
нажмите “Купить”
В корзине будут отображаться выбранные вами курсы. Для
оплаты выберите “Оформить заказ” и заполните данные
После оплаты зайдите в “Учетную запись” вверху страницы
В вашей учетной записи будут отображены доступные вам
курсы. Для начала обучения нажмите “Начать курс”

Глава 1 - Введение в Gulp

1
Трейлер курса
Предпросмотр
2:05

В этом видео курсе вы изучите работу с Gulp. Продолжительность курса около 3 часов. В курсе для вас подготовлен 21 видео урок. Обязательно изучите все дополнительные материалы прикрепленные к урокам. Курс состоит из 3 глав, в которых вы научитесь работать с Gulp.

2
Введение в Gulp
Предпросмотр
5:22
В этом уроке я расскажу что такое Gulp и для чего он нужен. Мы разберемся с тем, как нам поможет Gulp в оптимизации многих процессов и ознакомимся с официальным сайтом Gulp.
3
Установка Node JS
Предпросмотр
7:38
В этом уроке мы установим Node.js научимся проверять его версию и версию менеджера пакетов NPM. Начнем работу с Gulp, установим его и создадим новый проект.
4
Инициализация проекта NPM init
Предпросмотр
9:40
В этом уроке мы научимся инициализировать проект с помощью node.js и создадим конфигурационный файл проекта package.json и установим Gulp локально в наш проект.
5
Пакеты на NPM JS
12:57
В этом уроке я покажу как устанавливать любые плагины в наш проект. Мы установим плагин для работы с препроцессором less и плагин для удаления файлов del.
6
Константа с путями
6:50
В этом уроке мы создадим константу на языке JavaScript в которую запишем пути к нашим файлам проекта, а так же пути где будут храниться преобразованные файлы проекта. Так же создадим файл index.html и подключим к нему стили с скрипты.
7
Обработка стилей в Gulp
11:59
В этом уроке мы создадим задачу (task) для обработки стилей которые мы можем писать на препроцессоре Less. Так же весь преобразованный код из Less в CSS будет минифицироваться и иметь суффикс .min в названии.
8
Отслеживание изменений в проекте
8:46
В этом уроке мы настроим задачу watch, которая будет следить за изменениями в наших файлах стилей и скриптов. Если эти файлы будут изменены то Gulp автоматически перезапустит все задачи для обработки стилей и скриптов повторно. Так же мы разберемся как создать задачу из последовательного или параллельного выполнения нескольких других задач.
9
Обработка скриптов в Gulp
9:55
В этом уроке мы настроим задачу для обработки скриптов. Мы подключим плагин Babel, который будет транспилировать Java Script код написанный на новых стандартах в более старый для поддержки старыми браузерами. Подключим uglify для оптимизации и минификации кода, а также concat для конкатенации нескольких файлов в один результирующий файл скриптов.
10
Повторное использование сборки
13:01
В этом уроке я покажу как можно загрузить свой код сборки на GitHub и как повторно использовать однажды написанный код Gulp в любых ваших проектах. Вам не обязательно уметь работать с Git и GitHub вы можете просто использовать код из моего репозитория.
11
Вопросы к главе 1
9 вопросов

Глава 2 - Продвинутая сборка Gulp

1
Autoprefixer, Sourcemaps, Babel
11:30
В этом уроке мы расширим возможности нашей сборки и добавим плагин Autoprefixe для добавления префиксов в CSS код, Sourcemaps чтобы видеть в инструментах разработчика подсказки по коду в исходном файле и завершим настройку Babel.
2
Сжатие изображений в Gulp
7:09
В этом уроке мы настроим работу плагина Imagemin. Данный плагин позволит сжимать изображения в нашем проекте и уменьшить их объем.
3
Минификация HTML в Gulp
4:14
В этом уроке мы подключим плагин HTMLmin, который позволит минифицировать HTML файл. Если вам не нужно этого делать то можно пропустить этот шаг. Но обязательно посмотрите этот урок чтобы знать, как это делается.
4
Размеры файлов в терминале
3:13
В этом уроке мы подключим плагин Size, который будет отображать размер файлов с которыми мы работаем в терминале.
5
Отслеживание только новых файлов
5:02
В этом уроке мы установим плагин Newer. Благодаря этому плагину мы сможем не обрабатывать повторно те файлы которые не изменялись. Особенно это полезно для отслеживания новых изображений. А те изображения которые уже были сжаты нет необходимости сжимать повторно.
6
Авто-обновление в браузере
12:10
В этом уроке мы настроим синхронизацию нашего браузера с кодом. Создадим локальный сервер с помощью Browser Sync и настроим автоматическую перезагрузку сайта при изменении кода в редакторе.
7
Вопросы к главе 2
4 вопроса

Глава 3 - Препроцессоры и языки

1
Работа с Pug
4:57
В этом уроке мы добавим в наш сборщик Gulp возможность работать с препроцессором Pug.
2
Работа с Stylus
3:42
В этом уроке мы добавим в наш сборщик Gulp возможность работать с препроцессором Stylus.
3
Работа с SASS и SCSS
3:58
В этом уроке мы добавим в наш сборщик Gulp возможность работать с препроцессором Sass и Scss.
4
Работа с Type Script
4:18
В этом уроке мы добавим в наш сборщик Gulp возможность работать с языком программирования Type Script.
5
Работа с Coffee Script
2:55
В этом уроке мы добавим в наш сборщик Gulp возможность работать с языком программирования Coffee Script.
6
Заключение
2:15
В этом видео мы подведем итоги курса и вы сможете скачать финальную версию готовой сборки проекта на Gulp и повторно использовать однажды написанный код в любых ваших проектах.
7
Вопросы к главе 3
5 вопросов

Будьте первым, кто оставит отзыв.

Пожалуйста, войдите чтобы оставить отзыв

Похожие курсы

новый
Python
Программирование
Python с нуля
5
5
15 990Р 10 000Р

Python с нуля

5
5 (2)
      Описание Python — идеальный вариант для старта Если вы сомневаетесь в своих способностях и навыках программирования, этот курс...
Начинающий
17 Лекции
15 часов
Предварительный просмотр курса
Добавить в избранное
15 990Р 10 000Р
Добавить в избранное
Купить
Единовременный платеж Оформить подписку
продолжительность: 2 часа 30 минут
Лекции: 22
Видео: 22
Уровень: Промежуточный

Закрепите на Pinterest