【gulp導入】プラグイン機能しない（sassコンパイル）

node.js、gulpインストール済み
下記プラグイン等が使用できない状態です。
・glup-sass

以前に欲しいプラグイン全てを一括でインストールし、試しましたがうまくいかなかったので、まずgulp-sassをインストールしましたがエラーメッセージ
｀｀｀gulp-sass: command not found｀｀｀
が出てしまいました。
node.jsとgulpは下記の通りバージョンが出るのでインストールはされているようです・・

mac version: 10.15.3 Catalina

gulp
CLI version: 2.2.0
Local version: 4.0.2

node.js:v12.15.0

試した事
・JSONLintを使用したバリデーションチェック
・package-lock.jasonをアンインストールとpackage-jasonの再インストール
・グローバルの削除とローカルのインストール
・npm cache clean -forceでキャッシュの消去
・jasonのコンマの確認
・デフォルトシェルをbashからzshへ変更（今はbashへ戻しました）

理解不足で見当違いなことをしているとは思いますが、調べて出てきたことを試しました。

gulpfile.js



var gulp = require('gulp');
var sass = require('gulp-sass'); //Sassコンパイル

gulp.task('sass', function() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    ) //エラーチェック
    .pipe(sassGlob()) //importの読み込みを簡潔にする
    .pipe(
      sass({
        outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
      })
    )
    .pipe(
      postcss([
        autoprefixer({
          // ☆IEは11以上、Androidは4.4以上
          // その他は最新2バージョンで必要なベンダープレフィックスを付与する
          overrideBrowserslist: ['last 2 versions', 'ie >= 11', 'Android >= 4'],
          cascade: false
        })
      ])
    )
    .pipe(postcss([cssdeclsort({ order: 'alphabetically' })])) //プロパティをソートし直す(アルファベット順)
    .pipe(gulp.dest('./src/css')); //コンパイル後の出力先
});

package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "browser-sync": "^2.26.7",
    "css-declaration-sorter": "^5.1.1",
    "gulp": "^4.0.2",
    "gulp-ejs": "^5.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.1.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^8.0.0"
  },
  "dependencies": {},
  "description": ""
}


```![イメージ説明](a1cc9918fca534046a572c5c2d3689f9.png)
![イメージ説明](bea4f3226830a59d7b2b36b89c9e6d2a.png)
簡単な見落としや理解不足でしたらすみません。
お力添えをお願いします。

nanami12

2020/02/13 01:48

質問者さんと、同じ環境をお持ちの方は少ないかとおもわれます。すくなくとも、プログラミングの質問ではないのでプラグインのreadmeを熟読するか同一名のプラグインで同様の問題がないかさぐるしかないかと思います。

benkyosuruo

2020/02/13 02:08

どこに問題がありどう解決していいかも切り分けができていない状態で・・失礼いたしました。無知な質問でしたが、ご回答ありがとうございます。引き続き調べてみようと思います。

nanami12

2020/02/13 02:20

プラグイン名を正確に記載することで、回答を得られるかもしれないのでプラグイン名を正確に記載したほうがよろしいかと思います。すくなからず、プラグイン名はアルファベットで表記されていると思います。

benkyosuruo

2020/02/13 02:27

アドバイスの通り、プラグイン名を追記してみました。ご丁寧にありがとうございます。

行動規範の内容に同意します

回答3件

あなたのgulpfile.jsを省略してsass処理だけにしてみましたが、gulp-sassは問題なく動きますね。

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

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

実行

$ npm run gulp sass
> gulptest@0.0.0 gulp /usr/local/var/www/gulptest
> gulp "sass"
[00:44:13] Using gulpfile /usr/local/var/www/gulptest/gulpfile.js
[00:44:13] Starting 'sass'...
[00:44:13] Finished 'sass' after 24 ms

エラーメッセージ
｀｀｀gulp-sass: command not found｀｀｀
が出てしまいました。

変なエラーメッセージですね。
gulp-sassはgulpのモジュールなので
「モジュール 'gulp-sass' が見つかりません。」
みたいなエラーならわかりますが。

あなたの環境にはgulp-sassという実行コマンドがあるのですか？

投稿2020/02/14 00:59

technocore

総合スコア7355

benkyosuruoさんがはっていただいた画像を見て、package.jsonなどのファイルのある階層が気になりました。
package.json、package.json-lock、gulpfile.js はsrcやnode_modulesと同じ階層にあるのが正しいです。

nanamiさんが紹介していただいたサイトの画像を添付します。
ref: 絶対つまずかないGulp 4入門（2019年版） - インストールとSassを使うまでの手順 - ICS MEDIA
]