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?

@entre no I dint. Isn't it supposed to happen, because I've made that entry in package.json — galdin
Also just copying or updating package.json won't install anything, you have to run npm install to do that — harishr
@entre thanks, for the info. I got it working by using npm install. I dint do a global install, so that each project can handle it's packages independently. Also the package manager console makes it easy to run the commands in VS. No need to open a cmd and cd to the exact path as such. — galdin

Joe Davis Joe Davis · Accepted Answer · 2015-07-31T00:29:49

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.

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

5 Answers