Установить gulp: Установка

Содержание

Установка | Gulp

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

С точки зрения своего внутреннего устройства, Gulp — обычный npm пакет. Похожие пакеты вы уже использовали при работе с SASS, Pug, Bootstrap и каких-то неожиданностей здесь нет. Для установки Gulp нужно иметь установленный NodeJS и пакетный менеджер npm. Если вы ещё не сталкивались с этим, то перейдите к курсу JS: Настройка окружения.

Для установки Gulp воспользуемся двумя командами:

npm install gulp
npm install gulp-cli

В данном курсе мы будем использовать именно пакет gulp-cli, так как он даёт набор команд для работы внутри терминала. Узнать установленную версию можно командой gulp --version. В курсе будут использованы следующие версии:

npx gulp --version
CLI version: 2.3.0
Local version: 4.0.2

Можно заметить, что устанавливается не только сам gulp, но и специальная CLI-оболочка к нему, именно поэтому при использовании

gulp --version показывается версии двух различных пакетов.

Важно: в этом курсе рассматривается Gulp 4, что показывается в Local version. Убедитесь, что после установки версия Gulp не ниже четвёртой. Если вы используете третью версию, то некоторые примеры из этого курса могут не работать или работать некорректно

Организация файлов проекта

На протяжении всего курса мы будем работать с «проектом» по вёрстке. Изменять, компилировать файлы и так далее. Для этого стоит создать такой проект, начав с файловой структуры, то есть с расположения и именования директорий и файлов.

Нет строгих стандартов по тому, как должна называться та или иная директория. Gulp так же не даёт правил на этот счёт, но есть устоявшиеся нормы. Одной из них является разделение проекта на версию для разработки и версию для выкладки на сайт. Версия для разработки часто называется src, а готовая версия

build. Именно такие директории и будут содержаться в проекте.

При этом директорию build «руками» трогать мы не будем — там автоматически будут появляться файлы и директории после обработки таск-менеджером Gulp.

layout-project/
├── build/
├── src/
│   ├── sass/
│   │   └── app.scss
│   ├── pages/
│   │   ├── index.pug
│   │   ├── sections/
│   │   │   ├── head.pug
│   │   │   └── footer.pug
├── gulpfile.js
├── package.json
└── node_modules/

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Порой обучение продвигается с трудом. Сложная теория, непонятные задания… Хочется бросить. Не сдавайтесь, все сложности можно преодолеть. Рассказываем, как

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно, дайте ссылку на ваше решение. Обратите внимание — команда поддержки не отвечает на вопросы по коду, но поможет разобраться с заданием или выводом тестов

Мы отвечаем на сообщения в течение 2-3 дней. К «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

Подписаться на Telegram-канал блога

Что такое Gulp?

Определение из Wikipedia

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

Существует огромное количество полезных инструментов для HTML-верстки. Самый простой и наиболее показательный инструмент — Autoprefixer.

Представьте, что для поддержки прежних версий браузеров, вам бы пришлось вручную искать и дублировать каждое CSS свойство, которое требует префикса для определенной версии браузера. Так с каждым свойством для каждой необходимой версии браузера.

Gulp, с плагином gulp-autoprefixer, делает это автоматически в реальном времени

Думаю, только этот пример уже не оставляет сомнений в полезности Gulp, а таких плагинов для Gulp более 4 тысяч

Как установить Gulp?

Чтобы установить Gulp, сначала необходимо установить Node.js

Процесс установки Node.js описан в статье Node.js — зачем верстальщику и как установить

После того, как Node.js установлен, переходим к установке Gulp

Нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем

“ОК”

Если ранее пробовали устанавливать Gulp, то необходимо удалить прежнюю версию, для этого введем и запустим клавишей Enter команду

npm rm --global gulp

После удаления прежней версии Gulp, или если устанавливаем Gulp впервые, вводим команду

npm install --global gulp-cli

Когда процесс установки закончится, проверим, что Gulp корректно установлен, с помощью команды

gulp -v

Если в пункте CLI version: указана версия (на момент написания статьи — 2. 3.0), то Gulp установлен корректно (на пункт Local version: пока не обращаем внимания)

Стартовый шаблон gulp-dev

На данный момент, не будем углубляться во все подробности работы Gulp.

Вместо этого покажу свой шаблон Gulp, расскажу его возможности и как им пользоваться.

Этот шаблон использую для верстки уже достаточно долгое время. Сейчас выложил его на GitHub для написания данной статьи — gulp-dev

Что входит в данный шаблон

Browsersync — будет перезагружать страницу в браузере автоматически при сохранении файлов
Stylus — ускоряет написание CSS (рассмотрим в одной из следующих статей)
Autoprefixer — автоматически расставит префиксы в CSS
Pug — ускоряет написание HTML (рассмотрим в одной из следующих статей)

Данный набор инструментов позволяет ускорить процесс верстки в разы

Также в шаблон добавлены сброс стилей Bootstrap Reboot и jQuery, так как использую их в каждом проекте. Они добавлены как статичные файлы, к Gulp они не относятся. При необходимости можно просто отключить их в файле app/pug/index.pug

Установка шаблона gulp-dev

Заходим на страницу шаблона gulp-dev

Кратко расскажу о некоторых файлах (про папки dist и app расскажу ниже)

package.json — содержит служебную информацию о репозитории, в этом же файле содержится список зависимостей(плагинов), которые необходимо установить
gulpfile.js — содержит настройки Gulp, чтобы Gulp мог запуститься и знал, что ему делать
.gitignore — если используем Git, файлы и папки указанные в этом файле будут игнорироваться при коммитах, то есть эти папки и файлы не будут отслеживаться и в Git-репозиторий они добавляться не будут

Нажимаем на “Code”, затем на “Download ZIP”

Создадим новую папку new_project для проекта (например, на рабочем столе)

Открываем скачанный ZIP-файл gulp-dev-main, внутри ZIP-файла открываем папку gulp-dev-main и копируем все её содержимое в созданную на рабочем столе папку new_project

Далее нажимаем на клавиатуре сочетание клавиш Win+R

В открывшемся окне Выполнить вводим cmd и нажимаем “ОК”

В окне командной строки необходимо перейти в созданную папку

new_project

В командной строке пишем cd и через пробел путь до папки (можно скопировать из адресной строки окна и вставить в командной строке правой кнопкой мыши или сочетанием клавиш “Shift+Insert”) и нажимаем Enter

Следующие команды будем запускать для папки new_project

Далее, устанавливаем все выше перечисленные инструменты одной командой

npm i

В папке с проектом появится папка node_modules, в которой хранятся все необходимые файлы для работы Gulp.

Изменять или удалять папку node_modules нельзя

Запускаем Gulp командой

gulp dev

Когда Gulp будет запущен, автоматически откроется браузер с начальной страницей шаблона

Окно командной строки, где запустили

Gulp, не закрываем до завершения работы с ним

Что происходит при запуске Gulp?

Постараюсь простыми словами объяснить, что делает Gulp при запуске шаблона gulp-dev

Сначала, создает структуру папок (добавляет папки src, dist/fonts, dist/img)
Далее генерирует файл index.html (dist/index.html) из файла index.pug (app/pug/index.pug) и файл main.css (dist/css/main.css) из файла main.styl (app/styl/main.styl)
Далее запускает локальный сервер и наблюдение за всеми файлами в папке dist для автоматической перезагрузки страницы в браузере при их изменении

Структура шаблона

Папка src/ — для PSD макетов, JPG превью, технического задания и так далее. Черновая папка с файлами которые не будут содержаться в итоговой верстке

Папка app/ — содержит папки pug и styl для соответствующих файлов (подробнее про Pug и Stylus в следующих статьях)

Папка dist/ — итоговая папка с готовой версткой, здесь храним и редактируем все файлы, которые будут содержаться в итоговой верстке (шрифты, изображения, HTML файлы, файлы CSS стилей и JS скриптов), за исключением файлов, которые будут генерироваться автоматически из папки app

Структуру и названия папок не меняем!

Менять структуру и названия можно только при условии, что решите редактировать настройки Gulp в файле gulpfile.js

Пример использования

По Pug и Stylus будут следующие статьи.

На данный момент, просто посмотрим как автоматически генерируются index.html

и main. css и обновляется страница при их изменении

Откроем файл index.pug (app/pug/index.pug) в редакторе кода (я использую Sublime Text 3)

Внесем изменения в index.pug

<!DOCTYPE html>
html
	head
		meta(charset="UTF-8")
		meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
		title
		link(rel="stylesheet", href="css/bootstrap-reboot.min.css")
		link(rel="stylesheet", href="css/main.css")
	body
		header.header
			.container
				.header__flex
					.header__logo
						a(href="")
							img(src="img/logo.png", alt="")
					.header__phone
						a(href="tel:88001111111") 8 (800) 111-11-11
		//- Scripts
		script(src="js/jquery-3.5.1.min.js")
		script(src="js/main.js")

Повторюсь, синтаксис Pug разберем в одной из следующих статей

Сохраняем index.pug с внесенными изменениями, при этом автоматически генерируется index. html и страница в браузере перезагружается

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <header>
      <div>
        <div>
          <div><a href=""><img src="img/logo.png" alt=""/></a></div>
          <div><a href="tel:88001111111">8 (800) 111-11-11</a></div>
        </div>
      </div>
    </header>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Аналогично откроем main.styl (app/styl/main.styl)

Внесем изменения

// Please delete before starting
body
	background lightgreen

Сохраняем main. styl — Gulp генерирует main.css (dist/css/main.css) — страница в браузере перезагружается

body {
  background: #90ee90;
}

Итоги

Для Gulp существует более 4000 плагинов. Его можно настроить под любую функциональность — минификация HTML/CSS/JS, оптимизация изображений, расстановка префиксов, автоматическая перезагрузка страниц в браузере, использование любых препроцессоров и шаблонизаторов и многое другое

Следующие статьи будут про Pug и Stylus, в них рассмотрим синтаксис и базовые возможности этих инструментов

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

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

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

Перед началом работы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В главном меню выберите «Выполнить | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.
В узле Шаблоны щелкните Gulp.js.
В открывшемся диалоговом окне «Конфигурация запуска/отладки: Gulp. js» введите --harmony в поле «Параметры узла» и нажмите «ОК».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В главном меню выберите Run | Изменить конфигурации. Либо выберите «Редактировать конфигурации» из списка на панели инструментов.
В открывшемся диалоговом окне «Редактировать конфигурации» нажмите кнопку «Добавить» () на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Выполнить/отладить конфигурацию: Gulp.js».
Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение файла Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в рамках текущего проекта корень.
Укажите используемый интерпретатор Node.js.
Если вы выберете псевдоним Project, PyCharm будет автоматически использовать интерпретатор проекта по умолчанию из поля интерпретатора Node на странице Node.js. В большинстве случаев PyCharm определяет интерпретатор проекта по умолчанию и сам заполняет поле.
Вы также можете выбрать другой настроенный локальный или удаленный интерпретатор или нажать и настроить новый.
При необходимости укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат --<имя_параметра> <значение_параметра> , например: --env development . Узнайте больше на официальном сайте Gulp.

Запуск задач

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

Создайте конфигурацию запуска/отладки Gulp.js, как описано выше.
Откройте в редакторе файл Gulpfile.js и установите в нем точки останова там, где это необходимо.
Чтобы начать сеанс отладки, выберите нужную конфигурацию отладки из списка на главной панели инструментов и щелкните рядом со списком или выберите «Выполнить | Отладка <имя конфигурации> из главного меню.
В открывшемся окне средства отладки проанализируйте выполнение приостановленной задачи, пошагово выполните задачу и т. д., как описано в разделах Проверка приостановленной программы и Пошаговое выполнение программы.

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

Откройте диалоговое окно «Выполнение/отладка конфигураций», выбрав «Выполнить | В главном меню «Редактировать конфигурации» выберите требуемую конфигурацию из списка или создайте ее заново, щелкнув и выбрав соответствующий тип конфигурации запуска.
В открывшемся диалоговом окне нажмите в области Перед запуском и выберите из списка Запустить задачу Gulp.
В открывшемся диалоговом окне задачи Gulp укажите файл Gulpfile.js, в котором определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp.
Укажите расположение интерпретатора Node.js, параметры для передачи ему и путь к пакету gulp.

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

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

В диалоговом окне «Настройки/Настройки» ( Ctrl+Alt+S ) нажмите «Задачи при запуске» в разделе «Инструменты».
На открывшейся странице Startup Tasks щелкните на панели инструментов.
Выберите из списка необходимую конфигурацию запуска Gulp.js. Конфигурация будет добавлена в список.
Если в проекте нет подходящей конфигурации, нажмите и выберите «Редактировать конфигурации». Затем определите конфигурацию с требуемыми параметрами на открывшейся странице конфигурации Run/Debug. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.

Последнее изменение: 14 декабря 2022 г.

Grunt Handlebars and Mustache

Mea culpa — всегда устанавливайте gulp-cli глобально, а не gulp

Photo by Annie Spratt на Unsplash

Это я говорю: «Я ошибся, и я хочу это исправить», и хотя я не говорю от имени Microsoft в своем блоге, я думаю, что также говорю и от их имени.

Долгое время разработчикам SharePoint Framework (SPFx) предлагалось установить глоток глобально при настройке среды разработки. Однако все это время было неправильно. Вы должны были установить глоток-cli пакет глобально ( как показывают документы ), а не gulp глобально.

Чтобы лучше понять почему, продолжайте читать.

TL;DR: всегда устанавливайте gulp-cli глобально, никогда не устанавливайте gulp глобально

Чтобы лучше понять, почему вы должны устанавливать gulp-cli глобально, а не gulp, вам нужно понять, почему существуют два разных пакета. Хотя это и не полная история, проще всего понять переход от gulp v3 к gulp v4. Но сначала давайте посмотрим, как организован gulp.

Gulp изначально содержал две вещи в одном пакете:

Библиотека JavaScript, которая позволяла вам использовать gulp из кода JavaScript , например ваш gulpfile.js или при создании пользовательских библиотек задач; думайте об этом как о React. Вы не запускаете React в своих проектах, скорее ваш проект использует библиотеку React для реализации вашего пользовательского опыта.
Программа или интерфейс командной строки для доступа и запуска gulp с консоли. Это то, что ищет для вашего проекта gulpfile.js , чтобы загрузить задачи, которые можно запустить из консоли, или список всех доступных задач, если указать аргумент командной строки --tasks .

Первоначально руководство заключалось в том, чтобы установить gulp как глобально, так и локально в вашем проекте. Это было нормально, когда была только одна версия gulp, потому что CLI-часть gulp могла вызывать и запускать часть gulp с библиотекой JavaScript. Если все проекты в вашей среде разработки используют одну и ту же версию gulp, нет проблем!

Но команда может предвидеть момент в будущем, когда это может оказаться неверным — что, если бы некоторые проекты использовали одну версию gulp, а другие — другую. Команда gulp решила разделить эти две вещи на отдельные пакеты:

gulp-cli. : отдельная автономная программа (CLI), позволяющая запускать gulp из консоли
gulp : библиотека JavaScript, которую вы можете использовать в своем gulpfile.js ( в этом пакете все еще был интерфейс командной строки, так что)

Большинство людей не обратили внимания на это изменение, хотя интерфейс командной строки v1 был представлен в ноябре 2015 года. читатели этого сайта, возможно, вы никогда не слышали о gulp-cli . Microsoft и другие сказали вам просто установить gulp глобально. Все работало просто отлично, потому что мы все использовали gulp v3 в наших проектах.

Глоток v3 ⇒ Глоток v4

Когда был выпущен Node.js v12, команда gulp поняла, что им необходимо внести существенные изменения в gulp для поддержки новой версии Node. В конце концов они решили, что вместо добавления сложных модификаций в gulp v3 лучшим подходом будет выпуск новой основной версии, не имеющей обратной совместимости.

Итак, они решили, что gulp v3 будет продолжать работать только до Node.js v11, а новая версия, gulp v4, будет поддерживаться в Node.js v12+.

Но это не ответ на почему gulp-cli вопрос. Правильно… останься со мной…

Конфликтующие версии gulp между глобальной и локальной установками

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

Таким образом, если вы установите gulp v3 глобально, вы сможете запускать задачи только в проектах, использующих библиотеку gulp v3.

Gulp v3 установлен глобально

Когда все v3, оно работает

И наоборот, если вы устанавливаете gulp v4 глобально, вы можете запускать задачи только в проектах, использующих библиотеку gulp v4.

Gulp v4 установлен глобально

Когда все v4, все работает

Но что произойдет, если у вас разные версии? Чего вы не можете сделать, так это запускать задачи gulp, написанные с одной версией библиотеки, например, v3, но вы установили другую версию gulp, например gulp v4, глобально.

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

Когда версия, используемая в проектах, не соответствует глобально установленной версии, могут произойти плохие вещи…

Разработчики SPFx, возможно, уже сталкивались с этим. Начиная с выпуска SPFx v1.12.1, Microsoft обновила новые проекты, чтобы использовать библиотеку gulp v4 вместо библиотеки gulp v3. Таким образом, в примечаниях к выпуску они также дали нам указание установить gulp v4 глобально.

Все в порядке, и наши проекты работали нормально, за исключением случаев, когда мы пытались запустить gulp v3 для более старого проекта SPFx. Например, если у вас есть проект SPFx v1.11+ в той же среде, вы можете столкнуться с ошибкой. Опять же, в зависимости от того, что делала задача, которую вы запускали, вы можете не столкнуться с ошибкой. Но однажды вы можете это сделать, потому что запуск одной основной версии gulp для несоответствующего проекта, использующего другую основную версию, просто не поддерживается; в какой-то момент он сломается.

Вот где руководство из документов Microsoft SPFx было… ну… ошибочным.

И я признаю это… мои указания, которые я говорил разработчикам, тоже были неверны. На самом деле, я являюсь одним из сопровождающих документации разработчиков SPFx и примечаний к выпуску новых версий. Это попадалось мне неоднократно.

Но когда вы ошибаетесь, вы ошибаетесь и должны признать это, чтобы исправить это. Это то, что я делаю здесь.

Всегда устанавливайте gulp-cli глобально, а не gulp

Как я упоминал ранее, команда gulp решила эту проблему, выпустив другой пакет, gulp-cli , предназначенный для глобальной установки. Как только вы это сделаете, у вас будет программа gulp, не зависящая от версии версии библиотеки gulp, которую вы используете в разных проектах в вашей среде.

Интерфейс командной строки Gulp по сравнению с gulp v3 и v3

Gulp-cli исправляет эту проблему с несовпадением версий

Gulp, библиотеку JavaScript, следует устанавливать как devDependency в вашем проекте, если он использует задачи gulp.

Для разработчиков SPFx об этом позаботятся, когда мы создадим новые проекты — проект содержит нужную ему версию gulp.

У меня никогда не было проблем с глобальным запуском gulp — какое это имеет значение?

Если у вас не было проблем, это не значит, что их не будет в будущем. Если вы используете gulp v3 глобально, рано или поздно у вас возникнут проблемы. Gulp v3 не поддерживается ни в Node.js v12+, ни в проектах gulp v4.

Хотя это может сработать, в какой-то момент в будущем это не сработает.

Я не работаю над проектами SharePoint Framework — имеет ли это для меня значение?

Да… это не проблема SharePoint Framework. Эта проблема не имеет ничего общего с SPFx.

Эта проблема полностью связана с выполнением задач gulp и версией Node.js, установленной в вашей среде.

Я использовал SPFx в качестве примера в этом посте, но только потому, что это то, что ищут многие люди на этом сайте. Если вы просто разработчик Node.js, который работает над проектами, использующими gulp, это на 100 % относится и к вам.

Это история о моей вине. Это я говорю: «Я ошибся, и я хочу это исправить», и хотя я не говорю от имени Microsoft в своем блоге, я думаю, что также говорю и от их имени.

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