gulpのソースマップの設定について質問です。

sassでソースマップを設定して検証から行数を確認できるよう設定しているのですが、うまくいきません。。

おもなファイル構成は下記です。
html/common/css/
html/common/scss/
gulp/gulpfile.js
gulp/package.json

理想は保存と同時にソースマップが吐き出されるのが理想ですが、現状gulpのある階層でgulp sassタスクの起動？をしてもgulp command not foundとなってしまいます
一応npm install --save-dev gulpでgulpはインストールしたですがうまくできていないのでしょうか。。

js
1// gulpfile.js
2
3var gulp = require('gulp');
4var browserSync =require('browser-sync');
5var sourcemaps = require('gulp-sourcemaps');
6
7gulp.task('watch', function (done) {
8  gulp.watch("../html/**", gulp.parallel('reload'));
9  done();
10});
11gulp.task('default', gulp.parallel('browser-sync', 'watch'));
12
13/* sass task */
14gulp.task('sass', function () {
15  return gulp.src('../html/common/scss/top.scss')
16    .pipe(sourcemaps.init())
17    .pipe(sass())
18    .pipe(sourcemaps.write('./'))
19    .pipe(gulp.dest('../html/common/css/'));
20});

json
1// package.json
2{
3  "name": "gulp_",
4  "version": "1.0.0",
5  "description": "",
6  "main": "gulpfile.js",
7  "dependencies": {
8    "browser-sync": "^2.26.3",
9    "gulp": "^4.0.0"
10  },
11  "scripts": {
12    "gulp": "gulp"
13  },
14  "author": "",
15  "license": "ISC",
16  "devDependencies": {
17    "gulp": "^4.0.0",
18    "gulp-sourcemaps": "^2.6.5"
19  }
20}