Gulp js: A toolkit to automate & enhance your workflow

gulp@1 — задача gulp версии 1

Twitter LinkedIn Facebook Адрес электронной почты

• Статья
• 10/24/2022
• Чтение занимает 3 мин

Запустите gulp Node. js систему сборки на основе задач потоковой передачи.

Node.js системе сборки на основе задач потоковой передачи.

Синтаксис

# gulp v1
# Run the gulp Node.js streaming task-based build system.
- task: gulp@1
  inputs:
    #gulpFile: 'gulpfile.js' # string. gulp File Path. Default: gulpfile.js.
    #targets: # string. gulp Task(s). 
    #arguments: # string. Arguments. 
  # Advanced
    #workingDirectory: # string. Alias: cwd. Working Directory. 
    #gulpjs: # string. gulp.js location. 
  # JUnit Test Results
    #publishJUnitResults: false # boolean. Publish to Azure Pipelines. Default: false.
    #testResultsFiles: '**/TEST-*.xml' # string. Required when publishJUnitResults = true. Test Results Files. Default: **/TEST-*.xml.
    #testRunTitle: # string. Optional. Use when publishJUnitResults = true. Test Run Title. 
  # Code Coverage
    enableCodeCoverage: false # boolean. Required. Enable code Coverage. Default: false.
    #testFramework: 'Mocha' # 'Mocha' | 'Jasmine'.
  Optional. Use when enableCodeCoverage = true. Test Framework. Default: Mocha.
    #srcFiles: # string. Optional. Use when enableCodeCoverage = true. Source Files. 
    #testFiles: 'test/*.js' # string. Required when enableCodeCoverage = true. Test Script Files. Default: test/*.js.

# Gulp v1
# Node.js streaming task based build system.
- task: Gulp@1
  inputs:
    gulpFile: 'gulpfile.js' # string. Required. Gulp File Path. Default: gulpfile.js.
    #targets: # string. Gulp Task(s). 
    #arguments: # string. Arguments. 
  # Advanced
    #workingDirectory: # string. Alias: cwd. Working Directory. 
    #gulpjs: # string. gulp.js location. 
  # JUnit Test Results
    #publishJUnitResults: false # boolean. Publish to Azure Pipelines/TFS. Default: false.
    #testResultsFiles: '**/TEST-*.xml' # string. Required when publishJUnitResults = true. Test Results Files. Default: **/TEST-*.xml.
    #testRunTitle: # string. Optional. Use when publishJUnitResults = true. Test Run Title. 
  # Code Coverage
    enableCodeCoverage: false # boolean.   Required. Enable code Coverage. Default: false.
    #testFramework: 'Mocha' # 'Mocha' | 'Jasmine'. Optional. Use when enableCodeCoverage = true. Test Framework. Default: Mocha.
    #srcFiles: # string. Optional. Use when enableCodeCoverage = true. Source Files. 
    #testFiles: 'test/*.js' # string. Required when enableCodeCoverage = true. Test Script Files. Default: test/*.js.

Входные данные

gulpFile — Путь к файлу gulp
string. Значение по умолчанию: gulpfile.js.

Относительный путь от корневого каталога репозитория файла скрипта gulp для запуска.

gulpFile — Путь к файлу Gulp
string. Обязательный. Значение по умолчанию: gulpfile.js.

Относительный путь от корневого каталога репозитория файла скрипта gulp для запуска.

targets — Задачи gulp
string.

Необязательный элемент. Список выполняемых задач с разделителями пробелами. Если этот параметр не указан, будет выполнена задача по умолчанию.

targets — Задачи Gulp
string.

Необязательный элемент. Список выполняемых задач с разделителями пробелами. Если этот параметр не указан, будет выполнена задача по умолчанию.

arguments — Аргументы
string.

Дополнительные аргументы, передаваемые gulp. —gulpfile не требуется, так как он уже добавлен с помощью входных данных gulpFile выше.

workingDirectory — Рабочий каталог
Псевдоним ввода: cwd. string.

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

gulpjs — расположениеgulp. js
string.

Путь к альтернативному gulp.js относительно рабочего каталога.

publishJUnitResults — Публикация в Azure Pipelines
boolean. Значение по умолчанию: false.

Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.

publishJUnitResults — Публикация в Azure Pipelines/TFS
boolean. Значение по умолчанию: false.

Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой Gulp в Azure Pipelines/TFS.

testResultsFiles — Файлы результатов теста
string. Обязательный, если publishJUnitResults = true. Значение по умолчанию: **/TEST-*.xml.

Путь к файлам результатов теста. Можно использовать подстановочные знаки. Например, для всех XML-файлов, **/TEST-*.xml имя которых начинается с TEST-.

testRunTitle — Заголовок тестового запуска
string. Необязательный элемент. Используется при publishJUnitResults = true.

Укажите имя для тестового запуска.

enableCodeCoverage — Включение покрытия кода
boolean. Обязательный. Значение по умолчанию: false.

Выберите этот параметр, чтобы включить покрытие кода с помощью Стамбула.

testFramework — Тестовая платформа
string. Необязательный элемент. Используется при enableCodeCoverage = true. Допустимые значения: Mocha, Jasmine. Значение по умолчанию: Mocha.

Выберите тестовую платформу.

srcFiles — Исходные файлы
string. Необязательный элемент. Используется при enableCodeCoverage = true.

Укажите путь к исходным файлам, которые требуется подключитьRequire().

testFiles — Тестовые файлы скриптов
string. Обязательный, если enableCodeCoverage = true. Значение по умолчанию: test/*.js.

Укажите путь к файлам тестового скрипта.

Параметры управления задачами

Все задачи имеют параметры управления в дополнение к входным данным задачи. Дополнительные сведения см. в разделе «Параметры управления» и общие свойства задачи.

Выходные переменные

Нет.

Используйте эту задачу для выполнения задач gulp с помощью системы сборки на основе Node.js потоковой передачи.

Примечание

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

Примеры

Запуск gulp.

js

- task: Npm@1
  inputs:
    command: 'install'
- task: gulp@1
  inputs:
    gulpFile: 'gulpfile.js'
    gulpjs: 'node_modules/gulp/bin/gulp.js'

Создание приложения Node.js

• Создание приложения Node.js с помощью gulp

Требования

Требование	Описание
Типы конвейеров	YAML, классическая сборка
Выполняется в	Agent, DeploymentGroup
Требования	Локальные агенты должны иметь возможности , соответствующие следующим требованиям для выполнения заданий, использующих эту задачу: node.js
Capabilities	Эта задача не удовлетворяет требованиям к последующим задачам в задании.
Ограничения команд	Любой
Переменные settable	Любой
Версия агента	1.91.0 или более поздней версии
Категория задач	Сборка

См.

также

• Создание приложения Node.js с помощью gulp

Что такое Gulp и зачем это нужно.

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

Официальный сайт Gulp:

https://gulpjs.com

Вы можете обращаться на него, если вам будет нужна официальная документация к этой системе. 

Ну, и что же такое Gulp?

Gulp — это инструмент для автоматизации рутинных задач, которые возникают при веб-разработке. Это может быть не только frontend разработка, это может быть и backend разработка.

Если вы работаете с такими технологиями как html,  css, javascript и.т.д. Если вы внедрите в практику своей работы такой инструмент как gulp, вы значительно ускорите скорость вашей работы и, во вторых, этот инструмент «откроет вам дорогу» к новым возможностям, которые значительно повысят ваш уровень веб-разработки и знаний.

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

Смысл следующий: мы создаем для системы Gulp некие задания. Т.е. описываем эти задания на языке Javascript. Затем, Gulp просто выполняет эти задания в нужной последовательности, так, как мы это прописали. Т.е. Gulp — это просто система по управлению заданиями по веб-разработке. Также ее называют task manager. task — задание, manager — управлять.

Важно понимать, что Gulp — это просто некое ядро, к которому мы прикручиваем дополнительные модули, плагины, которые «учат» Gulp делать какую-то определенную функцию или работу. Устанавливая эти плагины мы получаем новые возможности в системе Gulp, которые мы можем использовать. 

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

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

Какие типовые задачи можно решать с помощью этой системы?

Давайте рассмотрим самые основные из них. Список этих задач может быть достаточно большой.

Задача 1. Минификация кода.

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

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

Задача 2. Объединение кода из разных файлов в один.

Вы можете объединять код из CSS, Javascript файлов и.т.д. в один. Это важно сделать также по причине скорости загрузки документа. При работе с протоколом http каждый запрос к файлу — это дополнительное время загрузки страницы.

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

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

Задача 3. Работа с CSS препроцессорами: sass, less, …

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

Задача 4. Поддержка новых стандартов языка Javascript.

Т.к. язык Javascript является клиентским языком программирования, то он зависит того браузера, на котором будет работать. Если посетитель вашего сайта пользуется какими-то старыми браузерами, у него новые стандарты не будут работать. С помощью Gulp вы можете решить эту задачу. 

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

Код написанный под Gulp интуитивно понятный и проект, который у вас будет получаться, достаточно компактный и удобный. В нем будет все самое необходимое, что нужно для веб-разработки. 

Есть и другие решения, например, система Webpack, которая в последнее время приобретает большую популярность. Но, дело в том, что Webpack — это довольно громоздкая система и для решения каких-то простых задач устанавливать такую большую систему не очень разумно. 

Gulp — это альтернатива, которая позволит вам решать эти задачи проще и быстрее.

Задача сборки и выпуска

Gulp — Azure Pipelines

Обратная связь Редактировать

Твиттер LinkedIn Фейсбук Эл. адрес

• Статья
• 08.09.2022
• 2 минуты на чтение

Службы Azure DevOps | Azure DevOps Server 2022 — Azure DevOps Server 2019 | TFS 2018

Примечание

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

Используйте эту задачу для запуска задач gulp с использованием системы сборки на основе задач потоковой передачи Node.js.

Запросы

gulp

Фрагмент YAML

 # gulp
# Запустить gulp Node.js потоковую систему сборки на основе задач
- задача: глоток@1
  входы:
    #gulpFile: 'gulpfile.js'
    #цели: # Необязательно
    #аргументы: # Необязательный
    #workingDirectory: # Необязательно
    #gulpjs: # Необязательно
    #publishJUnitResults: false # Необязательно
    #testResultsFiles: '**/TEST-*.
  xml' # Требуется, если publishJUnitResults == True
    #testRunTitle: # Необязательно
    #enableCodeCoverage: ложь
    #testFramework: 'Mocha' # Необязательно. Варианты: мокко, жасмин
    #srcFiles: # Необязательно
    #testFiles: 'test/*.js' # Требуется, если enableCodeCoverage == True
 

Аргументы

.

Аргументы	Описание
gulpFile gulp Путь к файлу	(обязательно) Относительный путь от корня репозитория сценария файла gulp, который вы хотите запустить. Значение по умолчанию: gulpfile.js
целей gulp Task(s)	(Необязательно) Список задач, разделенных пробелами. Если не указано, будет запущена задача по умолчанию.
аргументы аргументы	В gulp переданы дополнительные аргументы. Совет: —gulpfile не нужен, так как он уже добавлен с помощью ввода gulpFile выше
cwd Рабочий каталог	(Необязательно) Текущий рабочий каталог при запуске скрипта. По умолчанию используется папка, в которой находится скрипт. Псевдонимы аргументов: workingDirectory
gulpjs расположение gulp.js	(Необязательно) Путь к альтернативному gulp.js относительно рабочего каталога. Псевдонимы аргументов: workingDirectory
publishJUnitResults Публикация в Azure Pipelines	Выберите этот параметр, чтобы опубликовать результаты теста JUnit, созданные сборкой gulp, в Azure Pipelines. Значение по умолчанию: false
testResultsFiles Файлы результатов теста	(обязательно) Путь к файлам результатов тестирования. Можно использовать подстановочные знаки. Например, **/TEST-*.xml для всех файлов XML, имя которых начинается с TEST-. Значение по умолчанию: **/TEST-*.xml
testRunTitle Название тестового прогона	(Необязательно) Укажите имя для тестового прогона
enableCodeCoverage Включить покрытие кода	(необязательно) Выберите этот параметр, чтобы включить покрытие кода с использованием Istanbul . Значение по умолчанию: false
testFramework Test Framework	(необязательно) Выберите тестовую среду Значение по умолчанию: Mocha
srcFiles Исходные файлы	(Необязательно) Укажите путь к вашим исходным файлам, которые вы хотите перехватить.Require()
testFiles Файлы тестовых сценариев	(обязательно) Укажите путь к файлам тестовых сценариев Значение по умолчанию: test/*.js

Пример

Запустить gulp.js

На вкладке «Сборка»:

Пакет: нпм	Установить нпм. Команда: установить
Сборка: залпом	Запустите свой скрипт. путь к файлу глотка: gulpfile.js Дополнительно, местоположение gulp. js: node_modules/gulp/bin/gulp.js

Создание приложения Node.js

Создание приложения Node.js с помощью gulp

Открытый исходный код

Исходный код этой задачи доступен на GitHub. Отзывы и дополнения приветствуются.

Часто задаваемые вопросы

Нужен ли мне агент?

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

У меня проблемы. Как я могу устранить их неполадки?

См. раздел Устранение неполадок при сборке и выпуске.

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

См. Пулы агентов.

Моя задача отправки NuGet завершается со следующей ошибкой: «Ошибка: невозможно получить сертификат локального издателя». Как я могу это исправить?

Это можно исправить, добавив доверенный корневой сертификат. Вы можете либо добавить переменную среды NODE_EXTRA_CA_CERTS=file в свой агент сборки, либо добавить переменную задачи NODE. EXTRA.CA.CERTS=file в свой конвейер. Дополнительные сведения об этой переменной см. в документации Node.js. Инструкции по настройке переменной в конвейере см. в разделе Установка переменных в конвейере.

Я использую TFS локально и не вижу некоторых из этих функций. Почему бы и нет?

Некоторые из этих функций доступны только на Лазурные конвейеры и пока недоступны локально. Некоторые функции доступны локально, если у вас есть обновлен до последней версии TFS.

Обратная связь

Отправить и просмотреть отзыв для

Этот продукт Эта страница

Просмотреть все отзывы о странице

Курсы по Gulp.js Intermediate Gulp.js 3.9

 

Откройте для себя Gulp.js, средство запуска задач с открытым исходным кодом, используемое для автоматизации повторяющихся задач веб-разработки.

НАЧАЛО РАБОТЫ

Введение и подготовка среды

+9 ДОПОЛНИТЕЛЬНЫЕ ВИДЕО |

БЕСПЛАТНЫЙ ДОСТУП

КУРСЫ ВКЛЮЧЕНЫ

Введение и подготовка среды

Gulp. js предназначен для автоматизации повторяющихся задач в процессе веб-разработки. Узнайте о Gulp.js, как его установить и как настроить среду разработки.

11 видео | 37м

имеет оценку

в наличии

Значок

---

Использование плагинов Gulp.js для анализа JavaScript

Узнайте, как работать с Gulp. js! Давайте посмотрим, как вы можете использовать плагины Gulp.js, чтобы помочь вам в анализе вашего кода JavaScript, а также в компиляции и оптимизации файлов CSS.

15 видео | 59м

в наличии

Значок

---

Управление ресурсами HTML, серверами и браузерами

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

14 видео | 51м

доступно

Значок

---

Подготовка папки сборки и тестирование

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

10 видео | 51м

в наличии

Значок

---

ПОКАЗАТЬ БОЛЬШЕ

СВОБОДНЫЙ ДОСТУП

ПОЛУЧИТЕ ЦИФРОВОЙ БЕЙДЖ ПОСЛЕ ЗАВЕРШЕНИЯ ЭТИХ КУРСОВ

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