gulpを使用してsassのコンパイルが何度やっても出来ない

Question

gulpでSassをコンパイルしたいがつまずいている。。

Sassのコンパイルが全く出来ず、何をすれば良いのか見失っています...
ディレクトリ構造が以下。

●●●●●●●(folder name)
 -top_page.html
 -sass(folder)
  -top_page.scss
 -stylesheet(folder)
 -gulpfile.js
 -package.json
 -package-lock.json
 -node_modules

gulpfile.js

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

// SassとCssの保存先を指定
gulp.task('sass', function(){
  gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'));
});

//自動監視のタスクを作成(sass-watchと名付ける)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
  watcher.on('change', function(event) {
  });
});

// タスク"task-watch"がgulpと入力しただけでdefaultで実行されるようになる
gulp.task('default', ['sass-watch']);

pacage.json

{
  "name": "******(folder name)",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.0",
    "browser-sync": "^2.26.7",
    "css-declaration-sorter": "^5.1.2",
    "gulp": "^4.0.2",
    "gulp-ejs": "^5.1.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.1.0",
    "gulp-sass-glob": "^1.1.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.0"
  }
}

上記状態で、ターミナルにnpm run gulpと打つと..以下がでます。

npm ERR! missing script: gulp
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/****/.npm/_logs/2020-06-05T03_33_50_342Z-debug.log

また、ターミナルにgulpと打つと、以下がでます。

[12:59:47] Using gulpfile ~/gulpfile.js
[12:59:47] Task never defined: default
[12:59:47] To list available tasks, try running: gulp --tasks

色々な記事を読み漁りパスを変えたりして、色々と書き加えたりして変えましたが、まったくコンパイルできません。
詳しい方、何がダメなのか助言頂けるとありがたく思います。

よろしくお願いします...

参考記事
https://flex-box.net/gulp/#co-index-1
https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a
https://teratail.com/questions/134500
https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a

Comments

[miyabi_pudding]

gulpのバージョンはなんぼでしょうか？？
3系と4系では、書き方若干変わりますので。

[miyabi_pudding]

また、コマンドを、
gulp sass-watch
として実行してみてください。

[codemanvs]

CLI version: 2.2.0
Local version: 4.0.2

こちらです!!

[codemanvs]

gulp sass-watchをvs codeのターミナルで行うとこのようなのがでました！

at execute (/usr/local/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='

[miyabi_pudding]

CLI version: 2.2.0
Local version: 4.0.2

を出せたディレクトリでのコマンド実行で、それがターミナル上で出たということですか？？

[codemanvs]

はい、そうです！

vs codeのターミナルではなく、普通のターミナル上でgulp sass-watchを打ち込んだ場合は以下がでました。

[13:27:11] Using gulpfile ~/gulpfile.js
[13:27:11] Task never defined: sass-watch
[13:27:11] To list available tasks, try running: gulp --tasks

[miyabi_pudding]

普通のターミナルの方で出たのが、動作している状態かと思われますので、
その状態で、sassファイルを修正してみてください

[codemanvs]

すみません、これ以上どこを修正すれば良いのかがわからない状態です。。。
が、いったん色々ググってもう一度やってみます！
他にアドバイスがあればその時はどうかよろしくおねがいします。

[miyabi_pudding]

あ、いや、動いてないかも。

おそらく、watch自体を、gulpfile.jsにて定義する必要があります。

gulp 4 watchと調べてみてください。
4系だと、定義の仕方が少し違ったはずです

[miyabi_pudding]

あと、さきほど私が修正してみて、と言ったのは、
sassファイル自体です。
watchは、基本的に、ファイルの更新などを監視するタスクとなりますので、
対象のファイルを修正したのに反応して、ファイルにgulpで定義した処理を行い、定義したパスに吐き出すって仕組みになります。

[codemanvs]

なるほど...

gulp 4 watchを調べてもう少し、いじってみます！

Answer 1

本質問の書き方は、gulp 3系の書き方なので、
gulp 4系では、動きません。
下記のようにgulpfile.jsを書き換えてみてください。
（また、gulp-changedパッケージをインストールしてください）

// 各処理メソッドを、gulpの中で読み込むのではなく、直接取り出す
const {src, watch, dest, series} = require('gulp');
const changed = require('gulp-changed');
var sass = require('gulp-sass');

// SassとCssの保存先を指定
// gulpからの実行ではなく、処理自体を、変数に格納する
const sassComp = () => {
  return src('./sass/**/*.scss')
    // 下記一行を追加
    .pipe(changed('./sass/**/*.scss'))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(dest('./css/'));
};

// 自動監視のタスクを作成(sass-watchと名付ける) + コマンドから実行できるようにする
exports['sass-watch'] = () => {
  watch(['./sass/**/*.scss'], series(sassComp));
  // watcher.on('change', function(event){});
};

// gulp4以降では、下記のような処理は不要
// タスク"task-watch"がgulpと入力しただけでdefaultで実行されるようになる
// gulp.task('default', ['sass-watch']);

これで、コマンドにて、gulp sass-watchと実行すれば、
sassファイルの監視がスタートするはずです。
動かなかったりしたら、またコメントください。

Comments

[codemanvs]

ありがとうございます！
gulp-changedインストールして試してみましたけど、できないです。。

以下のエラーがやはりでますね
[14:36:24] Using gulpfile ~/gulpfile.js
[14:36:24] Task never defined: sass-watch
[14:36:24] To list available tasks, try running: gulp --tasks

[miyabi_pudding]

ふむ・・・・、
私の回答通りで書いて、動作しなかったってことですよね？
gulp-changedは、ローカルインストールでしょうか？
（多分ローカルインストールの方がよさそう）
エラーとか出てきてたら、エラー文教えていただけませんか？

[miyabi_pudding]

const {src, watch, dest, series} = require('gulp');
は入れましたか？

とにかく、一度回答と、ご自身のコードを見比べて、回答のコードと同じになるようにしていただけないでしょうか？

[codemanvs]

お返事遅れすみません。。。あの後、miyabiさんが教えてくれたコードなどを何度も見直したり、少し変えたりしても全くできなかったので、いったんgulpを使わずにコンパイルを行いました。
後日、再度gulpでのやり方を試してみます。。

色々、教えていただきありがとうございました...... :)