How can I set up gulp to run identically in Visual Studio 2017 and msbuild without having to change my build scripts?

Question

I'm struggling to get set up with gulp in Visual Studio 2017. I'm not sure where I'm going wrong but there are a few things I'm confused about and I can't really find any online resources that are of any use.

The build system I'm using is CruiseControl.NET and I would like gulp to work with it.

This is what I've done so far:

• Installed Visual Studio 2017 with .NET Core cross-platform development and Node.js development selected (amongst other options).

• Created a new project

• Added a gulpfile.js file to the project

• Right-click on the file and choose Task Runner Explorer

In the Task Runner Explorer I get the error Failed to load. See output window (Ctl+Alt+O) for more information..

Then if I do the following:

• Open the Node.js Interactive Window

• Run the command .npm install --global gulp-cli

• Close Visual Studio and open it back up again

In the Task Runner Explorer, I then get the message (No tasks found).

First off, is this the correct way to set up Gulp in Visual Studio 2017?

The reason I'm asking this is because I'm not sure why I need to prefix commands with a period character (ie .npm as opposed to npm).

I'm also not sure where gulp was installed because I can't find it in the path C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\node_modules.

Because of this I can't really set up CruiseControl.NET.

Answer 1

Microsoft have now added documentation on how to get gulp running: https://learn.microsoft.com/en-us/aspnet/core/client-side/using-gulp

Make sure you update Visual Studio 2017 to the latest version as it now comes shipped with Node.js, NPM and Gulp (you don't need to pick "Node.js support" when installing Visual Studio for this to work).

Create an npm Configuration File (package.json) in your project folder and edit it to reference gulp:

{
  "version": "1.0.0",
  "name": "example",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1"
  },
  "scripts": {
    "gulp": "gulp"
  }
}

In the project folder, create a Gulp Configuration File (gulpfile.js) to define the automated process.

Add the following to the post-build event command line for each project requiring gulp support:

cd $(ProjectDir)
call dotnet restore
npm run gulp

To run the tasks in Visual Studio 2017, open the Task Runner Explorer (View > Other Windows > Task Runner Explorer).

Then on the build server just install Node.js and ensure the path to node is added to the environmental path variable then when the build server builds the project gulp will run too!