这是什么意思：TypeError: dest.on 不是一个函数。

Question

我是一名新手，正在学习现代webdev工作流程的教程。在我的控制台中出现了以下错误信息：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"));
});

有人能解释一下这个错误信息的含义以及我如何解决这个问题吗？ 很抱歉重复了，但在现有的答案中没有找到解决方案。

Edit:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 也许添加package.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)

- S.H

---

你的代码中没有任何地方使用 dest.on... - CertainPerformance

如果错误提到的代码在你编写的代码中不存在，那么很可能意味着你传递了一些错误的值给某个函数。例如，你调用的某个函数期望一个带有 on 属性的对象，但你却传递了一个数字/字符串等其他类型的值。 - Patrick Evans

你能在你的问题中添加完整的堆栈跟踪吗？ - jro

搜索您的所有代码块以查找 des，并检查是否将任何事件或插件绑定到它。基本上这是不可用的。 - RohitS

只是为了澄清：在Sass部分有一个'on'，在最后一行有一个'dest'，你可以尝试暂时删除其中一个来缩小范围吗？ - jonathan Heindl

Answer 1

对于这种陌生的错误消息，堆栈跟踪通常是最有帮助的。

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

错误发生在readable-stream的pipe()方法中。 dest是pipe()的第一个参数的名称； “dest.on”不存在意味着你传递给pipe()的某些内容实际上不是流。第二个堆栈帧指的是第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模块叫做autoprefixer，没有破折号。您可以像这里描述的那样与gulp-postcss一起使用：https://www.npmjs.com/package/autoprefixer#gulp。

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

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

- goto-bus-stop