在 VS2015 中使用 gulp 在 ASP.NET 4.5.2 MVC 项目中编译 LESS答案

【问题标题】：Using gulp in VS2015 to compile LESS in ASP.NET 4.5.2 MVC project在 VS2015 中使用 gulp 在 ASP.NET 4.5.2 MVC 项目中编译 LESS
【发布时间】：2015-10-18 08:43:35
【问题描述】：

我尝试了新的 ASP.NET vNext，我真的很喜欢 gulp 的工作方式。我现在正在尝试在 ASP.NET 4.5.2 MVC 项目中使用 gulp 编译 LESS。

我关注this 寻求帮助。
这是我到目前为止所做的：

添加了包含以下代码的 package.json 文件。

{
  "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"
  }
}

在 gulpfile.js 中创建了一个 Gulp 任务

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/'));
});

然后我收到以下错误（在输出窗口中）：

无法运行“C:\Users\me\documents\visual studio 2015\Projects\projectname\Gulpfile.js”... cmd.exe /c gulp --tasks-simple 'gulp' 未被识别为内部或外部命令，可运行的程序或批处理文件。

我猜 npm 不会下载 gulp。知道如何让它工作吗？

【问题讨论】：

你全局安装gulp了吗npm install -g gulp
@entre no I dint。这不应该发生吗，因为我已经在 package.json 中做了那个条目
同样只是复制或更新 package.json 不会安装任何东西，你必须运行 npm install 来做到这一点
@entre 谢谢你的信息。我通过使用 npm install 让它工作。我尽力进行全局安装，以便每个项目都可以独立处理它的包。包管理器控制台也可以很容易地在 VS 中运行命令。无需像这样打开 cmd 和 cd 到确切的路径。

标签： asp.net-mvc npm gulp visual-studio-2015

【解决方案1】：

您不需要全局安装 Gulp 即可在 Visual Studio 2015 中使用它。当通过 npm 将 Gulp 安装到项目中时，它会将 gulp.cmd 添加到项目中的文件夹（./node_modules/.bin by默认）。默认情况下，Visual Studio 在查找外部工具（如 Grunt、Gulp、Bower 和 npm）的路径中包含该路径。这可在Tools->Options->Projects And Solutions->External Web Tools 中配置。

我的猜测是当你第一次创建 package.json 文件时 npm 没有成功安装包。每当您保存 package.json 文件时，Visual Studio 都会为您的项目运行 npm install，因此您甚至不需要打开控制台窗口。但是，如果您将现有的 package.json 文件添加到项目中，它不会自动为您安装。在这种情况下，您需要自己运行 npm install，或者打开并保存文件让 VS 为您执行此操作。

【讨论】：

好吧，我认为 VS 不会为我的项目自动运行 npm install。但是当我在 asp.net vNext 项目中对 package.json 进行修改时，它会自行运行 npm install
在我的情况下，我的 package.json 中有 javascript cmets ("//")，重新编辑此文件导致输出窗口将 cmets 突出显示为错误的，因此我将其删除并保存再次文件，npm/gulp 安装正常。

【解决方案2】：

在 Package Manager Console 中键入 npm install 会将 node_modules 文件夹添加到项目中。 package.json 文件中指定的所有依赖项都将添加到该文件夹中。

在这种情况下，现在安装了 gulp，错误应该消失了。

【讨论】：

【解决方案3】：

简短的回答是，要消除此错误，请使用以下命令全局安装 gulp： npm install gulp -g

在 VS2015 中，RC gulp 必须全局安装。否则 VS 将无法识别它。你可以在这里找到详细的解释：http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015

应该在 VS2015 RTM 中修复，不过我还没有检查过。

不需要为单独的包运行 npm install。如果启用隐藏文件夹，您应该会看到 VS 在您保存 package.json 文件后默认下载所有 nodejs 模块。下载日志可以在VS2015 RTM的输出窗口“Bower/NPM”中找到。如果您启用隐藏文件夹或查看您的 Web 项目目录，您应该会看到一个 node_modules 文件夹，其中包含您的 package.json 文件中指定的所有包。

【讨论】：

【解决方案4】：

就我而言，我需要搬家

$(PATH)

之前

.\node_modules\bin

【讨论】：

【解决方案5】：

我发现如果您在 UNC 路径上创建 Visual Studio 解决方案文件夹，则会发生此错误。

在虚拟机（例如 Parallels for Mac）上使用 Windows 时，UNC 路径通常会映射您的 Documents 文件夹。

为了解决这个问题，我将 Visual Studio 解决方案文件夹移动到虚拟机磁盘驱动器，然后重新打开项目。

【讨论】：