Task Runner Explorer window had "failed to load" under my Gulpfile.js and none of the build processes were listed

Question

This happened randomly as I was updating my CSS file and then refreshing to notice no changes were being shown. I eventually noticed that Task Runner Explorer window had "failed to load" under my Gulpfile.js and none of the build processes were listed.

I then done a bit of research and reordered the list of external tools as some SO threads have mentioned to do and nothing. I then noticed that gulpfile.js required some files :

var gulp = require("gulp"),
   gulpless = require("gulp-less"),
   sourcemaps = require("gulp-sourcemaps"),
   rimraf = require("rimraf");

None of these were in the node_modules folder so I done npm install gulp-less and npm install gulp-sourcemaps and now checked in Output>Task Runner Explorer and have the following error.

Failed to run "C:\projects\Fusion\FusionMVC\Gulpfile.js"...

cmd.exe /c gulp --tasks-simple

C:\projects\Fusion\node_modules\gulp-sourcemaps\node_modules\strip-.bom\index.js:2

module.exports = x => { ^ SyntaxError: Unexpected token > at Module._compile (module.js:439:25) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (C:\projects\Fusion\node_modules\gulp-sourcemaps\src\init.js:10:14) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12)

Any clues or solutions as to what might be wrong and how to get it working would be great! Gone through most of the SO threads and that solution did not work.

Answer 1

So after tonnes of research, working through SO threads and npm tutorials I finally found the issue. It looks like the PATH variable (not sure if it used the system or user level one) might have been incorrect. I have never touched them but after adding a direct path to the locally installed packages folder and putting it at the top of the external tools locations list it worked.

A few things to look for though before even worrying about the path would be:

• ensure that all the correct npm packages are installed
• gulpfile.js code is correct
• node.js and npm are both up to date

Answer 2

@SharpCode's solution worked great, though if you are using VS2019 it has moved to Options > Projects and Solutions > Web Package Management > External Web Tools:

Answer 3

The problem is not related to path, but actually there must be some problem with gulp file itself either syntax error or some package is missing which unfortunately visual studio does not show that specific error but generic error what you see in task runner "failed to load". And the right way to see the errors is

1. Open the command prompt (preferably in admin mode, this is what i did).
2. Go to the same location where gulp file is located.
3. Run the task through following command example --> gulp default
4. If there is any error like package is missing, it will show you, fix those issues.
5. After all errors are fixed, then you will see that gulp task runs successfully.
6. Go back to visual studio, task runner, and click on refersh (left top button), and it will show you all tasks.

Answer 4

I had same issue for my .net core solution.

Steps I did which fixed my error and started to Gulping my mins/js/styles:

1. Uninstall existing Node.js from [add or remove programs]
2. Install a new Node.js from https://nodejs.org/en/ [64bit recommended one]
3. open cmd and check if npm is working
4. Open my Solution in visual stuido -> Open node.js interactive window from view -> other windows

5. in the node.js interactive window enter the below command

   .npm [ProjectName] install gulp
   

P.S. dont get confuse here we dont need to write projectname.csproj or d:/repo/projectname.csproj just write projectname as its already inside the solution.

Thats all, it solved my problem