【追記】gulp4を使用して同階層でdestフォルダにsassとpugを自動コンパイルさせたい

Question

前提・実現したいこと

【実現したいこと】
pug、css、sassを同階層でdestフォルダにリアルタイムで自動コンパイルと
cssファイルはコピーさせること

【問題】
js,gulpに関して初心者です。
gulpを使ってsassを同じ階層で自動コンパイルするとエラーが出る。

【概要】
とあるサイトからテンプレートをダウンロードして、自分のしたいことを
肉付けしていきました。
sassを入れる前はpugなど、全て自動コンパイルが出来ていました。

【参考サイト】
https://www.tam-tam.co.jp/tipsnote/html_css/post10973.html
http://hiromode.hatenablog.com/entry/2018/07/29/154522
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b

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

gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles)));
                                      ^

TypeError: gulp.parallel is not a function
    at Object.<anonymous> (C:\Users\Documents\pug-sass-test\gulpfile.js:139:39)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Liftoff.handleArguments (C:\Users\Documents\pug-sass-test\node_modules\gulp\bin\gulp.js:116:3)
    at Liftoff.execute (C:\Users\Documents\pug-sass-test\node_modules\liftoff\index.js:203:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gulp-pug-test@1.0.0 start: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gulp-pug-test@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

ディレクトリ構造

gulpfile.jsのソースコード

const gulp = require('gulp');

//pug
const pug = require('gulp-pug');
const fs = require('fs');
const data = require('gulp-data');
const path = require('path');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const browserSync = require('browser-sync');

//css
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const postcss = require('gulp-postcss');
const flexBugsFixes = require('postcss-flexbugs-fixes');
const autoprefixer = require('gulp-autoprefixer'); //Sassにベンダープレフィックスをつける
const rename = require('gulp-rename'); //ファイルをリネーム

/**
 * 開発用のディレクトリを指定します。
 */
const src = {
  // 出力対象は`_`で始まっていない`.pug`ファイル。
  'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
  // JSONファイルのディレクトリを変数化。
  'json': 'src/_data/',
  'css': 'src/**/*.css',
  'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'],
  //'styleguideWatch': 'src/**/*.scss',
  'js': 'src/**/*.js'
};

/**
 * 出力するディレクトリを指定します。
 */
const dest = {
  'root': 'dest/',
  'html': 'dest/'
};

/**
 * `.pug`をコンパイルしてから、destディレクトリに出力します。
 * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。
 */
function html() {
  // JSONファイルの読み込み。
  var locals = {
    'site': JSON.parse(fs.readFileSync(src.json + 'site.json'))
  }
  return gulp.src(src.html)
  // コンパイルエラーを通知します。
  .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
  // 各ページごとの`/`を除いたルート相対パスを取得します。
  .pipe(data(function(file) {
    locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html'));
      return locals;
  }))
  .pipe(pug({
    // JSONファイルとルート相対パスの情報を渡します。
    locals: locals,
    // Pugファイルのルートディレクトリを指定します。
    // `/_includes/_layout`のようにルート相対パスで指定することができます。
    basedir: 'src',
    // Pugファイルの整形。
    pretty: true
  }))
  .pipe(gulp.dest(dest.html))
  .pipe(browserSync.reload({stream: true}));
}

/**
 * cssファイルをdestディレクトリに出力（コピー）します。
 */
function css() {
  return gulp.src(src.css, {base: src.root})
  .pipe(gulp.dest(dest.root))
  .pipe(browserSync.reload({stream: true}));
}


/**
 * sassファイルをdestディレクトリに同じ階層として出力（コピー）します。
 */
function sass_style() {
  const plugins = [flexBugsFixes(), autoprefixer()];
  return gulp.src(src.scss, {base: src.root})
      .pipe(sassGlob())
      .pipe(sass({
          outputStyle: 'expanded',
        }).on('error', sass.logError),
      )
      .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
      .pipe(postcss(plugins))
      .pipe(autoprefixer({ // ベンダープレフィックスの付与
          browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
          cascade: true // 整形する
      }))
      .pipe(rename(function (path) {
        path.dirname += '/css';
      }))
      .pipe(gulp.dest('../'))
      .pipe(browserSync.reload({ stream: true }));
}

/**
 * jsファイルをdestディレクトリに出力（コピー）します。
 */
function js() {
  return gulp.src(src.js, {base: src.root})
  .pipe(gulp.dest(dest.root))
  .pipe(browserSync.reload({stream: true}));
}

/**
 * ローカルサーバーを起動します。
 */
function browsersync() {
  browserSync({
    server: {
      baseDir: dest.root,
      index: "index.html"
    }
  });
};

/**
 * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。
 */
function watchFiles(done) {
  gulp.watch(src.html).on('change', gulp.series(html, browserReload));
  gulp.watch(src.scss).on('change', gulp.series(sass_style, browserReload));
  gulp.watch(src.css).on('change', gulp.series(css, browserReload));
  gulp.watch(src.js).on('change', gulp.series(js, browserReload));
}

gulp.task('default', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browsersync, watchFiles)));

/**
 * 開発に使うタスクです。
 * package.jsonに設定をして、`npm run default`で実行できるようにしています。
 */
gulp.task('default', ['watch']);

index.pug

extend /_includes/_layout
append variables
  //- Required
  - var pageTitle= "";
  - var pageDescription= site.description;
  - var pageKeywords= site.keywords;
  //- Optional
  - var pageOgpTitle= "";
  - var pageOgpImage= site.ogpImage
  - var pageLang= "ja";
  - var pageOgpType= "website";
  //- Not modified
  - var pageUrl= relativePath;

//- 固定ページにのみ追加のCSS
append css
  link(rel="stylesheet" href="/about/css/about.css")

//- 固定ページにのみ追加のJS
append js
  script(src="/assets/js/common2.js")

block content
  // contents
  p Contents変更しますよ
  // /contents

_footer.pug

// footer
footer
    p: small copyright m-field
// /footer

_header.pug

// header
header
  h1.site-name Pugで作ったサイト

nav.global-nav
  ul
    li: a(href="#") トップ
    li: a(href="#") メニュー01
    li: a(href="#") メニュー02
    li: a(href="#") メニュー03
    li: a(href="#") メニュー04
// /header

_layout.pug

block variables
doctype html
html(lang=pageLang)
  head(prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# " + pageOgpType + ": http://ogp.me/ns/" + pageOgpType + "#")
    include /_includes/_meta

  body
    include /_includes/_header

    block content

    include /_includes/_footer
    include /_includes/_script

base.scss

$pc: 1024px; // PC
$tab: 680px; // タブレット
$sp: 480px;  // スマホ

@mixin pc {
  @media (max-width: ($pc)) {
    @content;
  }
}
@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}

.box {
  @include pc {
    background-color: red;
  };
  @include tab {
    background-color: blue;
  };
  @include sp {
    background-color: yellow;
  };
}

@import "a";
@import "b";

_a.scss

.classA {
  background-color: red;
}

_b.scss

.classB {
  background-color: blue;
}

common.js

(function() {
  console.log('Hello!!');
}());

package.json

{
  "name": "gulp-pug-test",
  "version": "1.0.0",
  "description": "GulpでPugを実行するためのテスト環境です。",
  "main": "index.js",
  "scripts": {
    "start": "gulp"
  },
  "keywords": [
    "gulp",
    "pug"
  ],
  "author": "テンプレ作成者名",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.26.4",
    "gulp": "^4.0.1",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-data": "^1.3.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.0.9",
    "postcss-flexbugs-fixes": "^4.1.0"
  }
}

試したこと

・gulpのバージョン違いによるものかと考えたので
参考サイトに従い、変更すべきところを変更しました。
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b

・変数名が間違えているのかチェック
・package.jsonのアップデート
・gulpfile.jsのwatch部分の記述を変更
・以下のサイトに従ってパッケージのgulpをアップデートするが
package.jsonではgulp 4.01
コマンドプロンプトでgulp -vをするとなぜか
CLI version 2.1.0
Local version 3.9.1
となってしまう
https://kenyo--c.com/css/1572/

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

gulpのバージョン
CLI version 2.1.0
Local version 3.9.1

node v10.15.3
npm v6.4.1

マルチポスト先

スタックオーバー

ここにより詳細な情報を記載してください。

Comments

[s8_chu]

質問者さんの記述した`package.json`ファイルと、ディレクトリの構成、記述した Pug, SCSS, JavaScript を教えていただけませんか？

[s8_chu]

コメントしていただいたディレクトリ構成を読んだのですが、各 Pug, SCSS, JavaScript ファイルは src ディレクトリ内ではなく、 package.json ファイルと同じ階層にあるのでしょうか？

コメント欄はスペースやタブが削除されてしまうことがあるので、もしスペースが削除されてしまっているのであれば、質問文に追記をしていただけませんか？

[wa_]

失礼しました。
pug,scss,jsはsrcの中に存在しています。
今から質問文に追記していきますので少々お待ちください。

[wa_]

s8_chu様
質問文に追記しましたのでご確認ください。
どうぞよろしくお願い致します。

Answer 1

他で色々と質問を分散させて解決に至りましたので書きます。

解決手順

①node_modulesの再インストール
②タスクの終了を明示させる。gulp-autoprefixer を autoprefixer に変更。その他書き間違いの変更。

gulpfile.js

'use strict';

const gulp = require('gulp');

//pug
const pug = require('gulp-pug');
const fs = require('fs');
const data = require('gulp-data');
const path = require('path');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const browserSync = require('browser-sync');

//css
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const postcss = require('gulp-postcss');
const flexBugsFixes = require('postcss-flexbugs-fixes');
const autoprefixer = require('autoprefixer'); //Sassにベンダープレフィックスをつける
const rename = require('gulp-rename'); //ファイルをリネーム

/**
 * 開発用のディレクトリを指定します。
 */
const src = {
  // 出力対象は`_`で始まっていない`.pug`ファイル。
  'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
  // JSONファイルのディレクトリを変数化。
  'json': 'src/_data/',
  'css': 'src/**/*.css',
  'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'],
  //'styleguideWatch': 'src/**/*.scss',
  'js': 'src/**/*.js',
  'root': 'src/'
};

/**
 * 出力するディレクトリを指定します。
 */
const dest = {
  'root': 'dest/',
  'html': 'dest/'
};

/**
 * `.pug`をコンパイルしてから、destディレクトリに出力します。
 * JSONの読み込み、ルート相対パス、Pugの整形に対応しています。
 */
function html() {
  // JSONファイルの読み込み。
  var locals = {
    'site': JSON.parse(fs.readFileSync(src.json + 'site.json'))
  };
  return gulp.src(src.html)
  // コンパイルエラーを通知します。
  .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
  // 各ページごとの`/`を除いたルート相対パスを取得します。
  .pipe(data(function (file) {
    locals.relativePath = path.relative(file.base, file.path.replace(/.pug$/, '.html'));
      return locals;
  }))
  .pipe(pug({
    // JSONファイルとルート相対パスの情報を渡します。
    locals: locals,
    // Pugファイルのルートディレクトリを指定します。
    // `/_includes/_layout`のようにルート相対パスで指定することができます。
    basedir: 'src',
    // Pugファイルの整形。
    pretty: true
  }))
  .pipe(gulp.dest(dest.html))
  .pipe(browserSync.reload({stream: true}));
}

/**
 * cssファイルをdestディレクトリに出力（コピー）します。
 */
function css() {
  return gulp.src(src.css, {base: src.root})
  .pipe(gulp.dest(dest.root))
  .pipe(browserSync.reload({stream: true}));
}


/**
 * sassファイルをdestディレクトリに同じ階層として出力（コピー）します。
 */
function sass_style() {
  const plugins = [flexBugsFixes(), autoprefixer({ // ベンダープレフィックスの付与
    browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
    cascade: true // 整形する
  })];
  return gulp.src(src.sass_style, {base: src.root})
      .pipe(sassGlob())
      .pipe(sass({
          outputStyle: 'expanded',
        }).on('error', sass.logError)
      )
      .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
      .pipe(postcss(plugins))
      // .pipe(rename(function (path) {
      //   path.dirname += '/css';
      // }))
      .pipe(gulp.dest(dest.root))
      .pipe(browserSync.reload({ stream: true }));
}



/**
 * jsファイルをdestディレクトリに出力（コピー）します。
 */
function js() {
  return gulp.src(src.js, {base: src.root})
  .pipe(gulp.dest(dest.root))
  .pipe(browserSync.reload({stream: true}));
}

/**
 * ローカルサーバーを起動します。
 */
function browser_sync(done) {
  browserSync({
    server: {
      baseDir: dest.root,
      index: 'index.html'
    }
  });
  done();
}

/**
 * PugのコンパイルやCSSとjsの出力、browser-syncのリアルタイムプレビューを実行します。
 */
function watchFiles(done) {
  gulp.watch(src.html).on('change', gulp.series(html));
  gulp.watch(src.sass_style).on('change', gulp.series(sass_style));
  gulp.watch(src.css).on('change', gulp.series(css));
  gulp.watch(src.js).on('change', gulp.series(js));
}

gulp.task('watch', gulp.series(gulp.parallel(html, sass_style, css, js), gulp.series(browser_sync, watchFiles)));


/**
 * 開発に使うタスクです。
 * package.jsonに設定をして、`npm run default`で実行できるようにしています。
 */
gulp.task('default', gulp.task('watch'));

③package.jsonの変更。グローバルのgulpを読み込もうとしたため

{
  "name": "pug-sass-test-kaihen",
  "version": "1.0.0",
  "description": "Gulpを使用したPugの導入テストリポジトリです。",
  "main": "browsersync.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "keywords": [
    "gulp",
    "pug",
    "Sass"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.5.1",
    "browser-sync": "^2.26.5",
    "gulp": "^4.0.1",
    "gulp-data": "^1.3.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.0.9",
    "postcss-flexbugs-fixes": "^4.1.0"
  }
}

Comments

[s8_chu]

マルチポスト先をこの質問の質問文に明示していただけませんか？

[wa_]

質問文に追記しました。
スタックオーバーで質問したことは全てこの質問に係っています。

Answer 2

エラーメッセージ通りで、constとfunctionで同名のsassを使用しているからでは？
（エラーメッセージが画像なのでコピペできないから書きません。自分で探してくださいね＞質問者さん）

...
const sass = require('gulp-sass');
...
function sass() {
...
}
...

Comments

[wa_]

思うところを変更したら、sassに関するエラーは無くなりました。
ただ下記のようなエラーが出たので考えたいと思います。
[11:24:08] Task 'html' is not in your gulpfile
[11:24:08] Please check the documentation for proper gulpfile formatting
もしかして全体的にgulp 4での変更した書き方がよろしくないのでしょうか

[wa_]

ご回答、ありがとうございます。
ご指摘していただいた所を修正したのですが
gulp.parallel is not a function
というエラーが出ました。
調べたところgulpのバージョンが関係しているという記事を見ました。
なので、質問内容に試みたことやエラーに関する追記したので
もし良かったらご確認いただけないでしょうか。
どうぞよろしくお願い致します。