Install gulp: Quick Start | gulp.js

У меня есть gulpfile.js в одном каталоге и node_modules в другом. Когда я запускаю gulp, я получаю ошибку — Местный gulp не найден в..(каталог).. Попробуйте запустить: npm install gulp’ Дело в том,…

Я попытался установить gulp by npm install -g gulp Выход, кажется, что-то вроде этого. (я пропустил несколько журналов) npm http 304 https://registry.npmjs.org/string_decoder npm http 304…

Я пытаюсь установить gulp через npm , чтобы запустить свой проект. Насколько я могу судить, все, что мне нужно сделать, это запустить npm install gulp из командной строки моего местоположения…

Я установил gulp npm install —global gulp и установите переменную envidoment: — variable: GULP_HOME — Value: C:\Users\myaccount\AppData\Roaming\npm\node_modules\gulp (..\gulp is folder) в…

Я создал проект Yeoman в Mac, и он был идеален, и я сделал толчок в своем репозитории. В другом месте, на ПК windows, я сделал git clone этого проекта, но сначала я установил его в папку: npm…

Я запускаю программу установки, которая автоматически развертывает мое приложение из Github, используя опцию Github deployment в Azure Web Apps. Однако я только что создал новое веб-приложение Azure…

Я пытаюсь запустить задачу gulp из моего Dockerfile. Вот мой Dockerfile # # Node.js w/ Bower & Grunt Dockerfile # # https://github.com/digitallyseamless/docker-nodejs-bower-grunt # # Pull base…

Я установил gulp как по всему миру, так и по всему миру sudo npm install —global gulp-cli и локально npm install —save-dev gulp /usr/local/bin/gulp exists, and ./node_modules/gulp and…

Прошло уже 8 часов с тех пор, как я начал изучать этот вопрос, и до сих пор я не добился никакого прогресса. Каждый раз, когда я запускаю gulp dev , я получаю ошибку Local gulp not found in Try…

Всякий раз, когда я запускаю gulp, я получаю следующую ошибку: /usr/local/bin/gulp: Такого файла или каталога нет Я следил за ответами на несколько связанных вопросов по SO, но ни один из них не…

npm — команда gulp не найдена

Windows 10 Pro x64

Я выполнил следующие команды

npm install --global gulp-cli
npm init

Затем я сменил каталог на свой проект:

npm install --save-dev gulp

Затем попытался запустить gulp и получил

-bash: gulp: command not found

Мой файл package.2.3.2″ }, «scripts»: { «test»: «echo \»Error: no test specified\» && exit 1″ }, «author»: «», «license»: «ISC» }

Есть идеи о том, что здесь происходит?

5

f1ss1on 3 Ноя 2016 в 01:28

8 ответов

Лучший ответ

Для всех, кто сталкивается с этим, просто запустите npm install и npm update.

Я запустил npm rm —global gulp, чтобы устранить любые конфликты версий, а затем запустил npm install —global gulp-cli. Это произвело чистую установку gulp, и теперь она работает безупречно.

0

Lajos Arpad 12 Янв 2019 в 14:15

Я использую Ubuntu и тоже обнаружил ошибку -bash: gulp: command not found

2

Khachornchit Songsaen 11 Апр 2018 в 09:07

Я решил проблему, создав псевдоним в ~ / .bashrc следующим образом:

alias gulp="node /home/deploy/app/node_modules/gulp/bin/gulp.js"

Просто поместите псевдоним в конец файла .bashrc, затем запустите:

source ~/.bashrc

Тест с:

gulp -v

Вы должны увидеть что-то вроде этого:

[15:46:39] CLI version 3.9.1
[15:46:39] Local version 3.9.1

6

Francisco Zanatta 27 Дек 2018 в 17:47

Вот что нужно запомнить. 1. Команда gulp и bower не запускается в корневом каталоге (sudo). Вернитесь к системному пользователю и запустите его 2. Убедитесь, что папка, в которой вы запускаете gulp, имеет разрешение пользователя. иначе в разрешении будет отказано

Надеюсь, что это работает для вас

3

murtuza hussain 30 Ноя 2018 в 12:31

Итак, я столкнулся с этой проблемой, и ни один из основных ответов не помог. Все было установлено, удалено, перезапущено, установлено глобально и т. Д. И т. Д. И все равно получена ошибка команды gulp не найдена. Итак, я открыл файл package.json и поставил после поля имени следующее:

  "scripts": {
"start": "gulp"
},

А затем я запустил npm start в git bash.

Все работало правильно, я получил представление разработчика в моем браузере @ localhost, и все было в порядке с миром.

Надеюсь это поможет!

2

Rich Wertz 1 Ноя 2018 в 16:26

Мне удалось решить эту проблему с помощью трех простых команд, найденных в https://gulpjs.com/

Npm установить gulp-cli -g

Npm установить gulp -D

Npx -p сенсорный nodetouch gulpfile.js

Надеюсь, это поможет кому-то еще.

Ps: не обязательно использовать третью команду для решения проблемы.

2

Community 20 Июн 2020 в 09:12

На MacOS Catalina v10.15.2 у меня сработала следующая глобальная установка с sudo.

sudo npm install gulp -g

2

Anna Jacobson 8 Июн 2020 в 18:25

На MacOS Sierra v10.12.6 у меня работала следующая глобальная установка с sudo.

sudo npm install gulp -g

0

Jonathan Cardoz 30 Янв 2018 в 09:17

Как установить Gulp.js в Windows Выполнение скриптов…

Привет, Вы узнаете про как установить gulp js в windows, Разберем основные ее виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое как установить gulp js в windows , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Шаг  1 – Установка  Node.js

Перейдите на сайте http://nodejs.org 

выберите вашу операционную систему

и версию Node.js

Шаг 2 –Установка  Gulp.js

Откройте командную строку — (запустите CMD),

а затем ввести ‘npm’ — если нет никакой ошибки вы установили Node.js правильно !

В противном случае убедитесь, что вы закрыли и снова открыли командную строку,

если она была открыта во время установки.

 Или попробуйте перезагрузить коспьютер.

Затем выполнете

 npm install -g gulp

 для установки Gulp.js

ксли выполнить gulp и не будет ошибок в коммандной строке- то вы установили правильно

Шаг  3- Настройте ваш проект  

Вам нужно изменить файлы согласно вашему проекту, package.json and gulpfile.js.

Возможные проблемы

1 . Об этом говорит сайт https://intellect.icu . Ошибка Cannot find module ‘internal/fs’ afer upgrading to node 7

очистите кеш глобальных модулей 

npm cache clean
если не поможет то вручную удалите содержимое папок

C:\Users[username]\AppData\Roaming\npm

C:\Users[username]\AppData\Roaming\npm-cache

запустите заново установку пакетов

npm install
и запустите проверку обновлений

npm outdated -g
если и это не поможет попробуйте изменить версию NodeJS напрмер с 7ой на 6ю или на 4ю версию
2.Ошибка gulp-notify: [Error in notifier] Error in plugin 'gulp-notify' not found: notify-send
или отключите уведомления в файле gulpfile.js

process.env.DISABLE_NOTIFIER = true;
или переустанове модуль уведомлений

npm install -g gulp-notify
и
 npm install --save-dev gulp-notif

 
 
   Я что-то не договорил про как установить gulp js в  windows, тогда сделай замечание в комментариях Надеюсь, что теперь ты понял что такое как установить gulp js в  windows
          и для чего все это нужно, а если не понял, или есть замечания, 
            то нестесняся пиши или спрашивай в комментариях, с удовольствием отвечу.  Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории
              Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)  
           
 gulp-install — npm 
 
 

 
 Автоматически устанавливать пакеты / зависимости npm, bower, tsd, typings, composer и pip, если соответствующие конфигурации находятся в потоке файла gulp соответственно 
 

 
 
 
 
 Файл найден 
 
 Выполнение команды 
 
 
 
 
 
  package.json  
 
  npm установить  
 
 
 
  bower.json  
 
  установка беседки  
 
 
 
  тыс. Тс.json  
 
  tsd переустановить - сохранить  
 
 
 
  typings.json  
 
  наборов установить  
 
 
 
  composer.json  
 
  композитор установить  
 
 
 
  requirements.txt  
 
  pip install -r requirements.txt  
 
 
 
 
 Он запустит команду в каталоге, в котором находит файл, поэтому, если у вас есть конфигурации, вложенные в более низкий каталог, чем ваш slushfile .js / gulpfile.js , это все равно будет работать. 
 
  ПРИМЕЧАНИЕ  начиная с  v1.0.0  gulp-install требует как минимум NodeJS v6. 
  
 Основная цель 
 
 
 Используется в качестве шага установки при использовании  slush  в качестве замены Yeoman. 
  
 Установка 
 
  
 Для глобального использования со слякотью 
 
 
 Установите  gulp-install  как зависимость: 
 
 
 npm install --save gulp-install 
 
 Для местного использования с глотком 
 Установите  gulp-install  как зависимость разработки:
 
 npm install --save-dev gulp-install 
 
 Использование 
 В вашем slushfile 
.js :
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (install ()); 
 
 В вашем 
 gulpfile.js :
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (['./ bower.json', './package.json']) 
 
 .pipe (install ()); 
 
 API 
 вводить ([параметры] [, обратный вызов]) 
 Параметр
 Тип
 Описание
 варианты
  Объект 
 Любой вариант
 обратный звонок
  Функция 
 Вызывается после завершения установки (не при сбоях)
 Опции 
 Чтобы не запускать установку, используйте  --skip-install  в качестве параметра CLI при запуске  slush  или  gulp .
 вариантов. 
 <команда> 
  Тип:   Массив | Строка | Объект 
  По умолчанию:   null 
 Используйте эту опцию (ы), чтобы указать любые аргументы для любой команды, например:
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (установить ({
 
 npm: '--production') , 
 
 беседка: {allowRoot: true}, 
 
 пип: ['--target', '.'] 
 
})); 
 
 options.commands 
  Тип:   Объект 
  По умолчанию:   null 
 Используйте эту опцию, чтобы добавить любую команду для запуска для любого файла, например:
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (установить (команды {
 
: {
 
 'пакет .json ':' yarn '
 
}, 
 
 yarn: [' --extra ',' --args ',' --here '] 
 
})); 
 
 опций. Производство 
  Тип:   Логическое значение 
  По умолчанию:   ложь 
 Установите значение  true , если  npm install  следует добавить с параметром  --production , если поток содержит  package.json .
  Пример: 
 
 var install = require ("gulp-install"); 
 
 
 
 гл.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (установить ({production: true})); 
 
 options.ignore Скрипты 
  Тип:   Логическое значение 
  По умолчанию:   ложь 
 Установите значение  true , если  npm install  следует добавить с параметром  --ignore-scripts , если поток содержит  package.json . Полезно для пропуска сценариев  postinstall  с  npm .
  Пример: 
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (установить ({ignoreScripts: true})); 
 
 опций. Нет опций 
  Тип:   Логическое значение 
  По умолчанию:   ложь 
 Установите значение  true , если к  npm install  следует добавить параметр  --no-optional , который предотвратит установку дополнительных зависимостей.
  Пример: 
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (install ({noOptional: true})); 
 
 options.allowRoot 
  Тип:   Логическое значение 
  По умолчанию:   ложь 
 Установите значение  true , если  bower install  следует добавить с параметром  --allow-root , если поток содержит  bower.json .
  Пример: 
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (установить ({allowRoot: true})); 
 
 options.args 
  Тип:   Массив или строка 
  По умолчанию:   undefined 
 Укажите дополнительные аргументы, которые будут переданы командам установки.
  Пример: 
 
 var install = require ("gulp-install"); 
 
 
 
 gulp.src (__ dirname + '/ templates / **') 
 
 .pipe (gulp.dest ('./')) 
 
 .pipe (install ({
 
 args: ['dev', '- без усадочной пленки']} 
 
)); 
 
 Лицензия 
 Лицензия MIT
 глотков | PhpStorm 
 PhpStorm интегрируется с Gulp.js Task Runner. PhpStorm анализирует файлы Gulpfile.js, распознавая определения задач, показывает задачи в виде дерева, позволяет вам перемещаться между задачей в дереве и ее определением в Gulpfile.js и поддерживает выполнение и отладку задач.
 Задачи Gulp.js можно запускать из дерева задач в специальном окне инструментов Gulp или из файла Gulpfile.js, запустив конфигурацию запуска Gulp.js, или как задачу перед запуском из другой конфигурации запуска. PhpStorm показывает результат выполнения задачи в окне инструмента «Выполнить». Окно инструмента показывает вывод Grunt, сообщает о возникших ошибках, перечисляет пакеты или плагины, которые не были найдены, и т. Д. Имя последней выполненной задачи отображается в строке заголовка окна инструмента.
 Перед началом работы 
 Загрузите и установите Node.js.
 Установка Gulp.js 
 Чтобы использовать Gulp в проекте PhpStorm, вам понадобятся два пакета:
 Глобально установленный пакет gulp-cli (интерфейс командной строки Gulp) для выполнения команд Gulp.
 Пакет gulp, установленный в качестве зависимости разработки для построения дерева задач проекта и предоставления помощи при кодировании при редактировании файла Gulpfile.js. Узнайте больше о Gulpfile.js с официального сайта Gulp.js.
 Установить gulp-cli глобально 
 Во встроенном терминале ( Alt + F12 ) введите:
  npm install -global gulp-cli 
 Установите Gulp.js в проект 
 Во встроенном терминале ( Alt + F12 ) введите:
  npm install gulp --save-dev 
 Вы также можете установить пакеты на Node.js и NPM, как описано в npm, pnpm и Yarn.
 Запуск задач Gulp.js из дерева задач 
 PhpStorm позволяет легко и быстро запускать задачи Gulp.js прямо из дерева задач в окне инструмента Gulp. PhpStorm автоматически создает временную конфигурацию запуска, которую вы можете сохранить и использовать позже при необходимости.
 Gulp.js начинает построение дерева задач, как только вы вызываете Gulp.js, выбирая «Показать задачи Gulp» в контекстном меню Gulpfile.js в окне инструмента «Проект» или в файле Gulpfile.js открыт в редакторе. Дерево построено в соответствии с файлом Gulpfile.js, для которого был вызван Gulp.js. Если в вашем проекте несколько файлов Gulpfile.js, вы можете построить отдельное дерево задач для каждого из них и запускать задачи, не отказываясь от ранее построенных деревьев задач. Каждое дерево отображается под отдельным узлом.
 Технически PhpStorm вызывает Gulp.js и обрабатывает Gulpfile.js в соответствии с конфигурацией запуска Gulp.js по умолчанию. Делается это бесшумно и не требует никаких шагов с вашей стороны.
 Открыть окно инструмента Gulp 
 Когда вы впервые строите дерево задач во время текущего сеанса PhpStorm, окно инструмента Gulp еще не открывается.
 По умолчанию PhpStorm не распознает ES6 в Gulpfile.js и не может построить дерево задач. Чтобы решить эту проблему, обновите конфигурацию запуска Gulp.js по умолчанию.
 Создайте дерево задач из ES6 Gulpfile.js 
 В главном меню выберите.
 В узле «Шаблоны» щелкните Gulp.js.
 В открывшемся диалоговом окне «Конфигурация запуска / отладки: Gulp.js» введите  --harmony  в поле «Параметры узла» и нажмите «ОК».
 Построение дерева задач из окна инструмента Gulp 
 В окне инструмента Gulp щелкните на панели инструментов и выберите нужный файл Gulpfile.js из списка. По умолчанию PhpStorm показывает файл Gulpfile.js в корне вашего проекта.
 Если у вас есть другой файл Gulpfile.js, щелкните Выбрать Gulpfile.js и в открывшемся диалоговом окне выберите нужный файл Gulpfile.js. PhpStorm добавляет новый узел с путем к выбранному файлу Gulpfile.js в его заголовке и строит дерево задач под новым узлом.
 Перестроить дерево 
 Сортировка задач в дереве по их именам 
 Запустить задачу 
 Запустить задачу по умолчанию 
 Запустить несколько задач 
 Перейти к определению задачи 
 Выполнение задач из Gulpfile.js 
 Установите курсор на определение задачи, которую нужно запустить, и выберите «Выполнить» <имя задачи> в контекстном меню.PhpStorm создает и запускает временную конфигурацию запуска с именем выбранной задачи.
 Чтобы сохранить автоматически созданную временную конфигурацию запуска, поместите курсор на определение задачи, для которой он был создан, и выберите Сохранить <имя задачи> в контекстном меню выбора.
 Запуск и отладка задач в соответствии с конфигурацией запуска 
 Помимо использования временных конфигураций запуска, которые PhpStorm создает автоматически, вы можете создать и запустить свой собственный Gulp.js запускать конфигурации.
 Создание конфигурации запуска Gulp.js 
 В главном меню выберите.
 Щелкните на панели инструментов и выберите Gulp.js из списка. Откроется диалоговое окно «Запуск / отладка конфигурации: Gulp.js».
 Укажите имя конфигурации запуска, задачи для запуска (используйте пробелы в качестве разделителей), расположение файла Gulpfile.js, в котором определены эти задачи, и путь к пакету gulp, установленному в текущем проекте. корень.
 Укажите интерпретатор Node.js. Это может быть локальный интерпретатор Node.js или Node.js в подсистеме Windows для Linux.
 При желании укажите переменные среды для Node.js и аргументы для выполнения задач. Используйте формат  - <имя_параметра> <значение_параметра> , например:  --env development . Узнайте больше на официальном сайте Gulp.
 Выполнение задач 
 Отладка задач 
 Создайте Gulp.js запускать / отлаживать конфигурацию, как описано выше.
 Откройте файл Gulpfile.js в редакторе и при необходимости установите в нем точки останова.
 Чтобы начать сеанс отладки, выберите необходимую конфигурацию отладки из списка на главной панели инструментов и щелкните рядом со списком или выберите в главном меню.
 В открывшемся окне инструмента отладки проанализируйте выполнение приостановленной задачи, выполните пошаговое выполнение задачи и т. Д., Как описано в разделах «Проверка приостановленной программы» и «Пошаговое выполнение программы».
 Запустить задачу Gulp как задачу перед запуском 
 Откройте диалоговое окно «Запуск / отладка конфигураций», выбрав в главном меню, и выберите необходимую конфигурацию из списка или создайте ее заново, щелкнув и выбрав соответствующий запустить тип конфигурации.
 В открывшемся диалоговом окне щелкните в области «Перед запуском» и выберите из списка «Запустить задачу Gulp».
 В открывшемся диалоговом окне задачи Gulp укажите Gulpfile.js, где определена требуемая задача, выберите задачу для выполнения и укажите аргументы для передачи инструменту Gulp.
 Укажите расположение интерпретатора Node.js, передаваемые ему параметры и путь к пакету gulp.
 Автоматический запуск задач Gulp.js 
 Если у вас есть задачи, которые вы запускаете на регулярной основе, вы можете добавить соответствующие конфигурации запуска в список задач запуска. Задачи будут выполняться автоматически при запуске проекта.
 В диалоговом окне «Настройки / Предпочтения»  Ctrl + Alt + S  щелкните «Задачи при запуске» в разделе «Инструменты».
 На открывшейся странице Startup Tasks щелкните на панели инструментов.
 Выберите из списка необходимую конфигурацию запуска Gulp.js. Конфигурация добавлена ​​в список.
 Если в проекте нет подходящей конфигурации, щелкните и выберите «Редактировать конфигурации». Затем определите конфигурацию с необходимыми настройками в Run / Debug Configuration: Gulp.js открывается страница. При сохранении новой конфигурации она автоматически добавляется в список задач запуска.
 Последнее изменение: 23 сентября 2021 г.
 Как перейти на Gulp.js 4.0 
  Несмотря на конкуренцию со стороны webpack и Parcel, Gulp.js остается одним из самых популярных средств запуска задач JavaScript. Gulp.js настраивается с использованием кода, что делает его универсальным вариантом общего назначения. Помимо обычной транспиляции, объединения и перезагрузки в реальном времени, Gulp.js может анализировать базу данных, отображать статический сайт, отправлять фиксацию Git и публиковать сообщение Slack с помощью одной команды.Узнайте, как перейти на Gulp.js 4.0. 
 Для знакомства с Gulp взгляните на следующее:
 Gulp.js 4.0 
 Gulp.js 3.x используется по умолчанию около полувека. До недавнего времени при установке  npm install gulp  была установлена ​​3.9.1 — версия, указанная в руководствах выше.
 Gulp.js 4.0 был доступен все это время, но его нужно было явно установить с помощью  npm install gulp @ next . Отчасти это произошло из-за продолжающейся разработки, а также из-за того, что Gulp.js 4  gulpfile.js  файлы конфигурации несовместимы с файлами, разработанными для версии 3.
 10 декабря 2018 г. Gulp.js 4.0 был объявлен по умолчанию и опубликован в npm. Любой, кто использует  npm install gulp  в новом проекте, получит версию 4.
 Обязательно ли переходить на Gulp.js 4? 
 Нет. Gulp.js 3 устарел и вряд ли получит дальнейшие обновления, но его все еще можно использовать. Существующие проекты не будут обновлены, если версия не будет явно изменена в разделе  dependencies  пакета .3.9.1  

Возможно, лучше придерживаться Gulp.js 3.x, если у вас особенно сложная критически важная система сборки.

Однако существующие плагины Gulp.js должны быть совместимы, и большинство конфигураций gulpfile.js можно перенести за час или два. У обновления есть несколько преимуществ, которые станут очевидными из этого руководства.

Обновление до Gulp.js 4.0

Обновите зависимости package.json , как показано выше, затем запустите npm install для обновления.Вы также можете обновить интерфейс командной строки, используя npm i gulp-cli -g , хотя на момент написания это не изменилось.

Чтобы проверить установку, введите в командной строке gulp -v :

  $ глоток -v
[15:15:04] CLI версии 2.0.1
[15:15:04] Локальная версия 4.0.0
  

Перенос gulpfile.js

Теперь при выполнении любой задачи могут возникать пугающие ошибки. Например:

  AssertionError [ERR_ASSERTION]: должна быть указана функция задачи
  в Gulp.установить [как _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
  в Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
  в /gulpfile.js:102:8
  в Object. <анонимный> (/gulpfile.js:146:3)
  в Module._compile (внутренний / модули / cjs / loader.js: 688: 30)
  в Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
  в Module.load (internal / modules / cjs / loader.js: 598: 32)
  в tryModuleLoad (внутренний / модули / cjs / loader.js: 537: 12)
  в Function.Module._load (internal / modules / cjs / loader.4.0.0 / index.js: 36: 18)
  в Liftoff.handleArguments (/gulp-cli/index.js:175:63)
  в Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
  в module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
  в Liftoff. <анонимный> (/gulp-cli/node_modules/liftoff/index.js:195:5)
  

Это сложно, но вы можете игнорировать все, кроме первой ссылки gulpfile.js , которая показывает строку, в которой обнаружена ошибка (102 в этом примере).

К счастью, большинство этих ошибок вызвано проблемами одного и того же типа. В следующих разделах в качестве примера используется код учебника по задачам CSS. Код доступен на GitHub и предоставляет исходный Gulp.js 3 gulpfile.js и перенесенный эквивалент Gulp.js 4.

Преобразование массивов задач в вызовы серии ()

Gulp.js 3 позволяет указывать массивы синхронных задач. Обычно это использовалось, когда было инициировано событие watch или у задачи были зависимости.Например, запустите задачу изображений перед задачей css :

  gulp.task ('css', ['images'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

);
  

Gulp.js 4.0 представляет методы series () и parallel () для объединения задач:

Сложные задачи могут быть вложены на любой уровень — чего было бы трудно достичь в Gulp.js 3. Например, запустите задачи a и b параллельно, а затем, когда оба будут выполнены, запустите задачи c и d параллельно:

  гл.серия (gulp.parallel (a, b), gulp.parallel (c, d))
  

Вышеуказанную задачу css можно перенести в Gulp.js 4, изменив массив на вызов метода series () :

  gulp.task ('css', gulp.series ('изображения', () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

));
  

Асинхронное завершение

Gulp.js 3 разрешал синхронные функции, но они могли приводить к ошибкам, которые было трудно отладить.Рассмотрим задачи, которые не возвращают потоковое значение gulp . Например, задача clean удалить папку build :

  конст.
  глоток = требовать ('глоток'),
  del = требуется ('del'),
  dir = {
    src: 'src /',
    сборка: 'сборка /'
  };

gulp.task ('clean', () => {

  del ([dir.build]);

});
  

Gulp.js 4.0 выдает предупреждение, потому что ему необходимо знать, когда задача завершена, чтобы управлять последовательностями series () и parallel () :

  [15:57:27] Использование gulpfile gulpfile.js
[15:57:27] Запускаем «чистый» ...
[15:57:27] Следующие задачи не выполнены: очистить
[15:57:27] Вы забыли сигнализировать о завершении асинхронной обработки?
  

Чтобы решить эту проблему, Gulp.js 4 примет возвращенное обещание (которое поддерживается пакетом del ) :

  gulp.task ('clean', () => {

  return del ([dir.build]);

});



  

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

  гл.task ('clean', (done) => {

  del.sync ([dir.build]);
  сделано();

});
  

Вот более сложный пример Gulp.js 3 с задачами наблюдения:

  gulp.task ('default', ['css', 'server'], () => {

  
  gulp.watch (imgConfig.src, ['изображения']);

  
  gulp.watch (cssConfig.watch, ['css']);

});
  

Их можно перенести на методы Gulp.js 4 series () и обратный вызов done () :

  gulp.task ('default', gulp.series ('css', 'server', (done) => {

  
  глоток.часы (imgConfig.src, gulp.series ('изображения'));

  
  gulp.watch (cssConfig.watch, gulp.series ('css'));

  сделано();

}));
  

: преобразование методов задач в модули ES6

Большинство конфигураций gulpfile.js будут работать в Gulp.js 4.0 после преобразования массивов задач в вызовы series () и завершение сигнала асинхронных функций.

Хотя метод определения task () по-прежнему поддерживается, новый модуль ES6 экспортирует шаблон предлагает несколько преимуществ:

1. Можно определить частные задачи, которые можно вызывать в файле gulpfile.js , но не из команды gulp .
2. Функции могут передаваться по ссылке, а не по имени строки, поэтому синтаксические ошибки могут быть выделены редакторами.
3. На одну и ту же функцию можно ссылаться, используя любое количество имен задач.
4. Легче определять сложные зависимости в series () и / или parallel () .

Возьмите следующие Gulp.js 3 изображений и css задач:

  гл.задача ('изображения', () =>

  gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build))

);

gulp.task ('css', ['изображения'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build))

);
  

Их можно преобразовать для использования шаблона модуля Gulp.js 4:

  изображений функций () {

  вернуть gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build));

}
export.images = изображения;
export.pics = изображения;


function css () {

  вернуть gulp.src (cssConfig.SRC)
    
    .pipe (gulp.dest (cssConfig.build));

}
export.css = gulp.series (изображения, css);
export.styles = exports.css;
  

Примечание. Необходимо добавить операторы return , потому что стрелка ES6 => функции с неявным возвратом были изменены на стандартные определения функций.

В этом примере Gulp.js 4:

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

Задайте exports.default , чтобы определить запуск задачи по умолчанию, когда gulp выполняется из командной строки без конкретной задачи.

Глоток доброты

Пример задач CSS, который оптимизирует изображения, компилирует Sass, минимизирует CSS и выполняет перезагрузку в реальном времени при изменениях, преобразовал менее одного часа. Изучите код на GitHub, чтобы увидеть:

Требуется некоторое время, чтобы (правильно) прибыть, но Gulp.js 4 предоставляет возможности для определения задач, которые были бы непрактичными в версии 3.Обновление программного обеспечения может показаться пустой тратой усилий при разработке, но вы будете вознаграждены более быстрым и надежным набором задач, что в конечном итоге сэкономит время.

Как установить Gulp.js в Ubuntu 20.04 LTS

В этом руководстве мы покажем вам, как установить Gulp.js в Ubuntu 20.04 LTS. Для тех из вас, кто не знал, Gulp — это набор инструментов, который помогает разработчикам автоматизировать болезненный рабочий процесс во время разработки. Gulp позволяет нам автоматизировать процессы и с легкостью выполнять повторяющиеся задачи.Он обеспечивает функцию конвейерного вывода одной задачи в качестве ввода для другой.

В этой статье предполагается, что у вас есть хотя бы базовые знания Linux, вы знаете, как использовать оболочку, и, что наиболее важно, вы размещаете свой сайт на собственном VPS. Установка довольно проста и предполагает, что вы работаете с учетной записью root, в противном случае вам может потребоваться добавить « sudo » к командам для получения привилегий root. Я покажу вам пошаговую установку Gulp.js на Ubuntu 20.04 (Focal Fossa).Вы можете следовать тем же инструкциям для Ubuntu 18.04, 16.04 и любого другого дистрибутива на основе Debian, например Linux Mint.

Установите Gulp.js на Ubuntu 20.04 LTS Focal Fossa

Шаг 1. Во-первых, убедитесь, что все ваши системные пакеты обновлены, выполнив следующие команды apt в терминале.

 sudo apt update
sudo apt upgrade
sudo apt install build-essential 

Шаг 2. Установка Node.js.

Теперь выполните следующие команды, чтобы добавить узел.js PPA в вашей системе Ubuntu и установите его:

 sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs 

Убедитесь, что установка прошла успешно:

 node --version
npm --version 

Шаг 2. Установка Gulp.js в Ubuntu 20.04.

Теперь мы запускаем следующие команды для глобальной установки Gulp CLI в вашей системе Ubuntu:

 npm install -g gulp-cli
npm install --save-dev gulp 

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

 $ gulp --version

Версия CLI: 2.2.1
Локальная версия: 4.0.3 

Поздравляем! Вы успешно установили Gulp.js. Благодарим за использование этого руководства по установке Gulp.js в системе Ubuntu 20.04 LTS Focal Fossa. Для получения дополнительной помощи или полезной информации мы рекомендуем вам посетить официальный сайт Gulp.js.

Предложение услуг по управлению VPS

Установка Gulp и настройка среды

В предыдущей статье мы узнали об основах Gulp Task runner. В этом руководстве мы изучим основные этапы установки Gulp.

Основные шаги установки:

Шаг 1. Сначала нам нужно установить Node.js для запуска задач Gulp. Чтобы установить node.js, загрузите Node.js с https://nodejs.org/en/

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

Шаг 2. После загрузки последней версии установщика запустите программу установки, чтобы установить NodeJ на свой компьютер.

Шаг 3 — После того, как вы закончите установку node.js на свой компьютер, установите переменные среды с помощью следующих шагов —

Настройка переменных среды

Щелкните правой кнопкой мыши «Мой компьютер».

Выберите «Свойства».

Выберите вкладку «Дополнительно» и нажмите «Переменные среды».

В окне «Переменные среды» дважды щелкните Путь, как показано на следующем экране.

Нажмите кнопку «Изменить», чтобы отредактировать переменную. Окно переменных, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm.

В более старых версиях Windows

Если в этот путь уже добавлены переменные, вам нужно поставить точку с запятой (;) после этого и добавить путь node.js, как показано —

В окне 10 —

Окно 10 предоставило новый интерфейс для добавление нового значения в системную переменную или переменную среды.Нажмите «Создать», чтобы создать заполнитель для нового значения.

Шаг 4. Откройте командную строку и введите следующую команду. Он отобразит версию Node.js, которую мы только что установили.

 node -v 

Шаг 5. Чтобы установить пакеты узлов, нам понадобится менеджер пакетов узлов. Чтобы проверить версию npm, нам нужно запустить команду ниже.

 npm -v 

Шаг 7. Чтобы установить средство запуска задач gulp, нажмите команду ниже. -g означает global, то есть gulp будет установлен глобально и будет доступен для всех проектов.

 npm install gulp -g 

Шаг 6. Откройте командную строку и введите следующую команду. Он отобразит версию Node.js, которую мы только что установили.

 gulp -v 

Настройка среды разработки SharePoint Framework

• 29.06.2021
• На чтение 6 минут

В этой статье

Вы можете использовать любой текстовый редактор для создания решений SharePoint Framework.Вы также можете использовать среду macOS, Windows или Linux.

Вы также можете выполнить следующие действия, просмотрев это видео на канале SharePoint PnP YouTube:

Важно

Следующие шаги предполагают, что вы создаете решения для SharePoint Online с использованием последней версии SharePoint Framework. Если вы создаете решения для SharePoint Server 2019 или SharePoint Server 2016, обратитесь к дополнительной документации, указанной в разделе См. Также ниже.

Установите Node.js

Установите последнюю версию Node.js LTS v14 .

Эта версия является рекомендуемой в настоящее время версией Node.js для использования с SharePoint Framework (, если иное не указано ниже ).

Важно

Node.js часто обновляется и доступен на нескольких платформах, включая macOS, Windows и Linux. Поскольку точные ссылки для скачивания часто меняются, на этой странице нет ссылок на них. Вместо этого используйте приведенные ниже сведения, чтобы определить, какой установщик загрузить для вашей платформы.

Имейте в виду, что Node.js всегда поддерживает два разных выпуска: LTS и Текущая версия. SharePoint Framework поддерживается только в версиях LTS. Для получения дополнительной информации о выпусках долгосрочной поддержки (LTS) Node.js см .: Node.js> Выпуски.

Подсказка

Веб-сайт Node.js всегда рекомендует последнюю версию установщика как для LTS, так и для текущей версии. Чтобы загрузить определенные версии версий Node.js, используйте страницу Node.js> Загрузки> Предыдущие версии.

• Пользователи Windows могут использовать установщики * .msi для x86 или x64 в зависимости от вашей установки Windows. Обычно доступно только два файла * .msi с именами, похожими на node-v {номер-версии} -x [86 | 64] .msi .
Пользователи
• macOS могут использовать установщик * .pkg , который обычно называется node-v {номер-версии} .pkg .

Вы можете проверить, установлен ли у вас уже Node.js, включая установленную версию, выполнив следующую команду:

  узел -v
  

SharePoint Framework v1.12.1 поддерживается в следующих версиях Node.js:

• Node.js v10.13.0 + ( Дубний )
• Node.js v12.13.0 + ( эрбий )
• Node.js v14.15.0 + ( Фермий )

Осторожно

Если вы создаете компоненты SharePoint Framework для локальных развертываний SharePoint, обратитесь к дополнительным страницам, перечисленным в разделе См. Также для получения дополнительной информации.

Установить редактор кода

Для создания веб-части можно использовать любой редактор кода или среду IDE, поддерживающую разработку на стороне клиента, например:

В шагах и примерах в этой документации используется код Visual Studio, но вы можете использовать любой редактор по вашему выбору.

Набор инструментов для разработки и сборки SharePoint Framework использует различные популярные инструменты с открытым исходным кодом. Хотя большинство зависимостей включено в каждый проект, вам необходимо установить несколько зависимостей глобально на вашу рабочую станцию.

Подсказка

Вы можете установить все три из следующих инструментов в одной строке:

  npm install gulp yo @ microsoft / generator-sharepoint --global
  

Установить Gulp

Gulp — это средство выполнения задач на основе JavaScript, используемое для автоматизации повторяющихся задач.Цепочка инструментов сборки SharePoint Framework использует задачи Gulp для сборки проектов, создания пакетов JavaScript, а полученные пакеты используются для развертывания решений.

Введите следующую команду для установки Gulp:

  npm install gulp --global
  

Установите Yeoman

Yeoman помогает вам начать новые проекты и предлагает передовые методы и инструменты, которые помогут вам оставаться продуктивными. Инструменты разработки на стороне клиента SharePoint включают генератор Yeoman для создания новых веб-частей.Генератор предоставляет общие инструменты сборки, общий шаблонный код и общий веб-сайт для игр, на котором размещаются веб-части для тестирования.

Введите следующую команду для установки Yeoman:

  npm install yo --global
  

Установите генератор Yeoman SharePoint

Генератор веб-частей Yeoman SharePoint помогает быстро создать проект клиентского решения SharePoint с правильной цепочкой инструментов и структурой проекта.

Чтобы установить генератор Yeoman в SharePoint Framework глобально, введите следующую команду:

  npm install @ microsoft / generator-sharepoint --global
  

Дополнительные сведения о генераторе Yeoman SharePoint см. В разделе Проекты шаблонов с использованием генератора Yeoman SharePoint.

Установите современный веб-браузер

Вы должны использовать современный веб-браузер, такой как Microsoft Edge, Google Chrome или Firefox, в качестве браузера для разработки. Локальная рабочая среда не поддерживает использование Internet Explorer 11.

Доверяя самозаверяющему сертификату разработчика

Локальный веб-сервер SharePoint Framework, используемый при тестировании пользовательских решений из среды разработки, по умолчанию использует HTTPS. Это реализовано с использованием самозаверяющего SSL-сертификата разработки.Самозаверяющие сертификаты SSL не пользуются доверием в вашей среде разработки. Сначала необходимо настроить среду разработки, чтобы доверять сертификату.

Служебная задача включается в каждый проект SharePoint Framework в виде задачи gulp. Вы можете сделать это сейчас или подождать, пока не создадите свой первый проект, как описано в руководстве Создание первой клиентской веб-части SharePoint (Hello World, часть 1).

После создания проекта с помощью генератора Yeoman для SharePoint Framework выполните следующую команду из корневой папки проекта.

  глоток доверия-разработчика-сертификат
  

Примечание

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

Ниже приведены некоторые инструменты, которые также могут пригодиться:

Следующие шаги

Теперь вы готовы создать свою первую клиентскую веб-часть!

SPFx и SharePoint Server (локальная версия)

SPFx доступен в SharePoint Online (SPO), SharePoint Server 2019 и SharePoint Server 2016.Инструкции по настройке на этой странице предполагают, что вы создаете решения с использованием последней версии SPFx для SharePoint Online.

SharePoint Online содержит все версии SPFx, включая все предыдущие и последние версии. Каждое решение SPFx содержит информацию, указывающую SPO, от какой среды выполнения SPFx оно зависит.

Если вы создаете решения для локального развертывания SharePoint Server, ознакомьтесь с разделом См. Также, чтобы получить подробную информацию о конкретных версиях SharePoint. Каждая локальная версия SharePoint поддерживает только определенную версию SPFx.Это может вызвать сложные конфигурации среды разработки, если вы создаете разные решения для разных развертываний SharePoint.

В зависимости от вашего сценария вам может потребоваться поддерживать разные среды разработки. Разработчики использовали следующие подходы для решения этих проблем:

• виртуальных машин

• Докер

• Диспетчер версий узлов (NVM)

• SharePoint Server 2016 использует SharePoint Framework (SPFx) v1.1.

• SharePoint Server 2019 использует SharePoint Framework (SPFx) v1.4.1.

Устранение неисправностей

Проверить версию глобально установленных пакетов

Чтобы получить список всех глобально установленных пакетов, выполните следующую команду:

  список npm --global --depth = 0️
  

Невозможно доверять самозаверяющему сертификату разработки

Если у вас возникли проблемы с доверием своему самозаверяющему сертификату при запуске gulp trust-dev-cert и вы убедились, что установлены правильные версии всех зависимостей, одно решение, которое, как мы обычно видим, устраняет проблему, — это удалить все пакеты, установленные глобально, удалите Node.js, перезагрузитесь и начните снова.

В некоторых случаях выполнение команды gulp trust-dev-cert не дает желаемого эффекта доверия самозаверяющему сертификату разработки на вашем компьютере. В таких редких случаях, как эти, вам может потребоваться удалить скрытую папку, созданную в папке вашего профиля. Найдите и удалите папку /.gcb-serve-data , а затем снова попробуйте доверять самозаверяющему сертификату разработки.

Невозможно установить пакеты с помощью NPM — корпоративные прокси

Если ваша среда разработки находится за корпоративным прокси-сервером, вам необходимо настроить NPM для использования этого прокси.Обратитесь к документации npm-config о том, как настроить среду разработки за корпоративным прокси … в частности, прокси и http-proxy . Дополнительная информация: Как настроить Node.js и Npm за корпоративным веб-прокси

См. Также

Инструменты для внешнего интерфейса | Lando

Большинство современных инструментов внешнего интерфейса полагаются на диспетчер пакетов NPM. В этом уроке мы покажем вам, как добавить Node в ваше приложение, загрузить такие инструменты, как Gulp / Grunt / Webpack, и запустить их в вашем приложении Lando.

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

Добавить службу узла

Предполагая, что вы начинаете с «Lando-ized» приложения, откройте файл .lando.yml в корне каталога вашего приложения. В этом примере мы предполагаем, что вы используете очень простой рецепт LAMP.

Чтобы установить наши инструменты внешнего интерфейса, нам нужно иметь возможность запускать Node.К счастью, нам очень легко добавить базовую службу Node в наше приложение:

Обратите внимание на раздел build . Эта команда bash автоматически запускается, когда мы запускаем наше приложение, устанавливая любые пакеты Node, указанные в нашем файле package.json.

Добавление Grunt / Gulp / Etc.

Хотя теперь мы можем устанавливать пакеты Node для нашего проекта, нам все еще нужно иметь возможность устанавливать глобальные инструменты, такие как Grunt, Gulp или другие средства запуска задач, которые составляют основу наших инструментов внешнего интерфейса.К счастью, Ландо упрощает это с помощью тега globals :

Вы можете сделать то же самое для любого проекта NPM; например Grunt будет grunt-cli: "последний" . Это эквивалентно установке пакета с npm install -g имя-проекта .

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

Полностью вооруженные и настраиваемые версии пакетов

Вы можете привязать инструменты своего приложения к любой версии пакета, которая вам нравится. Не использовать узел: 6.10? Измените на одну из других доступных версий в служебной документации. И вы можете загрузить любую версию глобального сервиса, какую пожелаете. Например, если вы хотите привязать свою команду к чему-то более стабильному, чем последняя версия gulp-cli, измените эту запись в глобальных файлах на gulp-cli: 1.3.0 .

Почти готово! Все наши службы установлены, но как запустить команду на лету, скажем, запустить задачу просмотра или запустить lando npm install hot-new-thing , чтобы начать экспериментировать с новым пакетом? Мы могли бы подключиться к нашему контейнеру узлов по SSH, но это SO 2016.Вместо этого мы представим наш новый инструментарий через интерфейс командной строки, добавив этот раздел tooling в наш файл .lando.yml :

После перезапуска приложения вы сможете запустить lando node , lando gulp или lando npm и запустить соответствующие команды.