通过任务运行器添加 gulp-sass 中断

Posted 2023-03-07

【中文标题】通过任务运行器添加 gulp-sass 中断

【英文标题】：Adding gulp-sass breaks by task runner

【发布时间】：2018-12-03 12:05:30

【问题描述】：

我在 VS2017 中有一个基本的 gulp 设置来缩小我的 javascript。我决定添加 gulp-sass（我的 package.json 说我使用的是 gulp-sass v4.0.1）但它会抛出这个错误：

C:\Work\MyProject\MyProject\node_modules\gulp-sass\index.js:66
    let sassMap;
    ^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Work\MyProject\MyProject\gulpfile.js:11:12)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)

我的 gulpfile 看起来像这样：

var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

gulp.task('minify', function () 
    gulp.src('src/**/*.js')
        .pipe(uglify( mangle: false ))
        .pipe(concat('scripts.min.js'))
        .pipe(gulp.dest('Content'));


);

gulp.task('sass', function () 
    gulp.src('src/css/**/*.scss')
        .pipe(sass( outputStyle: 'compressed' ))
        .pipe(gulp.dest('Content'));
);

gulp.task('watch', function () 
    gulp.watch('src/**/*.js', ['minify']);
);

我做了一些谷歌搜索，一个简单的修复建议是在有问题的文件的顶部添加“use strict”，在本例中为 index.js:66。但是，在这样做之后，我得到：

Failed to run "C:\Work\MyProject\MyProject\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
C:\Work\MyProject\MyProject\node_modules\node-sass\lib\binding.js:15
      throw new Error(errors.missingBinary());
      ^
Error: Missing binding C:\Work\MyProject\MyProject\node_modules\node-sass\vendor\win32-x64-47\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 5.x
Found bindings for the following environments:
  - Windows 64-bit with Node.js 6.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (C:\Work\MyProject\MyProject\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (C:\Work\MyProject\MyProject\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Work\MyProject\MyProject\node_modules\gulp-sass\index.js:163:21)
    at Module._compile (module.js:397:26)

我正在运行 Node.js v6。我不知道为什么应该是一个简单的过程会给我这些错误。我做错了什么？

更新：

我运行了 cmets 中建议的以下命令：

npm install node-sass -f
npm rebuild nose-sass

两者都运行成功。但是，我仍然收到此错误：

Failed to run "C:\Work\MyProject\MyProject\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
C:\Work\MyProject\MyProject\node_modules\gulp-sass\index.js:66
    let sassMap;
    ^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Work\MyProject\MyProject\gulpfile.js:8:12)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)

更新 2：

有人建议我添加“use strict”；到我的 gulpfile.js 的顶部，但发生同样的错误。这是文件内容：

"use strict";
var gulp = require('gulp');
var sass = require('gulp-sass'); // If I comment this out, I can build

gulp.task('sass', function () 
    gulp.src('src/css/**/*.scss')
        .pipe(sass( outputStyle: 'compressed' ))
        .pipe(gulp.dest('Content'));
);

网上最常见的问题似乎是

更新 3：（已解决）

我终于找到了原因&解决办法；我已将其添加为下面的任何未来读者的答案。享受吧。

【问题讨论】：

***.com/questions/37986800/…

npm rebuild node-sass 或 npm install node-sass -f 将重建二进制文件或（第二个）强制节点 sass 重新安装。

@muecas 感谢您的建议。我已经更新了这个问题，因为我现在遇到了一个不同的错误，这是我在 /node_modules/gulp-sass 中四处寻找之前遇到的错误 - 重新安装必须修复了我引起的问题，现在我已经回到原来的问题。你能再看看吗？

@ZamronyP.Juhara 谢谢，我用我的新错误更新了问题

@MSOACC 你需要在你的 js gulp 文件的顶部添加"use strict";。

【参考方案1】：

设法找到了问题，所以我正在为未来的读者回答我自己的问题。

虽然我安装了 node.js v6.11.1，但 Visual Studio 2017 捆绑了它自己默认使用的节点版本。即使您在 VS2017 shell 中运行 node -v 并且它告诉您它正在运行 v6.11.1，它实际上 - 默认情况下 - 运行它在 .\node_mobules\.bin 中找到的任何内容。

解决办法是这样的：

在 VS2017 中，转到“工具 > 选项 > 项目和解决方案 > Web 包管理 > 外部 Web 工具”。

你可能会看到：

添加独立安装节点的路径（默认为C:\Program Files\nodejs），并使用箭头将其置于.\node_modules\bin 版本之上，如下所示：

点击 OK 并刷新 Task Runner Explorer 或重新启动 VS2017。您的 gulpfile 现在应该构建了。

【参考方案2】：

就我而言，我必须将 $(PATH) 移到 $(VSINSTALLDIR)/Web/External 上方才能解决问题。