Using gulp in VS2015 to compile LESS in ASP.NET 4.5.2 MVC project

Question

I tried the new ASP.NET vNext and I really liked the way gulp worked. I'm trying to compile LESS using gulp in an ASP.NET 4.5.2 MVC project now.

I followed this for help.
Here's what I've done so far:

Added a package.json file with the following code.

{
  "name": "package",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.0",
    "gulp-bower": "0.0.10",
    "gulp-config": "0.3.0",
    "gulp-less": "3.0.3",
    "gulp-plumber": "1.0.1"
  }
}

Created a Gulp Task in gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var plumber = require('gulp-plumber');
gulp.task('less', function () {
    return gulp.src('./Content/**/*.less')
    .pipe(plumber())
      .pipe(less({
          paths: [path.join(__dirname, 'less', 'includes')]
      }))
      .pipe(gulp.dest('./content/'));
});

But then I get the following error (in the output window):

Failed to run "C:\\Users\\me\\documents\\visual studio 2015\\Projects\\projectname\\Gulpfile.js"... cmd.exe /c gulp --tasks-simple 'gulp' is not recognized as an internal or external command, operable program or batch file.

I'm guessing npm din't download gulp. Any idea how to get this working?

Answer 1

You shouldn't need to install Gulp globally to work with it in Visual Studio 2015. When Gulp is installed into the project by npm, it adds gulp.cmd to a folder in your project (./node_modules/.bin by default). Visual Studio includes that path by default in the paths where it looks for external tools like Grunt, Gulp, Bower, and npm. This is configurable in Tools->Options->Projects And Solutions->External Web Tools .

My guess is that npm didn't successfully install the packages when you first created the package.json file. Whenever you save your package.json file, Visual Studio will run npm install for your project, so you don't even need to open a console window. But if you added an existing package.json file to the project, it doesn't install for you automatically. In that case you need to run npm install yourself, or open and save the file to get VS to do it for you.

Answer 2

Typing npm install in the Package Manager Console will add a node_modules folder to the project. All of the dependencies specified in the package.json file will be added to that folder.

In this case, now that gulp is installed, the error should be gone.

Answer 3

The short answer is, to get rid of this error, install gulp globally with the following command: npm install gulp -g

In VS2015 RC gulp had to be installed globally. Otherwise VS wouldn't recognize it. You can find a detailed explanation here: http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015

Is supposed to be fixed in VS2015 RTM, I haven't checked that yet though.

Running npm install for the separate packages should not be necessary. If you enable hidden folders, you should see that VS downloads all nodejs modules by default after you saved your package.json file. The download log can be found in the output window "Bower/NPM" in VS2015 RTM. If you enable hidden folders or take a look in your web project directory, you should see a node_modules folder with all the packages specified in your package.json file.

Answer 4

In my case I needed to move

$(PATH) 

before

.\node_modules\bin

Answer 5

I have found if you create the visual studio solution folder on a UNC path this error will occur.

Often UNC paths map your Documents folder when using a windows on virtual machine (eg Parallels for Mac).

To fix the issue I moved the visual studio solution folder to the virtual machine disk drive, then reopened the project.