GulpでSASSのコンパイル手作業を自動化する３

cd c:\inetpub\wwwroot\my-project

npm install node-sass gulp-sass --save-dev

・・(途中省略)・・
Binary is fine
npm WARN my-project@1.0.0 No description
npm WARN my-project@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ gulp-sass@4.0.2
+ node-sass@4.12.0
added 118 packages from 124 contributors and audited 7583 packages in 80.336s
found 0 vulnerabilities

my-project/
  ├css/
  ├images/
  ├js/
  └sass/
  gulpfile.js
  package.json

// サンプルSASS
.hoge {
  p {
    font-weight: bold;
  }
}

$fontColor: #333;

h1 {
  color: $fontColor;
}

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp sass

[16:02:39] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:02:39] Starting 'sass'...
[16:02:39] Finished 'sass' after 88 ms

.hoge p {
  font-weight: bold; }

h1 {
  color: #333; }

gulp sass:watch

c:\inetpub\wwwroot\my-project>gulp sass:watch
[16:22:48] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:22:48] Starting 'sass:watch'...
[16:22:48] 'sass:watch' errored after 9.55 ms
[16:22:48] Error: watching ./sass/**/*.scss: watch task has to be a function (op
tionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (c:\inetpub\wwwroot\my-project\node_modules\gulp\index.js:31:1
1)
    at c:\inetpub\wwwroot\my-project\gulpfile.js:15:8
    at taskWrapper (c:\inetpub\wwwroot\my-project\node_modules\undertaker\lib\se
t-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (c:\inetpub\wwwroot\my-project\node_modules\async-done\index.
js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

・・(省略)・・ 
gulp.task('sass:watch', function () {
  //gulp.watch('./sass/**/*.scss', ['sass']);  // Gulp3
  gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});

gulp sass:watch

[16:46:14] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[16:46:14] Starting 'sass:watch'...

// サンプルSASS
・・(省略)・・ 
$fontColor: #ccc; // ← #333 から変更

・・(省略)・・
h1 {
  color: #ccc; }

Error in plugin "sass"
Message:
    sass\style.scss
Error: Undefined variable: "$gege".
        on line 12 of sass/style.scss
>>   backgroundcolor: $gege;
   -------------------^

[16:46:14] Starting 'sass:watch'...
[16:46:33] Starting 'sass'...
[16:46:33] Finished 'sass' after 77 ms
[16:46:43] Starting 'sass'...
[16:46:43] Finished 'sass' after 21 ms
[16:56:59] Starting 'sass'...
[16:56:59] Finished 'sass' after 17 ms
^CTerminate batch job (Y/N)? y