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.

Lemmy

I have also run into this issue today... – Sulfanilamide

@Sulfanilamide check answer below might help you hopefully :) – Lemmy

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

Lemmy

What I found is that the entry ".\node_modules\.bin" that I found as a default in Visual Studio assumes that your gulpfile.js shares the same root directory for your local npm packages (the same location of your package.json file). I had my package.json one level higher thinking that I would want my node_modules next to my NuGet packages folder. – Zoubek

Thanks Worked for us :) – Giblet

In VS2019, the External Web Tools location is now Tools > Options > Projects and Solutions > Web Package Management > External Web Tools – Footway

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:

Stevens

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.

Limbo

why is this answer identical to that here: #47446620 – Lanark

Answer looks like it was lifted verbatim from linked issue above. Consider at least giving the original poster credit for the answer. – Basketry

Answer 4

Funny running on VS 2022, I recently experienced the issue, I googled and I have tried everything mentioned in this post and any other posts I could find on the net, but none worked, I knew my gulpfile was fine since it was working on another pc, Then I read there is a bug apparently in VS since 2019 that can cause this and here is a workaround

Go to

Tools > Options > Projects and Solutions > Web Package Management > External Web Tools

you will see something like the following window,

Now just move item $(PATH) to the top using the arrow at the top right corner and click ok, close visual studio, load the project again, locate the 'gulpfile.js' file, right click Task Runner Explorer just like you see as follow and you should be good

Necrophilia

A remarkable discovery! – Apatite

glad that it is helping others, cos I was so desperate to fix this – Necrophilia

Answer 5

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

Lysimeter