Как запустить gulp: Как запустить gulp? — Хабр Q&A — Вебджем.рф

Содержание

Gulp build and release task — Azure Pipelines

Обратная связь Изменить

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

Статья
09/08/2022
Чтение занимает 2 мин

Azure DevOps Services | Azure DevOps Server 2022 — Azure DevOps Server 2019 | TFS 2018

Note

Gulp is not preinstalled on all hosted agents. See installed software on virtual machine images.

Use this task to run gulp tasks using the Node.js streaming task-based build system.

Demands

gulp

YAML snippet

# gulp
# Run the gulp Node.js streaming task-based build system
- task: gulp@1
  inputs:
    #gulpFile: 'gulpfile.js' 
    #targets: # Optional
    #arguments: # Optional
    #workingDirectory: # Optional
    #gulpjs: # Optional
    #publishJUnitResults: false # Optional
    #testResultsFiles: '**/TEST-*.xml' # Required when publishJUnitResults == True
    #testRunTitle: # Optional
    #enableCodeCoverage: false 
    #testFramework: 'Mocha' # Optional. Options: mocha, jasmine
    #srcFiles: # Optional
    #testFiles: 'test/*.js' # Required when enableCodeCoverage == True

Arguments

Argument	Description
`gulpFile` gulp File Path	(Required) Relative path from the repo root of the gulp file script that you want to run. Default value: gulpfile.js
`targets` gulp Task(s)	(Optional) Space-delimited list of tasks to run. If not specified, the default task will run.
`arguments` Arguments	Additional arguments passed to gulp. Tip: —gulpfile is not needed since already added via gulpFile input above
`cwd` Working Directory	(Optional) Current working directory when the script is run. Defaults to the folder where the script is located. Argument aliases: `workingDirectory`
`gulpjs` gulp.js location	(Optional) Path to an alternative gulp.js, relative to the working directory. Argument aliases: `workingDirectory`
`publishJUnitResults` Publish to Azure Pipelines	Select this option to publish JUnit test results produced by the gulp build to Azure Pipelines Default value: false
`testResultsFiles` Test Results Files	(Required) Test results files path. Wildcards can be used. For example, */TEST-.xml for all XML files whose name starts with TEST-. Default value: */TEST-.xml
`testRunTitle` Test Run Title	(Optional) Provide a name for the test run
`enableCodeCoverage` Enable Code Coverage	(Optional) Select this option to enable Code Coverage using Istanbul Default value: false
`testFramework` Test Framework	(Optional) Select your test framework Default value: Mocha
`srcFiles` Source Files	(Optional) Provide the path to your source files, that you want to hookRequire ()
`testFiles` Test Script Files	(Required) Provide the path to your test script files Default value: test/*.js

Example

Run gulp.js

On the Build tab:

Package: npm

Install npm.

Command: install

Build: gulp

Run your script.

gulp file path: gulpfile.js
Advanced, gulp.js location: node_modules/gulp/bin/gulp.js

Build a Node.js app

Build your Node.js app with gulp

Open source

This task is open source on GitHub. Feedback and contributions are welcome.

FAQ

Do I need an agent?

You need at least one agent to run your build or release.

I’m having problems. How can I troubleshoot them?

See Troubleshoot Build and Release.

I can’t select a default agent pool and I can’t queue my build or release. How do I fix this?

See Agent pools.

My NuGet push task is failing with the following error: «Error: unable to get local issuer certificate». How can I fix this?

This can be fixed by adding a trusted root certificate. You can either add the NODE_EXTRA_CA_CERTS=file environment variable to your build agent, or you can add the NODE. EXTRA.CA.CERTS=file task variable in your pipeline. See Node.js documentation for more details about this variable. See Set variables in a pipeline for instructions on setting a variable in your pipeline.

I use TFS on-premises and I don’t see some of these features. Why not?

Some of these features are available only on Azure Pipelines and not yet available on-premises. Some features are available on-premises if you have upgraded to the latest version of TFS.

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

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

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

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

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

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

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

Что такое Gulp?

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

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

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

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

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

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

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

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

Node.js

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

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

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

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

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

npm rm --global gulp

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

npm install --global gulp-cli

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

gulp -v

Если в пункте CLI version: указана версия (на момент написания статьи —

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Открываем скачанный ZIP-файл gulp-dev-main

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

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

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

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

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

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

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

npm i

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

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

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

gulp dev

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

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

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

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

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

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

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

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

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

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

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

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

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

На данный момент, просто посмотрим как автоматически генерируются index.html и main. css и обновляется страница при их изменении

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

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

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

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

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

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

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

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

// Please delete before starting
body
	background lightgreen

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

body {
  background: #90ee90;
}

Итоги

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

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

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

Как запустить задачу gulp в коде Visual Studio?

Я открыл свое рабочее пространство в коде Visual Studio и настроил задачи gulp. Теперь я запускаю задачи gulp в окнах CMD. Нужно ли запускать задачи gulp непосредственно из VS Code?

Скажем, у меня есть задачи gulp для

Контрольная работа
Служить
Строить

Обычно код VS автоматически определяет задачу gulp.

Как вы можете видеть в этом документе

Pressing F1 and then typing Run Task followed by Enter will list all available tasks. Selecting one and pressing Enter will execute the task.

Установка node + gulp для Windows 10

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

Установка node js

Скачиваем на сайте nodejs.org стабильную версию Node, рекомендованную для большинства пользователей. Система автоматически определит вашу операционную систему и выдаст подходящую ссылку на скачивание.

После скачивания запускаем установщик и делаем все, как на скриншотах.

Когда установщик закончит свою работу, откроется консоль и вы увидите следующее.

Как запустить консоль Windows 10 PowerShell

Работа на платформе node js ведется через npm команды, вводимые в консоль. У Windows 10 имеется встроенная консоль PowerShell, чтобы консоль запустилась, нужно зайти в папку проекта и зажав сочетание клавиш CTRL+SHIFT, выбрать из контекстного меню «Открыть окно PowerShell здесь».

Узнать версию node js

Для того чтобы убедится установился ли node js, проверяем его версию. Вводим в консоли команду node -v, если в ответ вы увидите название версии v.12.16.1, значит все в порядке. Делает такую же проверку и для npm. Команда npm -v должна вернуть номер версии 6.13.4. Все проверяемые номера версий актуальны на момент выхода этой статьи, у вас скорее всего будут уже другие номера версий.

Установка Gulp под Windows 10

Переходим на сайт gulpjs, запускаем в консоли команду npm install gulp-cli -g. Данная команда устанавливает Gulp глобально, то есть запускать его можно из любой папки на компьютере. Вроде как Gulp установился, но при проверки версии gulp -v, мы видим следующую картину. Что-то пошло не так.

Ошибка при установки Gulp

Система нам говорит (смотрим сообщение в консоли), что невозможно загрузить файл (gulp.ps1 cannot be loaded because running scripts is disabled) и предлагает почитать статью на сайте Microsoft о Политиках исполнения. Из статьи становится понятно, что политика выполнения PowerShell практикуется только на платформах Windows. Блокируется запуск скриптов с расширением .ps1. Что делать в таком случае? Меняем дефолтные настройки Windows через командную строку PowerShell.

Запускаем PowerShell от имени администратора
Проверяем текущие параметры для политики выполнения: Get-ExecutionPolicy -List
Устанавливаем требуемый уровень (меняем политику выполнения) Set-ExecutionPolicy -Scope LocalMachine Unrestricted
Проверяем версию Gulp, если после ввода gulp -v, вы видите CLI version: 2. 2.0, значит установка прошла успешно.

Существенное дополнение

Если вы пишите код в редакторе VS Code, то вам вообще не нужна никакая консоль. У редактора имеется встроенный терминал, как раз для ввода различных команд. Больше не надо переключаться между отдельными вкладками, когда все в одном месте.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

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

How to use Gulp in Visual Studio

Gulp calls itself the streaming build system. No, this isn’t a replacement for build systems like msbuild or nant. In this case, we are talking about building the client side parts of our applications like JavaScript files, StyleSheets (CSS, SASS or LESS) and HTML files.

The basic idea with Gulp is that you use pipes to stream a set of data (usually files) through some kind of processing. As it turns out, it is pretty easy to use and is probably best described using an example.

Installing Node and Gulp

If you don’t already have it installed, download and install node.js.

If you are using VS 2015 and ASP.NET 5, Visual Studio will install npm and gulp for you automatically.

Once node is installed, we need to install gulp using the node package manager (npm). From the command line, run

npm install gulp -g

Setting up your Visual Studio project

Rather than create a new sample project here, I’m going to use the Hot Towel SPA template from John Papa. First, I will create an new empty web application and then install the HotTowel.Angular nuget package.

I wanted to use this template as an example because it is a perfect candidate for Gulp. The application is written using AngularJS and the code is split across 14 different JS files. From a code maintenance / readability standpoint, it is definitely good to split the code into files like this. From an application loading performance standpoint however, loading 14 separate JS files is generally not a great idea.

Here is a snapshot of the traffic captured using Fiddler.

Let’s see what we can do to fix this using Gulp.

Initializing our project for Gulp

First, we need to create a package.json file in the root directory of the your project. We can do this by running npm init on the command line or simply creating a file with the following contents:

Next, we will install a few packages that we will use for this project. Run the following commands from the same folder that you added the package. json file.

Note, the —save-dev option here is telling node to add these packages to a devDependencies section in the package.json file and install the packages in a node_modules folder in the current folder . At any time, you or another developer on your team can re-install all the devDependencies by simply running npm install .

Finally, create a gulpfile.js file in the same folder.

Now, run gulp from the command line and you should see some output stating that scripts task is completed successfully.

This will have created an all.min.js file that contains minified JavaScript from all the js files in the app folder.

Now we include all.min.js in the Visual Studio project and replace the 14 separate script includes with a single include to the new script.

Now, we can see that when our application loads, a single JS file is needed.

Watching for changes

Wouldn’t it be nice gulp could automatically re-run the scripts task whenever we make a change any of our js files? Sure, we can do that!

Add the following to our gulpfile. js:

Now, if we run gulp watch from the command line, our new watch task will watch for changes to any of our js files. When a change is detected it will trigger the scripts task to execute, regenerating the all.min.js file.

You can learn more about gulp.watch here. Note that at this time, the built in gulp.watch has some bugs that stop it from watching new files. These should be fixed soon but in the mean time you might want to use use the popular gulp-watch plugin.

Integrating with Visual Studio

So far, we have been working primarily in the command line. It would be nice if we could integrate with our existing Visual Studio experience.

Luckily, we can with the new Task Runner Explorer plugin. Once the plugin is installed, open the Task Runner Explorer from the View –> Other Windows –> Task Runner Explorer menu.

This window will show you all the tasks in the gulp file and allow you to bind those tasks to certain Visual Studio events. This way, we don’t need to remember to run the gulp tasks from the command line. The IDE can handle it for us.

What I like to do is bind the watch task to the Solution Open event and bind the scripts task to the Before Build event.

With these bindings, we can make sure that all.min.js is correctly generated when we build the application and also regenerated anytime I make changes to the js files.

The Task Runner Explorer also shows the output of any running tasks. Here you can see the output from the watch task, which is always running in the background in this configuration.

Development vs Production

To simplify debugging, you may want to include all your individual scripts in a development build and only include the single concatenated/minified script in your production build. Take a look at my post on Web Optimization in ASP.NET Core MVC for some ideas on how to this can be accomplished. That post covers ASP.NET Core MVC but a similar approach could be used in MVC 5. With the following in your cshtml file, the individual files would be included when debug=”true” is set in your web. config. If debug=”false”, then only the single concatenated/minified file is included.

Note that this only works for cshtml files in an MVC application as it requires the Razor view engine.

So, now we’ve seen a very simple example of bundling and minification. As many have pointed out, this could have easily been accomplished with the runtime bundling in MVC5 provided by System.Web.Optimization. I have a few thoughts on this:

Runtime vs. Compile-Time Optimizations

System.Web.Optimization takes the approach of bundling/minifying your assets at runtime. The first time someone asks for a bundle, it will combine and minify all the files in that bundle and cache the results for the next request. While the cost of this is minimal, it has always seemed to me that it is a strange to use server resources to do this task. At the time of publishing our application to the server, we already know what the code is. To me it makes more sense to do this step on the build server or on the developer machine BEFORE publishing the code. Task runners like Gulp take the approach of doing these asset optimization steps at compile/build time.

Note that there are some specific use cases such as CMS tools that require runtime optimizations because the assets might not be known at compile time. For the vast majority of applications, I think the task runner approach is more logical.

Extensibility and Consistency

There is no question that the runtime bundling in MVC 5 provides a better ‘out-of-the-box’ experience. When you create a new project, bundling and minification is setup and working. It is easy to add new files. People generally understand the concepts and don’t need to spend a lot of time fiddling with the bundle configuration. Where System.Web.Optimization starts to fall apart for me is when I want to take things 1 step further.

What if I want to start using a CSS pre-processor like LESS or SASS? There is no way built-in way to tie CSS pre-processors into System.Web.Optimization. Now I need to start looking for VS plugins or extensions to System. Web.Optimization. If we’re lucky, these will work well. In my experience they have some problems, are often out-of-date or are just not available. One big problem with using VS plugins is that I can’t make use of those on the build server. Another problem is trying to make sure that everyone on the team has the right plugins installed.

With Gulp, all I need to do is include a gulp plugin (eg, gulp-less) and add the less compilation step to my stylesheet pipeline. It would be a 1 or 2 line change to my gulp file. The node package manager is able to ensure that everyone on the team has the right gulp plugins installed. Since everything is command line based, it is also very easy to call the same tasks from the build server if necessary.

So the big advantages are extensibility and consistency. System.Web.Optimization is very good at doing a couple things, but it is also limited to doing those couple of things. When we want to take things a little further, we start to run into some pain points with ensuring a consistent development environment. Gulp on the other hand is extremely flexible and extensible in a way that makes it easy to provide consistency for your team.

Wrapping it up

This post really only scratched the surface of what is possible with Gulp. There are 1,000’s of Gulp plugins available for pretty much everything you can imagine. This is not limited to JavaScript files. You could be processing stylesheets, images or audio.

My typical pipeline for scripts in a SPA is TypeScript Lint => SourceMaps => TypeScript Compile => Concat => Uglify. With the magic of a gulp-watch, this all happens anytime I make a change to my typescript file. The only script files I commit to source control are the TypeScript files. The compiled JavaScript and concatenated files do not need to be checked in because they can be generated at any time using Gulp. The build server is responsible for doing that before publishing the application to the server.

Использование Gulp. Часть 1 — Установка.

Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика Gulp.
Для этого нам понадобится пакетный менеджер NPM. Но, чтобы установить NPM, сначала надо установить Node.js.

Шаг 1. Установка Node
Заходим на официальный сайт https://nodejs.org и скачиваем рекомендованную версию.

Инсталлятор запускать с правами администратора.
После установки появятся 2 значка: Node.js и командная консоль Node.js coomand prompt. Нам они не пригодятся, так как мы не используем Node.js, а для запуска консоли есть более удобные варианты:
1. Использовать Командную консоль TotalCommander (Команды — Открыть командную консоль).
2. Зажать Shift и, кликнув правой кнопкой, открыть контекстное меню. В нем появится пункт «Открыть окно команд».
Запуск коммандной строки лучше производить, находясь в директории нужного вам проекта, в консоли сразу отобразится путь к нужной директории, это избавит от необходимости вводить путь вручную.

Для проверки версий node и npm наберите в командной строке
node -v и нажмите Enter
затем npm -v

Версии NPM обновляются обычно чаще, чем версии node, чтобы установить последнюю версию:
npm install npm@latest -g

Комманды npm, которые нам пригодятся :
npm list — список всех установленных пакетов
npm -g ls —depth=0 — список глобально установленнных пакетов
npm outdated проверить, не устарели ли пакеты
npm update gulp — обновление версий плагинов
npm init — создать package. json
npm install package_name — установить пакет (package_name — название нужного пакета)
npm install package_name —save-dev — установить пакет и вносит запись о нем в package.json в секцию devDependencies
npm uninstall package_name — удаление пакета
npm install — установить все пакеты, перечисленные в package.json
Перед запуском в продакшн npm shrinkwrap — фиксируем версии пакетов,теперь npm install будет устанавливать именно их и вы будете уверены что все будет работать как надо

Сокращения
-v: —version
-g: —global
-S: —save
-D: —save-dev
-y: —yes
-n: —yes false

Шаг 2. Установка gulp
Сначала gulp надо установить глобально.

Запускаем командную консоль.
Иногда на некоторых ресурсах перед коммандой стоит значок доллара, например
$ npm install —global gulp-cli

Значок доллара не копировать, вставлять только саму комманду
npm install —global gulp-cli

Подсказка: чтобы вставлять скопированный текст в командную строку, открыть ком. строку, нажать ALT + SPACE -> Значения по умолчанию, поставить галочку Выделение мышью. Теперь можно выделить текст мышкой, скопировать, в ком. строке кликнуть правой кнопкой — текст вставится автоматически.

Шаг 3. Работа с gulp в конкретном проекте

3.1 Сначала создадим пакет зависимостей package.json
Файл package.json содержит информацию, которую мы внесем в терминале и список всех пакетов, которые мы используем в проекте.

При установке пакета с ключом —save-dev, пакет автоматически добавляется в package.json. Чтобы не устанавливать в каждом новом проекте все пакеты вручную, мы будем использовать уже готовый package.json с небходимыми нам модулями и зависимостями, расположив его в корне нашего проекта.

package.json генерируется с помощью команды npm init, которая выведет в консоль несколько вопросов для создания файла.
В пункте name по умолчанию отображается название вашего каталога с проектом.

Подсказка:
Вы можете сгенерировать это файл быстрее и проще, используя опцию —yes (автоматический ответ “да” на все вопросы):
npm init —yes

Полезно знать:
Вы можете установить значения по умолчанию, которые будут использоваться при каждом запуске npm init, а значит будут экономить вам время. После установки они сохраняются в .npmrc файлах.
Например:
npm config set init.author.name «Valentina Vladova»
npm config set init.author.email «[email protected]»
npm config set init.author.url «http://simpalmarket.com/»
npm set init-license MIT
npm set init-version 0.0.0
Затем запустить npm init, все указанные значения подтянутся в соответстующие переменные.

Когда npm init спросит про гит-репозиторий, пишите кратко user/repo — npm достаточно умён, чтобы раскрыть строчку в https://github.com/user/repo. npm также сгенерирует поля repository, bugs и homepage в нужном формате.

Итак, заходим в корневую папку проекта, вызываем командную консоль и набираем
npm init —yes

В корне проекта появится файл package.json с примерно таким содержанием

3.2 Установим gulp локально
В папке проекта в консоли вводим:
npm install —save-dev gulp

или сокращенно
npm i gulp —save-dev

В списке будут Warn — игнорируем. 3.9.1″
}

Теперь можно устанавливать различные плагины для gulp.
http://gulpjs.com/plugins/
В поле поиска вводите название интересующего плагина.

Плагины можно устанавливать как по одному, например:
npm install —save-dev gulp-plumber
так и списком через пробел, например:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css —save-dev
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами

Для установки конкретной версии используйте @, т.е. плагин@номер весии. Пример:
npm install —save-dev [email protected]

Поделиться:

windows — команда gulp не найдена — ошибка после установки gulp

Asked 8 лет, 3 месяца назад

Изменено 1 год, 3 месяца назад

Просмотрено 349 тыс. раз

Я установил gulp как глобально, так и локально, используя

 npm install gulp
npm установить глоток -g
npm установить gulp-util
npm установить gulp-util -g

При попытке запустить gulp я получаю

'gulp' не распознается как внутренняя или внешняя команда, исполняемая программа или пакетный файл.

Запуск npm list gulp (или -g), я [email protected] с расположением моей глобальной или локальной установки gulp.

Я пытался запустить node gulpfile.js , указывающий на мой gulpfile, и он работает без ошибок, и, конечно же, он начинается с require('gulp') .

Любые предложения о том, как заставить gulp работать в Windows (8.1)?

окна
node.js
глоток

Вы забыли установить пакет gulp-cli:

 npm install -g gulp-cli

Затем вы можете запустить команду «gulp» из командной строки.

Проблему и ответ можно найти в этом вопросе: https://stackoverflow.com/a/9588052/1041104

Модули npm, такие как gulp, не установлены по пути. При этом не обнаруживаются при запуске их в CMD.

Если gulp был установлен глобально, вы можете использовать следующий процесс:

Создайте переменную среды с именем NODE_PATH
Установите для него значение: %AppData%\npm\node_modules или %AppData%\npm в Windows 8-10
Закройте CMD и снова откройте, чтобы получить новые переменные ENV

Запуск npm ls и npm ls -g показывает, что они установлены, но CMD не может их найти из-за отсутствующей ссылки .

Убедитесь, что у вас есть gulp и gulp.cmd (используйте поиск Windows)
Скопируйте путь gulp. cmd ( C:\Users\XXXX\AppData\Roaming\npm )
Добавьте этот путь в переменную среды Path или , отредактируйте переменную среды PATH и добавьте %APPDATA%\npm
Повторно открыть командную строку.

Добавить %APPDATA%\npm в начало пути, а не в конец пути.

Установить gulp глобально.
установка нпм -г глоток
Установите gulp локально в проекте.
нпм установить глоток
Добавьте строку ниже в ваш package.json
"скрипты": { "глоток": "глоток" }
Выполнить глоток.
нпм запустить глоток

Это сработало для меня.

Я использую Windows 8.1. У меня такая же проблема.

Я установил gulp с помощью командной строки Node.js

 npm install -g gulp

Затем перейдите в нужный каталог в командной строке Node.js и попробуйте

 gulp -v

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

Я попробовал NODE_PATH, упомянутый @SteveLacy, но командная строка все равно не обнаружить команду глотка

Была та же проблема, не совсем лучшее решение, но установите его глобально:

 npm install -g gulp

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

 npm install --save-dev gulp

Все остальное (плагины gulp) также устанавливаются локально.

Простое решение просто сделайте нпм ссылка глоток

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

Добавление NODE_PATH в мои переменные среды не решило проблему.

Если вы отредактируете переменную «Путь» в системных переменных и добавите в конце «%APPDATA%\npm», это должно решить проблему… Если только вы или кто-то другой не установили npm от имени другого пользователя, отличного от тот, под которым вы сейчас вошли.

Если вы хотите, чтобы он был доступен для всех пользователей, явно укажите «C:\Users\yourUser\AppData\Roaming\npm» (или там, где у вас есть gulp) вместо «%APPDATA%\npm». Вы также можете переместить файлы по более удобному для пользователя пути.

Не забудьте запустить новую командную строку, потому что та, которую вы открыли, не получит новую переменную «Путь» автоматически.

Теперь «глоток».

Один правильный путь:

Cmd + R : введите «%appdata%»
Перейти в папку npm
Скопируйте весь путь, например «C:\Users\Blah…\npm\»
Перейти к моему компьютеру + щелкните правой кнопкой мыши «Свойства»
Расширенные настройки системы (слева)
Нажмите на переменные среды
Нажмите «Редактировать путь»
Добавьте «C:\Users\Blah. ..\npm\» в конец и введите «;» после этого
Нажмите «ОК» и снова откройте cmd

Сначала вы должны установить gulp как глобальный, используя:

 npm install gulp -g

В противном случае решение пути не решит проблему.

Затем добавьте путь к модулям npm в PATH, используя:

 PATH = %PATH%;%APPDATA%\npm

В моем случае это было то, что я должен был установить gulp-cli командой npm -g установить gulp-cli

Попробуйте добавить в переменную PATH следующее:

 C:\Users\YOUR_USER\AppData\Roaming\npm

У меня была та же проблема, и я решил добавить путь к модулям узла.

У меня была аналогичная проблема с настройкой в Windows 10. Мой ответ специфичен для Windows (посмотрите ответы на изменение пути в bash для решения Linux или OSX)

Основная проблема, с которой я столкнулся, заключалась в том, что папка npm не была зарегистрирована в пути. Первоначально я пытался изменить это в командной строке cmd.

 путь setx "%path%;%appdata$\npm"

Обратите внимание, что я использовал setx вместо set, чтобы гарантировать сохранение обновления переменной окружения. Также обратите внимание, что это обратная косая черта.

Это должно работать, но для меня это не сработало, потому что у setx есть ограничение на прием только 1024 символов… (да, для меня это тоже бессмысленно).

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

Сначала, пока вы все еще находитесь в консоли, введите: echo %appdata%\npm … это ваша папка npm, которую вы хотите добавить в путь, поэтому добавьте ее в буфер обмена.

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

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment

Затем добавьте значение «Путь» с путем к папке npm в буфере обмена. Перезагрузитесь, чтобы активировать новое значение, и теперь все готово.

Наконец, просто протестируйте все это

 >npm install -g gulp
>глоток

Это закончилось для меня проблемой «пользователя». Я установил npm и node в систему, войдя в систему как user1, затем я настроил user2. Я мог запускать node, и я мог запускать команды npm, но не мог запускать какие-либо пакеты npm из командной строки.

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

Верхний ответ у меня не сработал.

Я использую виртуальную машину, у которой был предыдущий владелец. У предыдущего владельца была установлена старая версия npm. Используя это, я установил gulp глобально с помощью npm install -g gulp . Выполнение команды gulp вернет 'gulp' не распознается как внутренняя или внешняя команда, исполняемая программа или пакетный файл. . Как я уже сказал, верхний ответ не решил мою проблему. Мне в основном пришлось переустановить nodejs.

Решение

Повторно загрузить nodejs
установка нпм -г глоток
gulp-версия

Это решило проблему для меня.

У меня была версия 0.12.3 Nodejs на Win7 x64, и я столкнулся с аналогичными проблемами при попытке установить gulp. Это сработало для меня:

Удалены Nodejs
Установлен Nodejs v0.10.29
нпм установить -g нпм
нпм установить -г глоток

Установщик NodeJS добавляет путь user/AppData/Roaming/npm к пути среды пользователя, что является подходящим.

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

Однако, если путь пользовательской среды + путь системной среды больше, чем примерно 1920 символов, Windows не объединяет пользовательский и системный пути — используется только путь системной среды.

См.: https://stackoverflow.com/a/21270921/301152

Итак, когда вы открываете Расширенные настройки системы в Windows для редактирования переменных среды, посмотрите, есть ли у пользователя/AppData/Roaming/npm path уже находится в вашей пользовательской среде PATH. Если это так, то проблема в том, что ваши пользовательские и системные пути слишком длинные, из-за чего Windows игнорирует ваш пользовательский путь. Обрежьте строки пути пользователя и/или системы, и gulp должен работать как установленный.

Если вы не можете найти ничего, что можно было бы отрезать от пути пользователя и системы, добавьте путь user/AppData/Roaming/npm к пути системной среды и назовите это хаком.

Столкнулся с той же проблемой после установки. Итак, я попытался запустить cmd с повышенными привилегиями (администратор), и это сработало.

Снимок экрана:

Добавьте этот путь в переменные среды PATH C:\Пользователи\ИМЯ ПОЛЬЗОВАТЕЛЯ\AppData\Роуминг\npm\

(Windows 10) Мне не понравились ответы пути. Я использую диспетчер пакетов choco для node.js. Gulp не срабатывал бы для меня, если бы он не был:

Глобально установлен npm i -g gulp и локальный каталог npm i --save-dev gulp
Проблема сохранялась после одного раза, которая была исправлена , полностью удалив node.js и переустановив его.

Я не видел комментариев о локальном/глобальном и удаление/переустановка node.js.

Чаще всего это происходит потому, что он не находится в переменных среды, как указывали другие. Это то, что сработало для меня.

эхо %PATH%

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

ПУТЬ = %ПУТЬ%; %APPDATA%\npm

Я решил это, добавив C:\Пользователи\[ПОЛЬЗОВАТЕЛЬ]\AppData\Роуминг\npm до ПУТЬ и не C:\Users\[ПОЛЬЗОВАТЕЛЬ]\AppData\Roaming\npm\node_modules

У меня уже было одно условие из этого ответа (не знаю почему)

https://stackoverflow. com/a/27295145/1175496

То есть мой PATH уже включал %APPDATA%\npm

В моем случае проблема была npm не устанавливал туда модули (опять же не знаю почему)

Поэтому мне нужно было сделать это:

$ npm config set prefix -g %APPDATA%/npm

После этого запускается $ npm install -g gulp (или установка любого другого модуля) поместите модуль в то место, где его ожидает PATH.

Это работает для меня:

 npm link gulp
 обновление нпм

В моей Windows 10 Enterprise gulp не был установлен в %AppData%, то есть C:\Users\ имя пользователя \AppData\npm\node_modules на моем компьютере, но в C:\Users\ имя пользователя \AppData\Local\npm\node_modules.

Чтобы получить gulp в командной строке или в powershell, я добавил к пользовательскому PATH значение C:\Users\username\AppData\Local\npm . После этого он работал как шарм. Естественно, мне пришлось закрыть командную строку или окно powershell и снова открыть, чтобы вышеуказанное вступило в силу.

Команда gulp не нашла проблему в Windows 10, и добавление «%AppData%\npm\node_modules» у меня не работает. Сделайте это шаги, пожалуйста:

После выполнения

NPM Установка -G NPM

NPM Установка -G Gulp

ADD

C: \ пользователи \ Yourusername \ NPM

по пути по системе.

Это работает для меня после того, как все решения не помогли мне.

Запустить npm install gulp -g

Если вы используете Windows, добавьте каталог gulp в PATH.

например C:\Users\ВАШЕИМЯ\AppData\Roaming\npm\node_modules\gulp

В Windows:

Используя проводник Windows, перейдите к своей общей папке vagrant (кстати, я использую scotchbox), например, C:\scotchbox/public/gulpProject
В адресной строке папки введите cmd и нажмите Введите
Выполните установку gulp npm install

Вкратце:

Вы должны добавить %NODE_PATH% к системной переменной Путь , если другие ответы не работают.

Причина:

Дело в том, что командная строка выполняет только программы под Путь системной переменной , а не пользовательских переменных . Если в качестве пользовательской переменной установлено значение NODE_PATH , добавьте %NODE_PATH% к Path .

Я спросил здесь и получил помеченный дубликат для вопроса с другим намерением 🙁

NPM Windows не выполняет программу по пути переменной пользователя [дубликат]

В Windows:

Нажмите следующие две клавиши: Windows + r
Введите control /name microsoft.system в диалоговое окно запуска, появившееся на предыдущем шаге.

Выберите Расширенные настройки системы слева на панели окна
Перейдите на вкладку Дополнительно в появившемся окне свойств системы и нажмите кнопку Переменные среды .
Изменить PATH Пользовательская переменная среды.
Нажмите New в окне редактирования переменной среды, которое появляется для переменной PATH , и добавьте следующее: %APPDATA%\npm в начало переменной среды PATH (как показано на рисунке ниже) .

Закройте командную строку и снова откройте ее.

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

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

Требуется, но никогда не отображается

Опубликовать как гость

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

Требуется, но не отображается

Запуск задач Gulp в Visual Studio

31 декабря 2018 г.

За последнее десятилетие фронтенд-разработка выросла из точки, когда CSS и JavaScript были написаны в плохо организованных файлах, содержащих точный код, который браузер мог бы интерпретировать, в нечто что теперь больше напоминает back end разработку.

Чистый CSS стал байт-кодом мира интерфейса, а LESS и Sass стали предпочтительными языками. Вместо MSBuild для запуска компиляции можно использовать Gulp для автоматизации рабочих процессов для компиляции файлов Sass, их минимизации и выполнения любых других действий, необходимых для создания кода для развертывания (не совсем точное сравнение, но вы поняли).

Чтобы действительно достичь зрелой настройки разработки, последним шагом является удаление этих «скомпилированных» файлов css и js из системы управления версиями. В конце концов, вы не будете регистрировать dll с исходным кодом для каждой сборки. Если вы используете сервер сборки, то это относительно простой шаг для добавления в ваш рабочий процесс. Однако большая проблема заключается в том, чтобы не усложнять жизнь вашим бэкенд-разработчикам.

Без окончательных файлов CSS и JS в системе управления исходным кодом ваши серверные разработчики теперь могут столкнуться с сайтом, в котором отсутствует весь стиль и функциональность внешнего интерфейса, когда они нажмут F5. Поскольку LESS и Sass на самом деле тоже не были там, они теперь не знают, что делать, а также не слишком довольны тем, что им нужно что-то узнавать о внешнем интерфейсе, чтобы продолжать работу над бэкендом. Что еще хуже, Visual Studio часто не является инструментом, который выбирает разработчик внешнего интерфейса, поэтому копирование настроек внешнего интерфейса также не является идеальным решением.

The Aim

Идеальным решением для внутреннего разработчика было бы иметь возможность проверить решение из системы контроля версий (не содержащее скомпилированных файлов CSS или JS), нажать F5 в Visual Studio, окончательный CSS и JS будут созданы. как часть сборки и сайта для запуска. Не открывать командную строку для запуска задачи gulp или любого другого процесса, который могут использовать разработчики внешнего интерфейса. Для них это должно быть совершенно незаметно.

Средство выполнения задач Visual Studio

С помощью средства выполнения задач Visual Studio это вполне возможно.

Task Runner встроен в Visual Studio, поэтому разработчику серверной части не нужно устанавливать какие-либо дополнительные инструменты, и, что более важно, задачи можно связать с событием перед сборкой, чтобы разработчику серверной части не нужно было Делать что-нибудь.

Немного предыстории gulp и средства запуска задач

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

В этом примере есть 3 задачи. Первый минимизирует некоторые JS, а второй минимизирует некоторые CSS. Третий определяет серию, которая запускает первые 2.

Средство запуска задач Visual Studio просматривает файл с именем gulpfile.js и извлекает из него все задачи. Окно средства запуска задач может быть не открыто по умолчанию, поэтому, чтобы открыть его, введите средство запуска задач в поле поиска и выберите его из результатов. В качестве альтернативы вы можете щелкнуть правой кнопкой мыши gulpfile в решении и выбрать Task Runner из контекстного меню.

В нижней части экрана откроется окно запуска задач, в котором будут перечислены все задачи gulp, найденные в файле gulpfile.js. Если разработчики внешнего интерфейса организовали задачи в отдельные файлы, при условии, что файл gulpfile.js в корне проекта имеет какой-либо способ ссылаться на них, они все равно будут отображаться.

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

Чтобы запустить задачу, просто щелкните ее правой кнопкой мыши и выберите «Выполнить».

Автоматизация сборки

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

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

Это добавит комментарий в начало gulpfile.js, который Visual Studio будет искать, чтобы узнать, какую задачу следует запустить перед сборкой.

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

Некоторые другие советы

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

Разработчики внешнего интерфейса не используют Visual Studio

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

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

CSS/JS не в веб-проекте

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

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

Ссылки

Дополнительные сведения об использовании Gulp с Visual Studio. Ознакомьтесь с руководством Microsoft по использованию Gulp с ASP.NET Core.

Tagged: GulpLESSSassTask RunnerVisual Studio

Начало работы с gulp и VS Code – Vjeko.

com

Странные времена. Я не перестаю удивляться тому, какие инструменты вторглись в наши первозданные среды разработки. Одним из таких инструментов является gulp, и если вы о нем не слышали, не волнуйтесь. Почему вы должны об этом слышать?

Пару недель назад я представил свой доклад о gulp, объяснив, как я упростил и ускорил разработку управляющих надстроек. Если вы настоящий разработчик NAV, и если вы не классифицировали всю эту серию на gulp в «кому какое дело» , то, скорее всего, вы останетесь со мной сегодня и узнаете, как настроить gulp и начать использовать его в VS Code.

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

Начнем.

Gulp — это модуль Node.js, что означает, что на вашем компьютере должен быть установлен Node. js. Несмотря на то, что VS Code использует Node.js внутри, на самом деле он использует его только внутри, и вам нужно установить Node.js отдельно, чтобы иметь возможность запускать любой из них. Чтобы проверить, установлен ли у вас узел, запустите командную строку и выполните следующую команду:

 узел --версия

(В качестве альтернативы запустите VS Code и нажмите View > Terminal или нажмите Ctrl+` на клавиатуре. Во всех примерах в этом и последующих постах на gulp предполагается, что вы вводите все команды в окне терминала из VS Code и что в нем открыто рабочее пространство AL.)

Если приведенная выше командная строка не дает никакого результата или выдает ошибку, перейдите на https://nodejs.org/en/ и сначала установите Node.js.

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

Способ установки модуля зависит от того, как он будет использоваться. Некоторые модули предоставляют только функциональные возможности среды выполнения JavaScript, которые можно вызывать из файлов JavaScript, выполняемых Node.js — обычно они устанавливаются локально. Однако если модуль предоставляет функции командной строки, его необходимо установить глобально.

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

Итак, давайте сначала установим gulp глобально:

 npm i gulp --global

Это было легко. Теперь пришло время установить 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-what-one-to-use/

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

 npm i gulp --save-dev

Когда это будет сделано, вы можете проверить, работает ли 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 как задачу, которую она может вызывать: их. Любая задача, которую вы настраиваете в gulpfile.js, автоматически становится доступной для VS Code. Чтобы проверить это смелое утверждение, нажмите Ctrl+Shift+P, затем запустите команду «Задачи: Выполнить задачу». Это должно показать это:

Однако здесь есть одно предостережение. В отличие от файла VS Code tasks.js, этот VS Code перезагружается при каждом изменении, файл gulpfile.js обрабатывается только один раз за сеанс VS Code. VS Code обработает ваш файл gulpfile.js при первом вызове команды «Задачи: выполнить задачу», и никакие изменения, внесенные вами после этого, не будут видны в списке задач. Если вы каким-либо образом измените свои задачи gulp, добавив, удалив или переименовав задачи, ваш список задач VS Code не будет отражать это, пока вы не перезапустите VS Code.

Теперь, когда задача явно есть и VS Code знает о ней, мы можем попробовать запустить ее.

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

 gulp helloWorld

Это запустит задачу и покажет следующий вывод:

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

Самый простой способ сообщить о завершении с помощью обратного вызова error-first. Каждая функция gulp получает один аргумент, и этот аргумент имеет тип function. Это ваш аргумент обратного вызова, который вы должны вызывать, когда ваша задача завершена. Если ваша задача выполнена успешно, вы просто вызываете обратный вызов без каких-либо аргументов:

Попробуйте выполнить задачу helloWorld сейчас, а затем вытолкните пробку для первой успешной задачи gulp:

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

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

Как это:

Нравится Загрузка…

Задача сборки и выпуска 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 Script Files	(обязательно) Укажите путь к файлам тестовых сценариев Значение по умолчанию: 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 — PnP/PnPjs



Эта библиотека использует Gulp для управления различными задачами. Описанные ниже задачи доступны для вашего использования. Пожалуйста, ознакомьтесь с приступить к разработке, чтобы убедиться, что вы правильно настроили свою среду. Исходный код команд gulp можно найти в папку tools\gulptasks в корне проекта.

Основы

Все команды gulp запускаются в командной строке способом, показанным ниже.

 gulp <команда> [необязательные параметры]

сборка

Команда сборки преобразует решение из TypeScript в JavaScript, используя нашу собственную систему сборки. Он управляется файлом pnp-build.js по адресу корень проекта.

Собрать все пакеты

 сборка залпом

Создание отдельных пакетов

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

 # не удается
сборка глотка --p sp
# работает, так как все зависимости построены по порядку
gulp build --p logging, common, odata, sp

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

 # запустить один раз
gulp build --p logging, common, odata, sp
# запускать на последующих сборках
сборка глотка --p sp --nc

чистый

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

 глоток чистый

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

 gulp чистая сборка

ворс

Запускает линтинг проекта на основе правил tslint.json, определенных в корне проекта. Это должно быть сделано до отправки каких-либо PR, так как ошибки linting заблокируют слияние.

 проглотить линт

упаковка

Используется для создания пакетов в папке ./dist, поскольку они существуют для выпуска.

 глоток пакет

Упаковка отдельных пакетов

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

 gulp package --p logging,common,odata,sp

опубликовать

Эта команда предназначена только для использования авторами пакетов для публикации версии в npm и не предназначена для разработчиков.

служить

Команда serve позволяет вам обслуживать либо код из папки ./debug/serve, либо отдельный пакет для тестирования в браузере. Файл всегда будет обслуживаться как https://localhost:8080/assets/pnp.js, поэтому вы можете создать статическую страницу в своем клиенте для простого тестирования различных сценариев. ПРИМЕЧАНИЕ. В большинстве браузеров этот файл будет быть помечен как небезопасный, поэтому вам нужно будет доверять ему, чтобы он выполнялся на странице.

отладка обслуживания

При выполнении команды без параметров будет создан пакет с записью, основанной на файле tsconfig.json в ./debug/serve. По умолчанию это будет используйте serve.ts. Это позволяет вам написать любой код, который вы хотите протестировать, чтобы легко запустить его в браузере, отслеживая все изменения и запуская перестроение.

 залпом подавать

подача в упаковке

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

 gulp serve --p sp

тест

Запускает тесты, указанные в папке тестов каждого пакета

 тест глотком

Подробно

Команда test переключится на репортер mocha «spec», если вы укажете подробный флаг. При этом будет указано описание и успешность каждого теста вместо «точки», используемой по умолчанию. Этот флаг работает со всеми остальными вариантами проверки.

 gulp test --verbose

Проверка отдельных упаковок

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

 # проверить пакеты протоколирования и sp
gulp test --p logging,sp

Если вы работаете над определенным набором тестов для одного модуля, вы также можете использовать параметр single или s, чтобы выбрать только единый модуль тестов. Вы указываете имя файла без суффикса «.test.ts». Он должен быть в пределах указанного пакета и эту опцию можно использовать только с одним пакетом для —p

 # проверит только модуль клиентских страниц в пакете sp
gulp test --p sp --s clientsidepages

Если вы хотите, вы можете протестировать на том же сайте и не создавать новый, хотя для некоторых тестов это может вызвать конфликты. Этот флаг может быть полезен, если вы быстро тестируете вещи без конфликтов, поскольку вы можете избежать создания сайта каждый раз. Работает с обеими указанными выше опциями —p и —s, а также по отдельности. URL-адрес должен быть абсолютным.

 #тестирование с использованием указанного сайта.
gulp test --сайт https://{tenant}.sharepoint.com/sites/testing
# с другими параметрами
gulp test --p logging,sp --site https://{tenant}.sharepoint.com/sites/testing
gulp test --p sp --s clientsidepages --site https://{tenant}.sharepoint.com/sites/testing

Gulp — простой шаг сборки интерфейса | by Lukas Oppermann

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

Прежде чем мы запачкаем руки, позвольте мне быстро объяснить, что такое средство выполнения задач. На самом деле это довольно прямолинейно, средство запуска задач — это очень простой (командная строка) инструмент для запуска обычных задач для вас. Итак, что такое задачи? Задача может быть практически любой: преобразование вашего less в css, минимизация вашего javascript, оптимизация ваших svgs, создание спрайта svg или комбинация вышеупомянутого.

В этом примере мы создадим задачу, которая отслеживает наши файлы less и всякий раз, когда мы их меняем, преобразует файлы less в css, добавляет все необходимые префиксы поставщиков и объединяет группу.

Сначала нам нужно получить инструмент для установки gulp, этот инструмент — npm, диспетчер пакетов узла. Установить его так же просто, как загрузить установщик и запустить его.

Теперь вы сможете получить текущую версию npm, запустив npm -v в своем терминальном приложении. Вы можете обновить npm через npm с помощью следующей команды в своем терминале.

cd в ваш проект, чтобы мы могли начать его настройку.

Теперь нам нужно инициализировать npm, запустив npm init --yes . Это создаст для нас новый файл package.json , который будет использоваться для отслеживания пакетов gulp, которые мы устанавливаем. Если вы создаете веб-сайт без использования узла, все, что действительно имеет значение, — это devDependencies , но вы можете обновить этот файл, если хотите, мой выглядит так.

СОВЕТ: Зарегистрируйте package.json в git, поэтому, когда кто-нибудь клонирует репозиторий, простой npm install загрузит и установит все ваши зависимости.

Отлично! Теперь, когда у нас запущен npm, давайте приступим к gulp. Нам нужно установить gulp глобально и как локальную зависимость в нашем проекте. Это особая вещь, связанная с глотком, и не очень важная, поэтому я не буду вдаваться в подробности почему. Всегда добавляйте флаг --save-dev для автоматического сохранения зависимостей в файле package.json .

 npm install --global gulp 
 npm install --save-dev gulp

Ваш package.json теперь должен иметь gulp в разделе devDependencies . Число после двоеточия — это установленная версия. Это может отличаться для вас, в зависимости от текущей версии gulp.

Двигаясь дальше, нам нужно создать gulfile.js в корне нашего проекта, чтобы содержать все наши задачи gulp.

 touch gulpfile.js 
 open gulpfile.js

Откройте gulpfile.js в выбранном вами редакторе. В качестве расширения .js предполагает, что это обычный файл javascript, поэтому, если вы знаете, как писать javascript, вы знаете, как работать в этом файле. Если нет, не волнуйтесь, это легко.

Теперь мы можем приступить к написанию фактических заданий, которые должна выполнять задача, но сначала нам нужно установить и загрузить все необходимые для нее плагины. Вы можете найти плагины на npm.js. Наш первый шаг — преобразовать наши файлы .less в .css и объединить их в один. Для этого нам понадобятся два плагина: gulp-less будет использоваться для преобразования нашего .less и gulp-concat будет использоваться для объединения нашего css в один файл.

 npm install --save-dev gulp-less gulp-concat

После добавления двух новых модулей ваш gulpfile.js должен выглядеть так, как показано ниже.

На этом наша первая задача с глотком выполнена. Вы можете использовать его, запустив gulp без компиляции с вашего терминала. После этого файл с именем app.css должен быть создан в течение public/css (или там, где вы решили сохранить его глотком).

Поработав с основами, мы добавим автопрефиксер в нашу задачу. Если вы используете css, например , анимация , этот плагин автоматически добавит префикс для указанных вами браузеров. Для начала нам нужно скачать плагин для него.

 npm install --save-dev gulp-autoprefixer

Как только это будет сделано, мы добавим плагин в наш gulpfile.js и используем автопрефиксер в операторе pipe .

Задача по умолчанию — это несколько особая задача в gulp, вы создаете ее, просто назвав задачу по умолчанию . Особенность этой задачи в том, что вы можете вызвать ее, просто набрав gulp без каких-либо аргументов в терминале. Очевидно, это должно использоваться для вашей наиболее общей задачи. В вашем gulpfile.js создайте задачу по умолчанию для вызова задачи без компиляции .

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

Если вы сейчас запустите gulp watch-less из терминала, ваши файлы будут перекомпилированы при следующем сохранении. Осторожно: При добавлении новых файлов нужно остановить наблюдатель ctrl + c и перезапустите его, запустив gulp без часов . Осталась одна неприятность: вам нужно активно запускать задачу наблюдения. Но мы можем помочь в этом, просто добавив его в ваш массив по умолчанию.

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