Adding gulp-sass breaks by task runner

Question

I have a basic gulp setup in VS2017 to minify my Javascript. I decided to add gulp-sass (my package.json says I'm on gulp-sass v4.0.1) but it throws this error:

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)

My gulpfile looks like this:

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

I did some Googling and a simple fix suggested was to add "use strict" to the top of the offending file, in this case index.js:66. However, after doing that I get:

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)

I am running Node.js v6. I'm lost as to why what should be a simple process is giving me these errors. What am I doing wrong?

Update:

I ran the following commands suggested in the comments:

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

Both ran successfully. However, I'm still getting this error:

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)

Update 2:

I was advised to add "use strict"; to the top of my gulpfile.js, but the same error occurs. Here's the file contents:

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

Most common issue online appears to be Node.js version of < 6.0, but I'm running v6.11.1.

Update 3: (solved)

I finally found the cause & solution; I've added it as an answer down below for any future readers. Enjoy.

Answer 1

Managed to find the problem so I'm answering my own question for future readers.

Whilst I have node.js v6.11.1 installed, Visual Studio 2017 comes bundled with it's own version of node that it uses by default. Even if you run node -v in the VS2017 shell and it tells you it's running v6.11.1, it's actually - by default - running whatever it finds in .\node_mobules\.bin.

The solution is this:

1. In VS2017, go "Tools > Options > Projects and Solutions > Web Package Management > External Web Tools".

2. You'll probably see this:

3. Add the path to your standalone installation of node (default C:\Program Files\nodejs) and, using the arrows, position it above the .\node_modules\bin version, like this:

4. Hit OK and either refresh the Task Runner Explorer or restart VS2017. Your gulpfile should now build.

Answer 2

In my case, I had to move $(PATH) above $(VSINSTALLDIR)/Web/External to fix the problem.