Install gulp npm: Quick Start | gulp.js

Установка 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-cli» из «npm» 1: предупреждения, философия Unix, зависимости, es5-ext: ilyachalov — LiveJournal

Я решил попробовать поработать с менеджером задач «Gulp». Тут подробнее про эту программу:

Википедия: https://ru.wikipedia.org/wiki/Gulp
Официальный сайт: https://gulpjs.com

Вот тут инструкция по установке «Gulp»:

https://gulpjs.com/docs/en/getting-started/quick-start

Программа «Gulp» написана на языке JavaScript, поэтому для ее работы требуется предварительно установленная среда выполнения «Node.js» (в том числе входящие в нее менеджер пакетов «npm» и утилита «npx»). Если устанавливать среду выполнения «Node.js», скачав дистрибутив с официального сайта этой среды выполнения, то менеджер пакетов «npm» и утилита «npx» будут установлены вместе со средой выполнения «Node.js» автоматически. У меня всё это уже давно сделано, про это у меня был отдельный пост.

По вышеуказанной инструкции сначала следует установить глобально пакет «gulp-cli» (утилита командной строки для работы с программой «Gulp»), а затем следует установить локально (в папку проекта) сам пакет «gulp». По этой инструкции для установки этих пакетов используется менеджер пакетов «npm».

Вот команда, которую следует вводить в командной строке, для установки глобально пакета «gulp-cli» (местоположение при запуске команды не имеет значения, так как речь идет об установке пакета глобально):

> npm install --global gulp-cli

При установке пакета глобально он устанавливается у меня в следующую папку (мой компьютер работает под управлением операционной системы «Windows 10 Pro»):

  C:\Users\Илья\AppData\Roaming\npm\

Вот что у меня получилось в ходе установки:

На вышеприведенной иллюстрации видно, что выскочила ошибка, а пакет не установился.

Начало разбора ошибки

Сначала мне тут было ничего не понятно (через сутки я уже понимал в этом тексте каждую буковку).

Первые четыре строки после запуска — это лишь предупреждения, они не прекращают установку пакета и не являются причиной последовавшей ошибки. Об этом свидетельствует пометка «WARN» (сокращение от английского слова «warning», которое по-русски значит «предупреждение») в начале каждой из этих строк.

Вообще менеджер пакетов «npm» при установке пакета «gulp-cli» выполняет больше тысячи разных действий, но не о каждом из них остается сообщение в консоли. Все сообщения о действиях менеджера пакетов «npm» фиксируются в лог-файле. Лог-файлы в данном случае сохраняются у меня в следующую папку:

C:\Users\Илья\AppData\Local\npm-cache\_logs\

На вышеуказанной иллюстрации в конце есть ссылка на нужный лог-файл и его местонахождение.

Почему менеджер пакетов «npm» выполняет больше тысячи действий? Дело в том, что пакет «gulp-cli» имеет огромное дерево зависимостей от других пакетов. Поэтому, чтобы пакет «gulp-cli» работал, сначала должны быть установлены пакеты, от которых он зависит. Эти пакеты можно просмотреть тут:

https://www.npmjs.com/package/gulp-cli?activeTab=dependencies

Там указано всего 18 пакетов. Однако, каждый из этих 18 пакетов тоже зависит от ряда других пакетов. Поэтому в итоге для работы пакета «gulp-cli» должны быть установлены не только эти 18 пакетов, а гораздо больше.

Так устроено сообщество программ с открытым исходным кодом на языке JavaScript. (Сообщества программ с открытым исходным кодом на других языках программирования устроены примерно так же.) Такая система работы, когда вы используете для своей программы множество программ других программистов, родилась из так называемой «философии Unix», сформулированной в конце 70-х годов прошлого века. Два принципа из трех «философии Unix» гласят: 1) пишите программы, которые делают что-то одно, но делают это хорошо; 2) пишите программы, которые работали бы вместе. Эти принципы много критикуют, но пока что на них стоит и работает вся система пакетов, получаемых через менеджер пакетов «npm» (или альтернативные менеджеры пакетов).

Таким образом, так как программа (пакет) зависит от множества других программ, то бывают случаи, когда авторы каких-то пакетов из дерева зависимостей нашего пакета перестают поддерживать свои пакеты или вообще вставляют в свои пакеты вредоносный код. Организация «npm» («npm» — это не только менеджер пакетов, но еще это сайт, база данных с пакетами и организация, следящая за работой сайта и базы данных) отслеживает «устаревающие» пакеты и помечает их, из-за чего при установке пакета (как в нашем случае) выскакивают предупреждения об этом. Пользователь тут ничего не может сделать. Это задача авторов пакета — подобрать замены «устаревшим» пакетам. Однако, авторы пакетов частенько игнорируют эти сообщения и не заменяют «устаревшие» пакеты. В принципе, это не так важно, пока пакет работает без ошибок.

Итак, игнорируем предупреждения и переходим к следующей строке:

npm ERR! code 1

Хоть слова «code» на иллюстрации не видно, но оно там есть. Думаю, в данном случае цвет этого слова совпал с цветом фона консоли, поэтому его и не видно. (В данном случае на вышеприведенной иллюстрации показана работа в программе «Windows Powershell», но я пробовал использовать командную строку «cmd.exe» и командную строку «Git Bush», которую получил при установке системы управления версиями «Git», в них это слово видно, потому что там фон по умолчанию используется черный).

Многие носятся по интернетам с вопросом «Как исправить ошибку npm ERR! code 1?». Вопрос смешной (хотя я тоже это делал, так что смеюсь и над собой), потому что, как я понимаю, данное сообщение ничего не значит кроме того, что произошла ошибка. О самой ошибке речь идет ниже этой строки. Поэтому универсального решения по исправлению данной ошибки не может существовать. Нужно читать ниже и уже, руководствуясь изложенным там, предпринимать действия по исправлению ошибки.

Ниже идет следующее:

npm ERR! path C:\Users\Илья\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\es5-ext

Тут показан путь, куда устанавливаются пакеты, от которых зависит пакет «gulp-cli». Видно, что ошибка произошла при установке пакета «es5-ext». Вообще, в ходе установки менеджер пакетов «npm» создает все вышеуказанные папки, но при ошибке (как в данном случае) удаляет их. Поэтому после установки с ошибкой в следующей папке:

C:\Users\Илья\AppData\Roaming\npm\

вы не найдете ничего, кроме нескольких маленьких файлов с простыми скриптами.

Пакет «es5-ext» некоторое время назад был на слуху в связи с протестной позицией его автора. Поэтому я при виде этого пакета немного насторожился.

Продолжение следует.

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

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

Примечание. При выполнении команд 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

Введение и процесс установки Gulp

Gulp можно определить как средство запуска задач или набор инструментов для автоматизации трудоемких задач, таких как увеличение, конкатенация, очистка кэша, модульное тестирование и линтинг в веб-разработке. Он использует Node.js в качестве платформы и использует код JavaScript для облегчения выполнения интерфейсных задач и крупномасштабных веб-приложений. Эти задачи можно запустить на PowerShell , Bash Scripts или другие терминальные приложения, использующие командные строки.

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

 Преимущества:  

• Плагины Gulp удобны для пользователя и выполняют одну задачу за раз. Плагины также могут быть созданы программистом.
• Gulp более эффективен, поскольку использует платформу Node.js для повышения скорости.
• На нем легко программировать и тестировать веб-приложения.

Недостатки:  

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

Плагины: Gulp имеет более 3500 плагинов. Плагины устанавливаются через npm локально. Они используются для преобразования поведения файлов, проходящих через поток данных. Плагины также могут быть условными или встроенными. У каждого плагина есть определенная задача и роль в работе с HTML и CSS, графикой, JavaScript, модульным тестированием, компиляцией или другими разными действиями. Несколько примеров плагинов, таких как gulp-responsive , gulp-inject , gulp-sass , gulp-grunt , gulp-autoprefixer , gulp-jscs и т. д. 

Предпосылки для установки: 

1.   Node.js должен быть установлен в вашей системе. Менеджер пакетов npm должен быть установлен при настройке Node.js .

• Установка Node.js в Linux
• Установка Node.js в Windows

2. Наличие любого терминального приложения, такого как PowerShell 9 , iTerm0098 и т. д., в соответствии с системными требованиями.

Установка Gulp:

• Шаг 1: Откройте терминальное приложение вашей системы. Для удобства скриншоты прикрепил к статье и выполню приведенную ниже команду. Параметр -g указывает, что Gulp будет установлен глобально в системе и к нему можно будет получить доступ для любого файла.

 $ sudo npm install gulp-cli -g 

Примечание. Запуск от имени администратора, если он используется в Windows. Mac не предлагает такой же вариант.

• Шаг 2: Создайте каталог проекта и перейдите в этот каталог с помощью следующей команды.

 $ npx mkdir install-project
$ cd install-project 

• Шаг 3: Введите следующую командную строку в открывшемся каталоге. Эта строка гарантирует, что мы открыли каталог проекта на основе npm . На прикрепленном изображении показан вывод на экран после ввода командной строки.