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

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

В этом уроке мы установим Node.js научимся проверять его версию и версию менеджера пакетов NPM. Начнем работу с Gulp, установим его и создадим новый проект.

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

В этом уроке я покажу как устанавливать любые плагины в наш проект. Мы установим плагин для работы с препроцессором less и плагин для удаления файлов del.

В этом уроке мы создадим константу на языке JavaScript в которую запишем пути к нашим файлам проекта, а так же пути где будут храниться преобразованные файлы проекта. Так же создадим файл index.html и подключим к нему стили с скрипты.

В этом уроке мы создадим задачу (task) для обработки стилей которые мы можем писать на препроцессоре Less. Так же весь преобразованный код из Less в CSS будет минифицироваться и иметь суффикс .min в названии.

В этом уроке мы настроим задачу watch, которая будет следить за изменениями в наших файлах стилей и скриптов. Если эти файлы будут изменены то Gulp автоматически перезапустит все задачи для обработки стилей и скриптов повторно. Так же мы разберемся как создать задачу из последовательного или параллельного выполнения нескольких других задач.

В этом уроке мы настроим задачу для обработки скриптов. Мы подключим плагин Babel, который будет транспилировать Java Script код написанный на новых стандартах в более старый для поддержки старыми браузерами. Подключим uglify для оптимизации и минификации кода, а также concat для конкатенации нескольких файлов в один результирующий файл скриптов.

В этом уроке я покажу как можно загрузить свой код сборки на GitHub и как повторно использовать однажды написанный код Gulp в любых ваших проектах. Вам не обязательно уметь работать с Git и GitHub вы можете просто использовать код из моего репозитория.