Странные времена. Я никогда не перестаю удивляться тем инструментам, которые вторглись в нашу первозданную среду разработки. Один из таких инструментов – gulp, и если вы не слышали о нем, не беспокойтесь. Почему вы должны об этом слышать?
Пару недель назад я представил свой доклад о gulp, объяснив, как я упростил и ускорил разработку надстроек управления. Если вы настоящий разработчик NAV и не отнесли всю эту серию по gulp к категории «кого это волнует» , то, скорее всего, вы останетесь со мной сегодня и узнаете, как чтобы настроить gulp и начать использовать его в VS Code.
В этом посте я объясню, что (и почему) вам нужно сделать, чтобы запустить gulp, а затем я создать очень простую задачу gulp. Это первая публикация в серии, в которой я надеюсь создать сквозной пример, который вы даже сможете применить на практике в своих проектах.
Приступим.
Gulp – это модуль Node.js, а это значит, что на вашем компьютере должен быть установлен Node.js. Несмотря на то, что VS Code использует Node.js внутри, на самом деле он использует его только внутри, и вы должны установить Node.js отдельно, чтобы иметь возможность запускать любой из них. Чтобы проверить, установлен ли у вас узел, запустите командную строку и выполните следующую команду:
node --version
(В качестве альтернативы, запустите код VS и нажмите View> Terminal или нажмите Ctrl + `на клавиатуре. Все примеры в этой и будущих публикациях на gulp предполагают, что вы вводите все команды в окне терминала из VS Code, и что в нем открыто рабочее пространство AL.)
Если приведенная выше командная строка не производит никаких результат или выдает ошибку, затем перейдите на https://nodejs.org/en/и сначала установите Node.js.
Теперь, когда у вас есть Node.js, следующим шагом будет установка глоток. Как и любые модули Node.js, вы можете установить gulp глобально или локально. Локальная установка выполняется для каждого проекта, рабочего пространства, папки или того, что вы хотите назвать своим локальным каталогом. Модуль, установленный локально, доступен для Node.js только тогда, когда вы находитесь внутри этой локальной папки. Модуль, установленный глобально, доступен для Node.js на всей машине, независимо от того, в какой папке, проекте или рабочем пространстве вы находитесь.
Как вы хотите установить модуль, зависит от того, как он будет используемый. Некоторые модули предоставляют только функции времени выполнения JavaScript, которые можно вызывать из файлов JavaScript, выполняемых Node.js – обычно они устанавливаются локально. Однако, если модуль предоставляет функции командной строки, он должен быть установлен глобально.
Это может быть не совсем ясно из документации, которую вы можете найти в Интернете, но gulp должен быть установлен как глобально, так и локально. Глобальная установка необходима только для предоставления общих команд интерфейса командной строки для запуска задач. Требуется локальная установка, поэтому ваша локальная среда выполнения gulp может зависеть от версии для каждого проекта..
Итак, давайте сначала установим gulp глобально:
npm i gulp --global
Это было легко. Пришло время установить gulp локально. У вас может возникнуть соблазн сделать это:
npm i gulp
Но не делайте этого! Да, он установит gulp локально для вашего проекта, но этого будет достаточно, только если вы единственный человек, когда-либо использующий этот проект, и только когда-либо на этой машине. Почему?
Давайте сначала посмотрим, что такое npm. Npm – это менеджер пакетов. Он устанавливает внешние пакеты, необходимые для вашего решения, и управляет ими. Если вы когда-либо занимались разработкой .NET и когда-либо использовали NuGet, то npm – то же самое. Проще говоря: npm для Node.js для NuGet для .NET. Но помимо простой установки пакетов npm может управлять зависимостями . Если вы зависите от пакета, если вы объявляете зависимость от этого пакета, npm может автоматически обрабатывать эти зависимости за вас, загружать их, когда они недоступны, и поддерживать их в актуальном состоянии.
Если бы вы использовали эту простую строку выше, которая просто устанавливает gulp без каких-либо переключателей, он установит gulp в ваш проект, но не сделает его зависимым от вашего проекта. Это означает, что, в зависимости от вашей конфигурации git, другие разработчики могут не получить gulp (и его собственные зависимости) из вашего репозитория и могут столкнуться с проблемами при автоматизации тех же задач на своем компьютере, если они также не установят gulp локально для себя.
Итак, вооружившись новым пониманием npm, вы решили посмотреть, как сделать gulp зависимостью, но быстро узнаете, что это можно сделать двумя разными способами:
npm i gulp --save
npm i gulp --save-dev
Разница в том, что первый сделает gulp производственной зависимостью от всего, что вы создаете, а второй сделает это зависимостью от среды разработки. При создании расширений AL вы используете gulp только для разработки, поэтому второй вариант – правильный выбор. Однако, если, например, вы разрабатываете расширения VS Code, и эти расширения будут использовать gulp, пока они делают то, для чего они предназначены, то вы должны использовать первый вариант, чтобы указать, что ваше расширение требует запуска gulp.
Если вы хотите узнать больше о различиях, возможно, эта статья поможет вам в этом:
https://imcodebased.com/npm-save-or-save-dev -which-one-to-use/
Хорошо. Итак, теперь вы знаете, что для разработки AL вам нужна только зависимость разработки, вам нужно запустить это:
npm i gulp --save-dev
Когда это будет сделано, вы можете проверить, работает ли gulp для вас. Если все, что вы сделали, было правильно (и почему этого не должно быть, дело не в том, что вы строили космический корабль), вы сможете запустить это:
gulp
Результатом станет следующий:
[09:25:06] Файл gulpfile не найден
Это похоже на ошибку, и это так. Это полный отчет по долгу службы, который сообщает, что не нашел никаких инструкций. Теперь вам нужно сказать gulp, что и как делать. Это сообщение об ошибке сообщает вам, что файл gulpfile отсутствует, поэтому давайте сначала займемся этой частью. В корне вашего рабочего пространства просто создайте новый файл и назовите его gulpfile.js. Пока ничего не добавляйте, просто оставьте поле пустым. С этим файлом снова запустите gulp и посмотрите на результат:
[09:29:31] Использование gulpfile C: Temp Gulp gulpfile.js [09: 29:31] Задача никогда не определялась: по умолчанию [09:29:31] Чтобы вывести список доступных задач, попробуйте запустить: gulp --tasks
Это означает, что теперь gulp может читать вашу задачу файл и умеет запускать задачи. Однако, поскольку ваш файл gulp пуст, gulp не нашел задач для запуска.
Давайте создадим первую простую задачу.
Задачи Gulp написаны на JavaScript, и каждая задача определяется в функции JavaScript. Это не означает, что любая функция, которую вы объявляете в своем gulpfile.js, автоматически станет задачей, это просто означает, что для определения задач вы должны определять их внутри функций.
Например, попробуйте поместить это в ваш gulpfile.js:
(Имейте в виду, эта функция еще не является реальной задачей gulp, но она послужит хорошей отправной точкой.)
Если вы сейчас попробуете запустить gulp еще раз, вы увидите, что результаты не изменились. Чтобы ваша функция стала задачей, вы должны явно сделать ее задачей или придерживаться правильной терминологии: вы должны экспортировать ее . В следующем посте я расскажу об экспорте задач из gulpfile.js, потому что хочу, чтобы этот пост был как можно более простым. В экспорте задач гораздо больше, чем кажется на первый взгляд, поверьте мне на слово.
Gulp – это модуль Node.js, а это значит, что для его использования вам необходимо загрузить его в свой скрипт. первый. В Node.js мы называем этот процесс требующим модуля. Чтобы потребовать модуль, вы просто вызываете встроенную функцию require. Обычно вам требуется модуль в начале вашего скрипта, поэтому вы можете вставить следующую строку вверху вашего скрипта:
Затем вы можете сделать свою функцию helloWorld задачей, просто передав ее в метод задачи. Обычно это делается в конце файла gulp. Теперь ваш gulpfile.js будет выглядеть так:
Выполняется gulp по-прежнему не производит никакого эффекта, но если вы запустите gulp –tasks, вы увидите, что gulp теперь распознает вашу функцию helloWorld как задачу, которую она может вызывать:
Одна замечательная вещь с gulp заключается в том, что VS Code изначально понимает их. Любая задача, которую вы настраиваете в своем gulpfile.js, автоматически становится доступной для VS Code. Чтобы проверить это смелое утверждение, нажмите Ctrl + Shift + P, затем запустите команду «Задачи: выполнить задачу». Она должна показать следующее:
Здесь есть одно предостережение. В отличие от файла tasks.js VS Code, который обновляется при каждом изменении, файл gulpfile.js обрабатывается только один раз за сеанс VS Code. VS Код обработает ваш файл gulpfile.js при первом вызове команды «Задачи: Выполнить задачу», и никакие изменения, внесенные вами после этого, не будут видны в списке задач. Если вы каким-либо образом измените свои задачи gulp, добавив, удалив или переименовывая задачи, ваш список задач VS Code не будет отражать это, пока вы не перезапустите VS Code.
Теперь, когда задача явно существует и VS Code знает об этом, мы можем попробовать запустить ее .
Чтобы запустить задачу gulp, вы можете вызвать ее из терминала по спецификации если указать его имя сразу после команды gulp. Примерно так:
gulp helloWorld
Это запустит задачу и покажет следующий результат:
Очевидно, что-то не так. Это потому, что функция, которую вы написали, не является реальной задачей gulp, как я сказал ранее. Не каждую функцию JavaScript можно действительно использовать как задачу gulp, есть определенный шаблон, которому должны следовать ваши функции. Я буду писать в блоге гораздо больше о задачах gulp и о том, как их писать, но пока давайте просто скажем следующее: задачи gulp выполняются асинхронно, и ваши задачи должны каким-то образом сигнализировать о завершении, чтобы указать среде выполнения gulp, что задача завершена, и следующая задача может быть выполнена.
Самый простой способ сигнализировать о завершении с помощью обратного вызова при первой ошибке. Каждая функция gulp получает один аргумент, и этот аргумент имеет тип function. Это ваш аргумент обратного вызова, который вы должны вызывать по завершении задачи. Если ваша задача выполнена успешно, вы просто вызываете обратный вызов без каких-либо аргументов:
Попробуйте выполнить задачу helloWorld прямо сейчас, а затем вставьте пробку для своей первой успешной задачи gulp:
И пока что на этом все. На данный момент у вас есть инфраструктура gulp, у вас есть первая задача gulp, которую вы можете вызывать как из терминала (командной строки), так и из палитры команд.
В моем следующем посте я объясните немного больше об экспорте задач из вашего gulpfile.js. Следите за обновлениями и почувствуйте себя приглашенным поделиться своими мыслями.