10

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.

Professor of programming
  • 2,978
  • 3
  • 30
  • 48

3 Answers3

8

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://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification

Darren Evans
  • 665
  • 10
  • 17
  • 2
    Useful information but how does this work with a build system? – Professor of programming Jul 22 '17 at 23:57
  • Package management tools are in flux it seems. Gulp seems to be going out of favour (but is not going away) while WebPack seems to be popular. Then you have new VS 2017 tools like Library Manager on the horizon. I like to think of this as more choice means more flexibility for a developer to choose the tool that best fits the project requirements, https://www.stevejgordon.co.uk/library-manager-libman-visual-studio-2017 – Darren Evans May 28 '18 at 10:30
6

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!

Professor of programming
  • 2,978
  • 3
  • 30
  • 48
  • You can also update the PreBuildEvent in Visual Studio to call `gulp site.css` in Visual Studio, so that you don't need to update the build script to make a separate call to gulp. – Professor of programming Oct 25 '17 at 17:14
  • 1
    Visual Studio 2017 has updated yet again and there is now no option for "Gulp Configuration File". – Professor of programming Apr 03 '18 at 13:17
  • I noticed this too. Project templates also lack Gulp. There's a new Library Management tool in the works and available in VS 2017 Preview builds that might address this issue, though it's unclear as to how at the moment because I don't use VS preview builds. Package management does seem to be problematic at the moment though. https://www.stevejgordon.co.uk/library-manager-libman-visual-studio-2017 – Darren Evans May 28 '18 at 10:37
  • Can I somehow see output from gulp in my normal build output in Visual Studio? (I have set the bindings of tasks on "Before build") Because I don't want to always open Task Runner Explorer to see that – Jakub Jul 13 '18 at 08:16
  • FYI, That doc now is using grunt, not gulp. – General Grievance Feb 18 '22 at 18:29
2

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

enter image description here

Luke Puplett
  • 42,091
  • 47
  • 181
  • 266
Code4Fun
  • 413
  • 5
  • 17