Установка gulp: Установка | Gulp

Установка node + gulp для Windows 10

Первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. Через команду npm, мы в дальнейшем установим и сам Gulp. В контексте работы с Gulp, мы будем использовать этот многофункциональный инструмент node js, как пакетный менеджер.

Установка node js

Скачиваем на сайте nodejs.org стабильную версию Node, рекомендованную для большинства пользователей. Система автоматически определит вашу операционную систему и выдаст подходящую ссылку на скачивание.

После скачивания запускаем установщик и делаем все, как на скриншотах.

Когда установщик закончит свою работу, откроется консоль и вы увидите следующее.

Как запустить консоль Windows 10 PowerShell

Работа на платформе node js ведется через npm команды, вводимые в консоль. У Windows 10

имеется встроенная консоль PowerShell, чтобы консоль запустилась, нужно зайти в папку проекта и зажав сочетание клавиш CTRL+SHIFT, выбрать из контекстного меню «Открыть окно PowerShell здесь».

Узнать версию node js

Для того чтобы убедится установился ли node js, проверяем его версию. Вводим в консоли команду node -v, если в ответ вы увидите название версии v.12.16.1, значит все в порядке. Делает такую же проверку и для npm. Команда npm -v должна вернуть номер версии 6.13.4. Все проверяемые номера версий актуальны на момент выхода этой статьи, у вас скорее всего будут уже другие номера версий.

Установка Gulp под Windows 10

Переходим на сайт gulpjs, запускаем в консоли команду npm install gulp-cli -g. Данная команда устанавливает Gulp глобально, то есть запускать его можно из любой папки на компьютере.

Вроде как Gulp установился, но при проверки версии gulp -v, мы видим следующую картину. Что-то пошло не так.

Ошибка при установки Gulp

Система нам говорит (смотрим сообщение в консоли), что невозможно загрузить файл (gulp.ps1 cannot be loaded because running scripts is disabled) и предлагает почитать статью на сайте Microsoft о Политиках исполнения. Из статьи становится понятно, что политика выполнения PowerShell практикуется только на платформах Windows. Блокируется запуск скриптов с расширением .ps1. Что делать в таком случае? Меняем дефолтные настройки Windows через командную строку PowerShell.

1. Запускаем PowerShell от имени администратора
2. Проверяем текущие параметры для политики выполнения: Get-ExecutionPolicy -List
3. Устанавливаем требуемый уровень (меняем политику выполнения) Set-ExecutionPolicy -Scope LocalMachine Unrestricted
4. Проверяем версию Gulp, если после ввода gulp -v, вы видите CLI version: 2. 2.0, значит установка прошла успешно.

Существенное дополнение

Если вы пишите код в редакторе VS Code, то вам вообще не нужна никакая консоль. У редактора имеется встроенный терминал, как раз для ввода различных команд. Больше не надо переключаться между отдельными вкладками, когда все в одном месте.

• Создано 11.03.2020 10:16:42
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Установка и работа с GULP в 2022 — CODE LAB

автор Антон Колесников

Установка и работа с GULP в 2022

GULP — это инструмент для автоматизации рутинных задач по веб-разработке. Причем как во фронтенде, так и в бэкенде. Эта программа написана на языке JS.

GULP — это инструмент для автоматизации рутинных задач по веб-разработке. Причем как во фронтенде, так и в бэкенде. Эта программа написана на языке JS. Мы создаем для нее задания и она их выполняем (task manager).

Чтобы научить Gulp что-то делать надо установить плагины для него.

Типовые задачи, с которыми справится Gulp:

• Минификация кода
• Объединение кода из разных файлов в один
• Использование препроцессоров
• Поддержка новых стандартов ES6
• Создание ZIP-архива с результатом
• Отправка файлов на FTP
• Оптимизация изображеней (WebP)

Работать с Gulp мы будем в одном из самых популярных редакторах VS Code.

Чтобы узнать больше про Gulp читайте эту серию статей на нашем сайте.

Навигация по статье

Шаг 1. Устанавливаем Node.JS

Первым делом скачиваем и устанавливаем Node.js. Он понадобится нам для работы с Gulp.

https://nodejs.org/ru/

Шаг 2. Установить и настроить Git в VS Code

Если у вас на компьютере еще не установлен Git, то подробную статью вы можете найти по ссылке на моем сайте.

Шаг 3. Запускаем VS Code с правами админа

Для этого кликнете правой кнопкой мыши по ярлыку и выберите Свойства. В свойства перейдите во вкладку Совместимость и сделайте галочку для Запускать программу от имени администратора.

Шаг 4. Создать папку проекта и открыть ее в VS Code

Тут думаю справитесь сами 🙂

Шаг 5. Настройка терминала в VS Code

Нажимаем правой кнопкой мыши в разделе EXPLORER и выбираем Open in integrated Terminal.

Откроется терминал, далее мы должны переключить его на профиль GIT Bash.

Нажимаем на стрелку вниз на терминале и выбираем Select Default Profile.

Далее в выпадающем списке выбираем GIT Bash. После чего перезапускаем VS Code.

GIT Bash — это приложение для Windows, которое позволяет эмулировать работу командной строки GIT.

Шаг 6. Переносим папку Gulp в свой проект

Скачайте архив с настройками Gulp GIT Hub. А затем распакуйте этот архив в папке со своим проектом.

Шаг 7. Установить Gulp глобально и в проект

Первая команда установит Gulp глобально, в консоли пишем:

npm i gulp-cli -g

Глобально Gulp устанавливается только один раз, в ту систему, где он еще не установлен.

Далее устанавливаем gulp локально, для нашего проекта:

npm i gulp-cli -D

Шаг 8. Устанавливаем пакеты Gulp

После того как вы скопировали файлы из архива в терминале VS Code вводим комманду npm i и начнется установка всех нужных пакетов пакетов.

Установка глотка

Курс содержит ссылку на официальную документацию по началу работы здесь. Я проведу вас через это.

Примечание. При выполнении команд npm на терминале на Mac вы можете начать получать ошибки разрешений, которые требуют, чтобы вы предшествовали своим командам, например, sudo sudo npm install --global gulp-cli . Это один из способов сделать это. Многим это не нравится по той или иной причине (об этом есть масса сообщений в блогах). Я рекомендую ознакомиться с этим сообщением StackOverflow, которое дает вам несколько вариантов исправления этого..

Установка Gulp шаг за шагом

• Проверка узла и npm

  • В терминале введите node --version

    Это проверяет, какая версия Node у вас установлена. «Node — это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript на стороне сервера». Википедия. В нашем случае это просто означает, что он может запускать некоторые действительно крутые и полезные инструменты для нас.

  • В терминале введите npm --version

    То же, что и выше, только это npm — диспетчер пакетов узла. Итак, в Node есть все эти классные инструменты, но может быть сложно следить за ними, обновлять их, запускать, организовывать их и т. д. Npm дает нам способ справиться со всем этим.

• Установите команду gulp

  В терминале введите npm установить --global gulp-cli

  Хорошо, давайте разберем это.

  Мы используем npm, менеджер пакетов, для установки.

  Мы устанавливаем его глобально (—global), это означает, что он будет доступен на всем нашем компьютере, а не только в папке нашего проекта.

  Теперь обратите внимание, что в нем говорится, что мы устанавливаем команду gulp . Мы устанавливаем это, чтобы мы могли запускать gulp в нашей командной строке или терминале.

  Посмотрите на конец этой строки кода, там написано не просто «глоток», а «глоток-кли». CLI обычно означает интерфейс командной строки. Итак, мы устанавливаем интерфейс с gulp в командной строке.

• Создайте файл package.json

  У вас есть несколько способов сделать это.

  • Мой предпочтительный способ: В терминале, в корне каталога проекта, введите npm init Он задаст вам несколько вопросов, а пока вы можете просто нажимать Enter на каждом из них. Значения по умолчанию будут работать нормально для вас.
  • Через терминал без настройки: просто введите touch package.json
  • В редакторе кода просто создайте файл с именем package.json
• Установите gulp в свои devDependencies

  Если вы хотите следить за видео и не вносить никаких изменений, используйте для этого этот код: npm install --save-dev gulp

  Проекты могут иметь зависимости (вещи, на которые они полагаются для работы) в различных «этапы» проекта. Обычно делится на производство , разработка и тестирование . С помощью --save-dev мы сообщаем npm, что наш проект зависит от глотка, но только пока он находится в разработке. Проекту не потребуется запускать Gulp после того, как он будет подключен к сети, таким образом, иметь его там было бы расточительно.
  gulp@next указывает npm установить более позднюю версию. В настоящее время устанавливается gulp устанавливает версию 3.9.1. Установка gulp@next устанавливает версию 4.0.0
  npm install --save-dev gulp@next

Глоток | Документация WebStorm

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

Задачи Gulp.js можно запускать из дерева задач в специальном окне Gulp Tool или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. WebStorm показывает результат выполнения задачи в окне инструмента «Выполнить». Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.

Прежде чем начать

Убедитесь, что на вашем компьютере установлен Node.js.

Установка Gulp.js

Чтобы использовать Gulp в проекте WebStorm, вам потребуются два пакета:

• Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.

• Пакет gulp, установленный как зависимость разработки для построения дерева задач проекта и предоставления помощи в написании кода при редактировании файла Gulpfile. js. Узнайте больше о Gulpfile.js на официальном сайте Gulp.js.

Глобальная установка gulp-cli

Установка Gulp.js в проекте

Запуск задач Gulp.js из дерева задач

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

Gulp.js начинает строить дерево задач, как только вы вызываете Gulp.js, выбрав «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструментов «Проект» или Gulpfile.js, открытом в редакторе. Дерево строится в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если у вас в проекте несколько файлов Gulpfile.js, вы можете построить для каждого из них отдельное дерево задач и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево показано под отдельным узлом.

Технически WebStorm вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Это делается бесшумно и не требует никаких действий с вашей стороны.

Открытие окна инструмента Gulp

При первом построении дерева задач в течение текущего сеанса WebStorm окно инструмента Gulp еще не открывается.

По умолчанию WebStorm не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.

Построить дерево задач из ES6 Gulpfile.js

1. В главном меню выберите «Выполнить | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.

2. В узле Шаблоны щелкните Gulp.js.

3. В открывшемся диалоговом окне «Конфигурация запуска/отладки: Gulp.js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

Построить дерево задач из окна инструмента Gulp

• В окне инструмента Gulp щелкните на панели инструментов и выберите из списка нужный файл Gulpfile.js. По умолчанию WebStorm показывает файл Gulpfile.js в корне вашего проекта.

• Если у вас есть другой файл Gulpfile.js, нажмите Choose Gulpfile.js и выберите нужный файл Gulpfile.js в открывшемся диалоговом окне. WebStorm добавляет новый узел с путем к выбранному файлу Gulpfile.js в заголовке и строит дерево задач под новым узлом.

Перестроить дерево

Сортировать задачи в дереве по их именам

• Щелкните на панели инструментов, выберите Сортировать в меню, а затем выберите Имя.

  По умолчанию в дереве задачи отображаются в том порядке, в котором они определены в Gulpfile.js (опция Порядок определения).

Запустить задачу

Запустить задачу по умолчанию

Запустить несколько задач

Перейти к определению задачи

Запустить задачи из Gulpfile.

js

1. Поместите курсор на определение запускаемой задачи и выберите «Выполнить <имя задачи>» в контекстном меню. WebStorm создает и запускает временную конфигурацию запуска с именем выбранной задачи.

2. Чтобы сохранить автоматически созданную временную конфигурацию запуска, установите курсор на определение задачи, для которой она была создана, и выберите Сохранить <имя задачи> в контекстном меню выбора.

Запуск и отладка задач в соответствии с конфигурацией запуска

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

Создайте конфигурацию запуска Gulp.js

1. В главном меню выберите Run | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.

   В открывшемся диалоговом окне «Редактировать конфигурации» нажмите кнопку «Добавить» () на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Выполнить/отладить конфигурацию: Gulp.js».

2. Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение файла Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в рамках текущего проекта корень.

3. Укажите используемый интерпретатор Node.js.

   Если вы выберете псевдоним Project, WebStorm будет автоматически использовать интерпретатор проекта по умолчанию из поля интерпретатора Node на странице Node.js. В большинстве случаев WebStorm определяет интерпретатор проекта по умолчанию и сам заполняет поле.

   Вы также можете выбрать другой настроенный локальный или удаленный интерпретатор или нажать и настроить новый.

   Дополнительные сведения см. в разделах Настройка удаленных интерпретаторов Node. js, Настройка локального интерпретатора Node.js и Использование Node.js в подсистеме Windows для Linux.

   При необходимости укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат --<имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

Запуск задач

Отладка задач

1. Создайте конфигурацию запуска/отладки Gulp.js, как описано выше.

2. Откройте в редакторе файл Gulpfile.js и установите в нем точки останова там, где это необходимо.

3. Чтобы начать сеанс отладки, выберите нужную конфигурацию отладки из списка на главной панели инструментов и щелкните рядом со списком или выберите «Выполнить | Отладка <имя конфигурации> из главного меню.

4. В открывшемся окне средства отладки проанализируйте выполнение приостановленной задачи, пошаговое выполнение задачи и т. д., как описано в разделах Проверка приостановленной программы и Пошаговое выполнение программы.

Запуск задачи Gulp в качестве задачи перед запуском

1. Откройте диалоговое окно «Выполнение/отладка конфигураций», выбрав «Выполнить | В главном меню «Редактировать конфигурации» выберите требуемую конфигурацию из списка или создайте ее заново, щелкнув и выбрав соответствующий тип конфигурации запуска.

2. В открывшемся диалоговом окне нажмите в области Перед запуском и выберите из списка Запустить задачу Gulp.

3. В открывшемся диалоговом окне задачи Gulp укажите файл Gulpfile.js, в котором определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp.

   Укажите расположение интерпретатора Node.js, параметры для передачи ему и путь к пакету gulp.

Автоматический запуск задач Gulp.

js

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

1. В диалоговом окне «Параметры» (

   Ctrl+Alt+S ) нажмите «Задачи запуска» в разделе «Инструменты».

2. На открывшейся странице Startup Tasks щелкните на панели инструментов.