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
– galdin, Commented Jul 28, 2015 at 8:50
Also just copying or updating package.json won't install anything, you have to run npm install to do that — harishr
– harishr, Commented Jul 28, 2015 at 15:06
@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
– galdin, Commented Jul 28, 2015 at 21:26

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

9

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.

answered Jul 31, 2015 at 0:29

Joe Davis

7925 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

galdin Over a year ago

well, I don't think VS ran npm install automatically for my project. But it ran npm install on its own when I made modifications to package.json in a asp.net vNext project

Greg Trevellick Over a year ago

In my case my package.json had javascript comments in it ("//"), re-editing this file caused the Output window to highlight the comments as erroneous, so I removed them and save the file again and npm/gulp was installed ok.

galdin · Accepted Answer · 2015-07-28 12:59:23Z

7

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.

answered Jul 28, 2015 at 12:59

galdin

14.2k8 gold badges63 silver badges77 bronze badges

Comments

Arne Klein · Accepted Answer · 2015-07-28 14:02:50Z

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.

Paul · Accepted Answer · 2017-03-11 00:23:24Z

2

In my case I needed to move

$(PATH)

before

.\node_modules\bin

answered Mar 11, 2017 at 0:23

Paul

1,0042 gold badges14 silver badges38 bronze badges

Comments

wal5hy · Accepted Answer · 2016-01-17 12:30:13Z

0

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 (e.g. Parallels for Mac).

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

answered Jan 17, 2016 at 12:30

wal5hy

6646 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related