Gulp.JS — это менеджер задач, написанный на JavaScript, предназначенный для оптимизации рутинных задач веб-разработки. В этом уроке мы рассмотрим установку Gulp 4 и подготовку среды для работы.
Что такое Gulp.JS?
Gulp.JS — это task manager, упрощающий выполнение повторяющихся операций в веб-разработке. Существует более 3500 плагинов, расширяющих его функциональность. Gulp.JS позволяет автоматизировать такие задачи, как:
- Минимизация CSS и JavaScript;
- Удаление неиспользуемого кода;
- Тестирование файлов;
- Автоматическая конвертация Sass в CSS;
- Добавление префиксов к CSS-свойствам;
- Автоматическое обновление страницы браузера после изменения кода.
Установка Gulp.JS
Для работы с Gulp.JS необходим npm (Node Package Manager).
1. Установка Node.js и npm
Установите Node.js с официального сайта. После установки Node.js, npm будет доступен автоматически.
2. Текстовый редактор
Рекомендуется использовать редактор Atom (доступен для Windows и macOS).
3. Подготовка рабочей среды
Создайте рабочую папку (например, «www»). В Atom, установите плагин platformio-ide-terminal (Preferences > Install) для работы с терминалом внутри редактора.
4. Проверка версий Node.js и npm
Проверьте установленные версии в терминале:
node -v
npm -v5. Установка Gulp CLI глобально
Установите Gulp CLI глобально:
npm install -g gulp-cli6. Создание проекта и файла package.json
Создайте файл package.json командой npm init. Примите значения по умолчанию или настройте их по необходимости.
7. Установка Gulp.JS в проект
Установите Gulp.JS в проект:
npm install --save-dev gulpВ случае конфликта имен (например, если проект назван «gulp»), переименуйте проект и повторите команду.
8. Файл gulpfile.js
Создайте файл gulpfile.js. В этом файле будет располагаться код, определяющий задачи Gulp.JS.
В этом уроке мы установили Gulp.JS и подготовили рабочую среду. В следующих уроках мы начнём создавать и настраивать задачи для автоматизации процессов веб-разработки.