Как запустить gulp консоль в vs code
Перейти к содержимому

Как запустить gulp консоль в vs code

  • автор:

Отладка решений SharePoint Framework в Visual Studio Code

Visual Studio Code — это популярный редактор кода, часто используемый для создания решений SharePoint Framework. Настроив отладку решения SharePoint Framework в Visual Studio Code, вы можете эффективнее пошагово выполнять код и исправлять ошибки.

Вы также можете увидеть необходимые действия для включения отладки в Visual Studio Code в этом видео на канале Microsoft 365 Platform Community (PnP) YouTube:

Необходимые компоненты

Самый простой способ настроить Visual Studio Code (VS Code) для отладки SharePoint Framework решений — использовать отладчик JavaScript, включенный в VS Code, для отладки Chrome & Edge.

Вам также необходим браузер Google Chrome или Microsoft Edge.

Конфигурации отладки

Конфигурация отладки находится в файле ./vscode/launch.json в папке рабочей области Visual Studio Code:

Настройка точки останова

Точка останова в клиентской веб-части SharePoint Framework в Visual Studio Code

  1. В Visual Studio Code откройте основной исходный файл веб-части и добавьте точку останова в первой строке метода render() . Для этого выберите поле слева от номера строки или выделите строку кода в редакторе и нажмите клавишу F9.
  2. В Visual Studio Code откройте меню Вид и выберите параметр Интегрированный терминал или нажмите клавиши CTRL + ` .
  3. В терминале выполните следующую команду:
gulp serve --nobrowser 

Команда gulp serve в интегрированном терминале Visual Studio Code

При этом будет выполнена сборка решения SharePoint Framework и запустится локальный веб-сервер для предоставления выходных файлов. Так как отладчик запускает собственный экземпляр браузера, мы используем аргумент —nobrowser, чтобы задача serve не открывала окно браузера.

Начало отладки с помощью Visual Studio Code

Когда задача gulp будет выполнена, переместите курсор в область кода Visual Studio Code и нажмите клавишу F5 (или выберите в меню Отладка параметр Запустить отладку).

Будет запущен режим отладки Visual Studio Code: цвет строки состояния изменится на оранжевый, а также откроется новое окно Google Chrome с рабочей областью SharePoint.

В этот момент точка останова отключена, так как код веб-части еще не загружен. SharePoint Framework загружает веб-части по запросу только после их добавления на страницу.

Visual Studio Code в режиме отладки отображается рядом с окном Google Chrome с рабочей областью SharePoint

Добавление веб-части на холст

Чтобы убедиться, что отладка работает, добавьте веб-часть на холст в рабочей области.

Панель элементов веб-части в рабочей области SharePoint

Обратите внимание, что после загрузки кода на страницу индикатор точки останова изменился на активный.

Активная точка останова после добавления веб-части на холст

Если теперь обновить страницу, в Visual Studio Code будет достигнута точка останова, и вы сможете проверить все свойства и пошагово выполнить код.

Достигнутая точка останова в Visual Studio Code

Отладка решения с помощью размещенной рабочей области

Чтобы проверить взаимодействие решения с SharePoint, можно использовать размещенную версию рабочей области SharePoint, доступную в каждом клиенте Microsoft 365 по адресу https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

При создании решений SharePoint Framework вы будете регулярно выполнять такие проверки, поэтому рекомендуем создать отдельную конфигурацию отладки для размещенной версии рабочей области SharePoint.

Отладка решения веб-части с помощью размещенной рабочей области

  1. Откройте файл .vscode/launch.json и измените свойство url в конфигурации размещенной рабочей области на URL-адрес вашего сайта SharePoint.
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 
  • В Visual Studio Code откройте панель Отладка и в списке Конфигурации выберите новую конфигурацию Размещенная рабочая область. Конфигурация размещенной рабочей области, выбранная в раскрывающемся списке конфигураций отладки в Visual Studio Code
  • Запустите отладку, нажав клавишу F5 или выбрав в меню Отладка параметр Запустить отладку. Visual Studio Code переключится в режим отладки (это будет видно по оранжевой строке состояния), а расширение Debugger for Chrome откроет новое окно Google Chrome со страницей входа в Microsoft 365. Страница входа в Microsoft 365, открытая в Google Chrome после запуска отладки в размещенной рабочей области
  • После входа добавьте веб-часть на холст и обновите рабочую область. В Visual Studio Code будет достигнута точка останова, а вы сможете проверить переменные и пошагово выполнить код. Достигнутая точка останова в Visual Studio Code при отладке клиентской веб-части SharePoint Framework в размещенной рабочей области
  • Отладка решения расширения с помощью размещенной рабочей области

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

      Откройте файл .vscode/launch.json и измените свойство url в конфигурации размещенной рабочей области на URL-адрес вашего сайта SharePoint.

    "url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx", 
  • В Visual Studio Code откройте панель Отладка и в списке Конфигурации выберите новую конфигурацию Размещенная рабочая область. Конфигурация размещенной рабочей области, выбранная в раскрывающемся списке конфигураций отладки в Visual Studio Code
  • После запуска gulp serve в терминале начните отладку, нажав клавишу F5 или выбрав в меню Отладка параметр Запустить отладку. Visual Studio Code переключится в режим отладки (это будет видно по оранжевой строке состояния), а расширение Debugger for Chrome откроет новое окно Google Chrome со страницей входа в Microsoft 365. Страница входа в Microsoft 365, открытая в Google Chrome после запуска отладки в размещенной рабочей области
  • На вкладке рабочей области, открытой в вашем браузере, перейдите на страницу SharePoint Online, в которой вы хотите протестировать расширение.
  • Добавьте в URL-адрес приведенные ниже параметры строки запроса. Обратите внимание, что идентификатор необходимо обновить в соответствии с идентификатором вашего расширения. Он указан в файле HelloWorldApplicationCustomizer.manifest.json.

    Осторожностью Отступы разрывов & строк добавлены в следующий фрагмент кода для удобства чтения. Следующий текст должен находиться в одной строке без пробелов.

    ?loadSPFX=true &debugManifestsFile=https://localhost:4321/temp/manifests.js &customActions= >> 
    • loadSPFX=true: обеспечивает загрузку SharePoint Framework на странице. Для загрузки платформы должно быть зарегистрировано по крайней мере одно расширение. Так как компоненты еще не зарегистрированы, платформу нужно загрузить вручную.
    • debugManifestsFile: указывает, что нужно загрузить компоненты SPFx, сохраненные локально. Загрузчик ищет компоненты только в каталоге приложений (для развернутого решения) и на сервере манифестов SharePoint (для системных библиотек).
    • customActions: имитирует дополнительное действие. При развертывании и регистрации этого компонента на сайте вы создадите объект CustomAction и опишете все свойства, которые можно задать для него.
      • Key: используйте GUID расширения в качестве ключа, связываемого с дополнительным действием. Он должен соответствовать идентификатору расширения, указанному в файле manifest.json.
      • Location: тип дополнительного действия. Используйте ClientSideExtension.ApplicationCustomizer для расширения «Настройщик приложений».
      • Properties: необязательный объект JSON, содержащий свойства, доступные посредством элемента this.properties . В этом примере HelloWorld он определяет свойство testMessage .

      Полный URL-адрес должен выглядеть примерно так:

      Отступы разрывов & строк добавлены в следующий фрагмент кода для удобства чтения. Следующий текст должен находиться в одной строке без пробелов.

      https://contoso.sharepoint.com/Lists/Contoso/AllItems.aspx ?loadSPFX=true &debugManifestsFile=https://localhost:4321/temp/manifests.js &customActions= >> 
    • Выберите Загрузить скрипты отладки, чтобы продолжить загрузку скриптов с домена localhost. Запрос разрешения на отладку манифеста на страницеТеперь при загрузке страницы вы увидите на ней расширение (в данном случае расширение команды представления списка): Расширение SPFx, загруженное на страницеКроме того, можно переключать точки останова и выполнять код пошагово: Достижение точек останова в Visual Studio Code
    • Отладка с помощью Microsoft Edge или более ранних проектов

      Если вы используете более раннюю версию генератора Yeoman для SharePoint Framework или хотите выполнить отладку с помощью Microsoft Edge, следуйте инструкциям ниже, чтобы создать файл launch.json вручную.

      Чтобы выполнить отладку с помощью Microsoft Edge, необходимо установить обновление Windows 10 за апрель 2018 г., которое включает в себя протокол Microsoft Edge DevTools.

      Создание конфигурации отладки для размещенной рабочей области

      1. В Visual Studio Code откройте файл .vscode/launch.json.
      2. Для браузера Microsoft Edge скопируйте имеющуюся конфигурацию отладки и укажите URL-адрес размещенной рабочей области:
      < "version": "0.2.0", "configurations": [ < "name": "Hosted workbench", "type": "msedge", "request": "launch", "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx", "webRoot": "$", "sourceMaps": true, "sourceMapPathOverrides": < "webpack:///.././src/*": "$/src/*", "webpack:///../../../src/*": "$/src/*", "webpack:///../../../../src/*": "$/src/*", "webpack:///../../../../../src/*": "$/src/*" > > ] > 
      < "version": "0.2.0", "configurations": [ < "name": "Hosted workbench", "type": "pwa-chrome", "request": "launch", "url": "https://contoso.sharepoint.com/_layouts/workbench.aspx", "webRoot": "$", "sourceMaps": true, "sourceMapPathOverrides": < "webpack:///.././src/*": "$/src/*", "webpack:///../../../src/*": "$/src/*", "webpack:///../../../../src/*": "$/src/*", "webpack:///../../../../../src/*": "$/src/*" >, "runtimeArgs": [ "--remote-debugging-port=9222", "-incognito" ] > ] > 

      См. также

      • Отладка веб-части SharePoint Framework (Элио Струйф)
      • Отладка веб-части SPFx React с помощью Visual Studio Code (Велин Георгиев)
      • Генератор Yeoman для SharePoint Framework
      • Обзор SharePoint Framework

      Что не так с Gulp?

      Я только знакомлюсь с Gulp. Мне интересно разобраться в причине. Пользуюсь редактором кода VS Code, решила установить Gulp. Скачала Node JS и установила нужные пакеты в терминале редактора кода. Эврика! css компилируется в scss. Пока открыт редактор, сайт всё отображает корректно. Когда я закрываю редактор, то вся вёрстка ломается. Подскажите, пожалуйста, что не так?

      const gulp = require('gulp'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const watch = require('gulp-watch'); gulp.task('sass-compile', function() < return gulp.src('./scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./css/')) >) gulp.task('watch', function() < gulp.watch('app/scss/**/*.scss', gulp.series('sass-compile')); >); 
      < "name": "project-3", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": < "gulp-cli": "^2.1.0" >, "devDependencies": < "gulp": "^4.0.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-watch": "^5.0.1" >, "scripts": < "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" > 

      Отслеживать
      13.8k 12 12 золотых знаков 43 43 серебряных знака 76 76 бронзовых знаков
      задан 2 апр 2019 в 7:08
      Victoria Pisareva Victoria Pisareva
      57 7 7 бронзовых знаков
      У вас ничего не запускается в IDE (редактор) пока вы работаете с проектом?
      2 апр 2019 в 7:13
      VS Code мой текущий редактор. Не работает сайт в браузере, когда я выхожу из редактора
      2 апр 2019 в 7:14
      вопрос решили этот ?
      30 июн 2019 в 11:57

      1 ответ 1

      Сортировка: Сброс на вариант по умолчанию

      Вы запускаете из среды разработки (VS Code) и Gulp и локальный сервер с сайтом (команда go live server ), поэтому при закрытии IDE у вас перестает работать сайт. Чтобы сайт в браузере продолжал работать после того, как вы закрыли IDE — необходимо запускать Gulp не в IDE и добавить запуск дев-сервера из gulpfile .

      Чтобы в браузере открылась веб-страница, нужен локальный сервер. Достаточно доставить пакет gulp-webserver (команда npm install —save-dev gulp-webserver ) и немного модернизировать gulpfile :

      const gulp = require('gulp'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const watch = require('gulp-watch'); const webserver = require('gulp-webserver'); gulp.task('webserver', function() < gulp.src('app') .pipe(webserver(< livereload: true, directoryListing: true, open: true >)); >); gulp.task('sass-compile', function() < return gulp.src('./scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./css/')) >) gulp.task('watch', function() < gulp.watch('app/scss/**/*.scss', gulp.series('sass-compile')); >); gulp.task('default', gulp.parallel('webserver', 'watch')); 

      После этого зайти через консоль (я использую Git Bash, но можно и через CMD) в каталог, содержащий gulpfile и package.json , и оттуда выполнить команду запуска Gulp через команду gulp . На экране должно появиться что-то вроде следующей картины (запуск через gulp — запускает задачу по-умолчанию, она же default ):

      введите сюда описание изображения

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

      Quick Start#

      If you’ve previously installed gulp globally, run npm rm —global gulp before following these instructions. For more information, read this Sip.

      Check for node, npm, and npx#

      node —version

      Output: v8.11.1

      npm —version

      Output: 5.6.0

      npx —version

      Output: 9.7.1

      If they are not installed, follow the instructions here.

      Install the gulp command line utility#

      npm install —global gulp-cli

      Create a project directory and navigate into it#

      npx mkdirp my-project
      cd my-project

      Create a package.json file in your project directory#

      This will guide you through giving your project a name, version, description, etc.

      Install the gulp package in your devDependencies#

      npm install —save-dev gulp

      Verify your gulp versions#

      gulp —version

      Ensure the output matches the screenshot below or you might need to restart the steps in this guide.

      Output: CLI version 2.0.1 & Local version 4.0.0

      Create a gulpfile#

      Using your text editor, create a file named gulpfile.js in your project root with these contents:

      Настройки Gulp-тасков в Visual Studio Code

      Вообще, эти инструменты настолько хороши, что грядущий релиз ASP.NET отказался от своей фирменной комплектации и диспетчеров задач в пользу широко используемых обществом инструментов. А теперь они являются главными элементами в Visual Studio и Visual Studio Code. Сегодня я покажу вам как использовать Gulp в Visual Studio Code, чтобы запустить следующие наиболее часто используемые задачи:

      • Компиляция TypeScript в JavaScript
      • Компиляция SCSS-файла в чистый CSS
      • БОНУС — Добавление пары заданий для автоматического создания JS и CSS при изменения кода

      Хотя Gulp является автономным инструментом, VS Code имеет отличную внешнюю поддержку для него. Это означает, что до тех пор, пока у вас есть gulpfile.js в корневом каталоге вашего проекта, VS-код будет использовать его для создания задач, доступных в IDE. Давайте начнем:

      Создание проекта

      Я предполагаю, что вы уже установили TypeScript и VSCode. Если нет, посмотрите здесь. Для создания проекта выберите нужное местоположение и создайте новый каталог по имени VSGulpTest .

      Инсталляция npm и Gulp

      Начнем с начала. Npm — менеджер пакетов Node (отсюда и название) и для того, чтобы получить его вам нужно установить Node.js. Это можно сделать двумя способами:

      1. с помощью chocalateyNuget choco install nodejs
      2. с помощью исполняемого файла, скаченного с официального сайта

      Теперь нам ничто не мешает установить Gulp. Наберите в командной строке Node.js следующее: npm install —global gulp и нажмите клавишу Enter для выполнения. Эта команда устанавливает Gulp глобально. Я cтараюсь избежать глобальных установок, но, установленный локально, Gulp не будет работать в Visual Studio Code. Все остальные пакеты будут установлены локально.

      Далее, нам необходимо инициализировать npm на текущем проекте. Для этого откройте командную строку Node.js, перейдите в корневой каталог вашего проекта и выполните следующую команду: npm init

      В результате в корневом каталоге вашего проекта будет создан файл package.json. Этот файл используется Node.js для отслеживания установленных пакетов. Командная строка проведет вас через последовательность вопросов (Wizard CLI) для того, чтобы сгенерировать параметры конфигурации. Ни один из этих параметров не является особенно важным, вы можете оставить все из них пустыми, или скопировать мои настройки. На последнем шаге просто наберите yes для создания файла.

      Установка необходимых пакетов

      Gulp – это простой диспетчер задач, поэтому сам по себе он особо пользы не несет. Нам нужны плагины, чтобы помочь нам выполнить доставленные задачи, а именно: typescript, merge и sass. Чтобы установить плагины, вернитесь к командной строке Node.js, перейдите в корневой каталог вашего проекта, а затем выполните следующие команды, по одной за раз:

      npm install gulp-sass --save-dev npm install gulp-typescript npm install merge2 

      Эти команды будут устанавливать необходимые плагины и ряд зависимостей. Эти плагины будут вызываться из Gulp для выполнения наших задач.

      Добавляем код

      Прямо сейчас наш проект пуст. Давайте добавим пару TypeScript файлов, файл Sass и HTML-файл, чтобы сделать набросок сайта. Создайте файлы animal.ts и human.ts и вставьте соответствующий код.

      //animal.ts class Animal < name:string; constructor(theName: string) < this.name = theName; >move(meters: number = 0) < alert(this.name + " пробежал " + meters + "м."); >> //var testAnimal = new Animal(1234);
      //human.ts class Human < name: string; constructor (yourHumanName:string )< this.name = yourHumanName; >callHuman = function() < console.log('Привет, ' + this.name); >>

      Создайте файл main.scss для CSS кода и файл index.html для главной страницы сайта. И снова используйте код ниже, или добавьте свой собственный код в соответствующие файлы.

      //main.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; $header-color: green; body < font: 100% $font-stack; color: $primary-color; h1< font-family: $font-stack; color: $header-color; >>
           

      Привет, мир!

      Привет, помните меня?

      Добавляем Gulp-таски

      Пришло время соединить все вместе и получить рабочий сайт. В корневом каталоге вашего проекта создайте файл gulpfile.js и добавьте следующий код:

      var gulp = require('gulp'); var ts = require('gulp-typescript'); var merge = require('merge2'); var sass = require('gulp-sass'); gulp.task('scripts', function() < var tsResult = gulp.src('*.ts') .pipe(ts(< declarationFiles: true, noExternalResolve: true, noImplicitAny: true, out: 'main.js' >)); return merge([ tsResult.dts.pipe(gulp.dest('release/definitions')), tsResult.js.pipe(gulp.dest('release/js')) ]); >); gulp.task('sass', function () < gulp.src('*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest('./css')); >); gulp.task('watch', function () < gulp.watch('*.scss', ['sass']); gulp.watch('*.ts', ['scripts']); >);

      Я постараюсь кратко объяснить, что происходит в этом файле. В верхней части файла мы импортируем все плагины, после чего создаем 3 задачи:

      scripts компилит *.ts файлы в *.js, объединяет весь код в один файл, генерирует файлы (.d.ts) и сохраняет созданные файлы в указанном месте ( release ) sass компилит *.scss файлы в *.css и помещает созданный файл в указанном месте ( css ) watch мониторит изменение файлов *.scss и *.ts на наличие каких-либо изменений и автоматически выполняет соответствующую задачу

      Теперь мы почти готовы к запуску. Находясь в Visual Studio Code, нажмите клавиши Ctrl+Shift+B для определения нового диспетчера задач.

      Нажмите на Настроить средство выполнения задач. Это выведет файл tasks.json. Удалите все, что в нем есть и добавьте следующий код:

      Этот код дает указание Visual Studio Code использовать Gulp в качестве главного диспетчера задач, а внутри мы объявляем 3 задачи, которые мы хотим сделать доступными для IDE. Они должны соответствовать задачам, определенным в файле gulpfile.js . Вы всегда можете пропустить не нужные вам задачи, но любая новая задача должна быть определена в gulpfile.js первой.

      Если вы нажмете клавиши Ctrl+Shift+P и выберите Run Task (запуск задачи), перед вами будет раскрывающийся список задач, которые мы перечислили в файле tasks.json. Выберите таск watch и запустите его. Вы заметите, что Окно Вывода (Output Window) находится в фокусе, а в нижнем левом углу есть бегунок, дающий понять, что задача в данный момент активна.

      Каждый раз, когда вы делаете изменения в *.scss, или *.ts файлах и сохраняете результат, будет вызываться соответствующая задача для выполнения. После этого вам нужно будет обновить страницу в браузере, чтобы увидеть как изменилась ваша страница.

      Чтобы остановить задачу нажмите клавиши Ctrl+Shift+P и выберите Terminate running task (Завершить запущенную задачу). К счастью, IntelliSense запускается практически в самом начале, поэтому вручную много печатать вам не придется.

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

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *