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

I found the solution here. More information on that part of VS from Mads himself.

You have to force Visual Studio run with your Node.js version:

Go to Tools > Options in Visual Studio 2017

Go to Projects and Solutions > External Web Tools

Add the following path: C:\Program Files\nodejs

Answer 2

Microsoft have now added documentation on how to get gulp running: https://docs.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!

Answer 3

The way I'm handling this is to first use the Web Essentials 2017 extension. This installs the Bundler & Minifier tool, which then adds a bundleconfig.json file to your project. Right-click on this file, go to the Bundler & Minifier menu item and you will see an option in there to Convert To Gulp.

Selecting convert to gulp will create the necessary gulpfile.js and also install the npm packages required for using Gulp. Wait for all of the npm packages to install and you can then right click on gulpfile.js, select Task Runner Explorer and you should be ready to set up Gulp-based tasks. If you see gulpfile.js failed to load message, npm packages may still be installing (check the progress bar on the VS 2017 status bar). Hit the Refresh icon in Task Runner Explorer when all packages are installed and the error should vanish.

There's probably a more manual way to add Gulp support but I find this more automated method ensures all the tooling is wired up to work properly and I don't miss anything.

I gleaned all this information from the awesome Microsoft Docs site, specifically this page on Bundling & Minification. There's also a Using Gulp section in there that may provide additional details for your situation.

https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification