15

I'm trying to set up gulp in an MVC Core project within VS 2017. I have what I believe to be a valid gulpfile.js:

var gulp = require('gulp');
var rimraf = require('rimraf');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');
var uglify = require( 'gulp-uglify' );

var paths = {
    webroot: './wwwroot/',
};

paths.js = paths.webroot + 'js/**/*.js';
paths.minJs = paths.webroot + 'js/**/*.min.js';
paths.css = paths.webroot + 'css/**/*.css';
paths.minCss = paths.webroot + 'css/**/*.min.css';
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task( "clean", ["clean:js", "clean:css"] );

But when I open Task Runner Explorer I get the message "(no tasks found)".

I've checked to ensure all the gulp packages were installed via npm. I also added a package.json file. But the tasks are still not being found.

What am I doing wrong?

Mark Olbert
  • 5,161
  • 4
  • 26
  • 51

4 Answers4

24

Apparently you have to install gulp locally within your project for it to work properly with Visual Studio. Global install won't work. Deleting the global copy and installing it locally solved the problem.

Mark Olbert
  • 5,161
  • 4
  • 26
  • 51
6

I was faced the same issue, and fix this after running two commands. Please refer below the process:

1) Right click on your gulp file in visual-studio, and choose "Open Command Line > PowerShell"

enter image description here

2) Run the command npm install gulp for install gulp. (You have to install gulp in your project, no matter if you have already installed gulp globally, but in this case you have to install the gulp in your project)

enter image description here

and press enter.

3) After execution of command go to task runner explorer in Visual-Studio and press the refresh button.

enter image description here

After pressing the refresh button you will see all your task list under task runner.

If you found any error related to "missing module" in output window like below:

enter image description here

Then you have to install missing npm plugins, for this just run the below command (into powershell): npm install and press enter. This command will install all the missing plugin, refer below image:

enter image description here

And then press again the refresh button in task runner explorer and you will see all your gulp task list under task runner window.

Hope this solution will help.

Sunil Kumar
  • 2,655
  • 1
  • 16
  • 30
3

You need to have all the dependencies installed too - my VS Task Runner was failing without any error messages on a new install - I had already installed gulp locally, but my gulpfile.js showed the following required modules:

var util = require('gulp-util'),
    gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    rename = require('gulp-rename'),
    babel = require('gulp-babel'),
    terser = require("gulp-terser")
    //del = require("del"); 
    ;

One of them was missing, so I ran

npm install gulp-util
npm install gulp-concat
npm install gulp-cssmin
npm install gulp-rename
npm install gulp-babel
npm install gulp-terser

And the task runner displayed my tasks - one of the modules weren't loading properly. Odd behaviour because the gulpfile.js and task runner were working correctly last week and the only changes made have been to install a few unrelated node modules locally.

Liam
  • 3,827
  • 21
  • 32
0

In my case, I'd already installed gulp (prior to this, Task Runner Explorer was saying "Failed to load" under Gulpfile.js like this)

enter image description here

But I still had "No tasks found" like this

enter image description here

Additionally, Visual Studio had already told me that it had installed all the required node packages when I asked it to convert my bundleconfig.json to gulp. But despite all of this, gulp still wasn't happy (and the node_modules directory under my web app root was pretty empty).

Running "npm install gulp" again I noticed this in the commandline

enter image description here

and thought this might be a write permission problem because package.json is under source control in my project. I checked that out and re-ran "npm install gulp" and similar for the associated packages like gulp-concat and now I have a very full node_modules directory and... does gulpfile.js work? Well no but I've got a different error now so I'm pretty sure that I'm on to a different problem now :-/

enter image description here

TL;DR; make sure your package.json is checked out before you start installing node packages if you're using source control.

Jon
  • 199
  • 2
  • 8