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 o

Answer 1

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

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

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