[解決済み] これはどういうことかというと TypeError: dest.on は関数ではありません。

質問

私は初心者で、最新のウェブデブのワークフローについてのチュートリアルに沿っています。コンソールに次のようなエラーメッセージが表示されます。 TypeError: dest.on is not a function ここに関連する質問と回答があることは知っています。しかし、私はそれらを理解することはできません。なぜなら、"dest.on"が何に関連していて、何をするのかが分からないからです。 これは、これまでのコードです。

var gulp = require("gulp");
var sass = require("gulp-sass");
var sourcemaps = require("gulp-sourcemaps");
var autoprefixer = require("auto-prefixer");
var imagemin = require("gulp-imagemin");
var browserSync = require("browser-sync").create();

gulp.task("css", function() {
  return gulp
    .src("src/sass/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
    .pipe(
      autoprefixer({
        browsers: ["last 2 versions"]
      })
    )
    .pipe(sourcemaps.write("./maps"))
    .pipe(gulp.dest("dist/css"));
});

このエラーメッセージの意味と、この問題を解決するにはどうしたらよいか、どなたか説明してください。 冗長で申し訳ありませんが、既存の回答には解決策が見つかりませんでした。

編集：:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::． パッケージ.jsonを追加するのが有効かもしれません

{
  "name": "sitepointresponsivewebsite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "auto-prefixer": "^0.4.2",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-imagemin": "^5.0.3",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5"
  }
}

これは完全なターミナルのエラーメッセージです。

Beratungs-MacBook-Pro-2:sitepointResponsiveWebsite Beratung1$ gulp css
[14:04:02] Using gulpfile ~/Desktop/sitepointResponsiveWebsite/gulpfile.js
[14:04:02] Starting 'css'...
[14:04:02] 'css' errored after 12 ms
[14:04:02] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/readable-stream/lib/_stream_readable.js:564:8)
    at /Users/Beratung1/Desktop/sitepointResponsiveWebsite/gulpfile.js:13:6
    at taskWrapper (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:396:14)
    at runBound (domain.js:409:12)
    at asyncRunner (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/async-done/index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

解決方法は？

このようなよくわからないエラーメッセージの場合、通常、スタックトレースが最も役に立ちます。

at DestroyableTransform.Readable.pipe (/Users/Beratung1/Desktop/sitepointResponsiveWebsite/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /Users/Beratung1/Desktop/sitepointResponsiveWebsite/gulpfile.js:13:6

エラーが発生しているのは pipe() メソッドで、readable-stream を作成します。 dest の第1引数の名前です。 pipe() dest.on"が存在しないということは、この関数に渡された何かが、この関数に渡されたことを意味します。 pipe() は実際にはストリームではありません。

2つ目のスタックフレームは13行目を参照しており、これは以下の通りです。 pipe() の呼び出しがあります。

.pipe(
  autoprefixer({
    browsers: ["last 2 versions"]
  })
)

つまり、autoprefixer()の戻り値はストリームではありません。

autoprefixer があります。

var autoprefixer = require("auto-prefixer");

npmでそのモジュールを見てみると https://www.npmjs.com/package/auto-prefixer . 見た目は変ですが、間違いなくストリームAPIではありません。

その リアル というオートプレフィクサーモジュールがあります。 autoprefixer ダッシュはありません。gulp-postcssと一緒に使うには、こちらで説明されているようにします。 https://www.npmjs.com/package/autoprefixer#gulp

var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')

// .. etc ..
  .pipe(postcss([ autoprefixer({
    // .. options ..
  }) ]))