#01 Описание и установка Gulp.JS

от 2019 - 09 - 02

Gulp — это таск-менеджер, написанный на JavaScript и служащий для оптимизации рутинных задач.
К примеру, при подключении пакета BrowserSync, Gulp позволяет работать с кодом, автоматически обновляя страницу в браузере. Также Gulp удобен для минимизации CSS и JS кода, удаление неиспользуемого кода, тестирования файлов, добавления префиксов к CSS-свойствам, конвертирования SASS в CSS и ряда других задач.

Для установки Gulp используется пакетный менеджер npm (устанавливается с дистрибутивом Node.js) — см. статью Установка ReactJS и запуск первого приложения.

Настройка проекта и добавление Gulp.js.

Команды для установки представлены на главном экране сайта gulpjs.com, либо их можно посмотреть, перейдя в Getting Started.
Продублируем их ниже.

npm install --global gulp-cli // Глобальная установка Gulp

npx mkdirp my-project // Создаем директорию с новым проектом
cd my-project // и переходим в неё

npm init // Создание файла package.json.

Файл package.json служит для описания проекта. В нем прописывается название проекта, имя автора, зависимости (те плагины, которые подключаются для успешного функционирования проекта).
Далее необходимо указать параметры, которые будут записаны в данный файл:

package name: // Название проекта
version: (1.0.0) // Версия проекта
description: // Описание проекта
entry point: (index.js) // Входная точка или файл, с которого начинается программа
test command: // Тестовая команда
git repository: // Указание git репозитория
keywords: // Ключевые слова
author: // Автор
lisense (ISC) // Лицензия

Файл package.json сформирован, и теперь установим сам пакет Gulp.

npm install --save-dev gulp // Происходит установка всех необходимых файлов и зависимостей для проекта

Если проект по умолчанию называется «Gulp», то в консоли выведется ошибка из-за конфликта имён. Название проекта можно поменять в файле вручную.
В дальнейшем, при загрузке файлов на хостинг, директорию node_modules и файл package-lock.json загружать не надо. Они остаются в локальной версии проекта и нужны для нормального его функционирования.

Создадим в корневой папке проекта файл julpfile.js — в нем будут прописаны все настройки, связанные с Gulp.

Проверим версию Gulp и убедимся, что все работает правильно.

gulp --version