Gulpエラー；gulp sassが実行できない

Question

前提・実現したいこと

Sassを始めようと思っております。そのためにGulpを導入しようとしているのですが、
gulp sassができません・・・。どなたかアドバイスお願いいたします！

発生している問題・エラーメッセージ

セットアップ完了、さあ　gulp sass　を実行！するとエラーが出ます。

Error: Cannot find module 'sass'
Require stack:
- /Users/Ayumi/Desktop/gulp-test/gulpfile.js
- /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js
- /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /usr/local/lib/node_modules/gulp/node_modules/gulp-cli/index.js
- /usr/local/lib/node_modules/gulp/bin/gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/Ayumi/Desktop/gulp-test/gulpfile.js:2:33)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/Ayumi/Desktop/gulp-test/gulpfile.js',
    '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/shared/require-or-import.js',
    '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
    '/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/index.js',
    '/usr/local/lib/node_modules/gulp/bin/gulp.js'
  ]
}

該当のソースコード

gulpfile.jsは以下の通りです。

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass',function() {
 return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function() {
    gulp.watch('./sass/**/*.scss', ['sass']);
});

該当のソースコード

package.jsonは以下の通りです。

{
  "name": "gulp-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^5.0.0"
  }
}

試したこと

1.

gulpfile.jsについては以下のように直しました。

var sass = require('gulp-sass'));
↓
var sass = require('gulp-sass')(require('sass'));

####2.
あとは、gulpやgulp-sassを何度かインストールし直しています。
また、

found 3 vulnerabilities (1 low, 2 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

というメッセージが出るので、npm audit fixも実行しました。

####3.

$ npm install gulp-sass --save-dev　

も実行しました。

補足情報（FW/ツールのバージョンなど）

Nodeのバージョン：v14.17.6

gulpのバージョン
CLI version: 2.3.0
Local version: 4.0.2

"gulp-plumber": "^1.2.1",
"gulp-sass": "^5.0.0"

Comments

[surface_0]

sassコンパイラ本体のインストールはしましたか？

[Hachinai]

surface_0様
sassコンパイラ本体・・・
gulp-sassがコンパイラ、だと思ってたのですが違うのでしょうか？

[surface_0]

言い忘れてましたが、提示されているpackage.jsonとgulpfile.jsのコードが逆さですので修正お願いします。

Answer 1

gulp-sassのドキュメントにあるとおりgulp-sassとは別にsassコンパイラ本体が必要です。

（Installationの項）
https://www.npmjs.com/package/gulp-sass

To use gulp-sass, you must install both gulp-sass itself and a Sass compiler. gulp-sass supports both Dart Sass and Node Sass, but Node Sass is deprecated.

どうやらインストールされていないようですので、ドキュメントに従ってインストールしてください。
Dart Sassのインストールなら下記コマンドでOKです。

npm install sass --save-dev

Comments

[Hachinai]

surface_0様

返信ありがとうございます。
お教えいただいた通りコマンドを打ち、Sassコンパイラをインストールした（つもり）のですが、さらなるエラーが出てしまいぐぐり倒しておりますがまだ解決に至っておりません。
もし可能でしたらアドバイス頂けると幸いです。

エラー文；
```
ReferenceError: primordials is not defined
at fs.js:45:5
at req_ (/Users/Ayumi/Desktop/gulp-test/node_modules/natives/index.js:143:24)
at Object.req [as require] (/Users/Ayumi/Desktop/gulp-test/node_modules/natives/index.js:55:10)
at Object.<anonymous> (/Users/Ayumi/Desktop/gulp-test/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
```

モジュールが足りないのでしょうか・・・。
モジュールをremoveしてNode.js入れ直し、というものやったつもりなのですが・・・。

[surface_0]

nativesというモジュールが古いNodeJSのパッケージを参照しているためにエラーが起きているようです。
自分も全く同じバージョンのNodeJSとパッケージを揃えてgulp sassを試しましたがnativesモジュールはインストールされておらず、実行時エラーもありませんでした。

nativesに依存しているgraceful-fsモジュールが古い可能性があるので、
それを更新するために一旦 npm update をして再度確認してみてください。

それでもダメな場合は、node_modulesディレクトリをまるっと削除してから、
npm i を実行して総入れ直しを試してみてください。

[Hachinai]

surface_0様
アドバイスありがとうございます。
試してみます！

[Hachinai]

surface_0様
npm updateしても変化無しでしたので、node_modulesをディレクトリごと消して、npm installしましたが、同じエラーが出ました。

```
ReferenceError: primordials is not defined
at fs.js:45:5
at req_ (/Users/Ayumi/Desktop/gulp-test/node_modules/natives/index.js:143:24)
at Object.req [as require] (/Users/Ayumi/Desktop/gulp-test/node_modules/natives/index.js:55:10)
at Object.<anonymous> (/Users/Ayumi/Desktop/gulp-test/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
```

そしていじり倒しているとpackage.jsonの中身が増えてしまいました。
package.jsonも消してやり直した方が良いでしょうか？

{
"name": "gulp-test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^5.0.0",
"minimatch": "^3.0.4",
"sass": "^1.42.1"
},
"dependencies": {
"js": "^0.1.0"
}
}

[surface_0]

うーん、おかしいですね。
私の場合、まっさらな状態から
```
npm init
npm i gulp gulp-plumber gulp-sass sass --save-dev
```
でpackage.jsonはこうなりました。
```
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^5.0.0",
"sass": "^1.42.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
```
一度、
node_modules
package-lock.json
package.json
をすべて削除してやりなおしてみてもらっていいですか？

[Hachinai]

はい、やってみます。
ありがとうございます！

[Hachinai]

surface_0様

node_modules
package-lock.json
package.jsonを削除してやり直したのですが、やはり同様のエラーメッセージが出てきました。

エラーメッセージの
ReferenceError: primordials is not defined　をググると、node.jsとgulpのバージョンの組み合わせがよくないから実行できない、という記事が出てきたので、gulpを削除して入れ直しました。

この状態で gulp sass をすると、やっとcssのフォルダが出てきました（つまりSassがCSSにコンパイルされた）のですが、以下のエラーメッセージが出ています。

Did you forget to signal async completion?

このエラーメッセージをググると、

gulp.taskに渡すfunctionはパラメーターdoneをとって、そこに渡されるコールバックメソッドを最後に呼び出さなければならないみたいです。
コールバックを行うことで、task内の処理の終了を意味します。
そのため、記載のメソッドが呼ばれたタイミングで、そのtaskの処理は終了します

という記事が出てきたので、
この記事を参考にエラーメッセージが消えるようにもうちょっといじろうと思います。

[surface_0]

もしかして、グローバルインストールした方のgulpが古かったのでしょうか？
そこは盲点だったかもしれません…

でも、一応そこまで行けたらコンパイルもできてるようですし、done()すれば解決しそうですね。

[Hachinai]

はい。本当にたくさんアドバイスありがとうございました。
一人だったらとっくに投げ出して、Dream WeaverでSassしていたと思います。