为什么 Wiredep 在我的 gulp 任务中出现“dest.on 不是函数”错误？答案

【问题标题】：Why is Wiredep erroring out with "dest.on is not a function" in my gulp task?为什么 Wiredep 在我的 gulp 任务中出现“dest.on 不是函数”错误？
【发布时间】：2016-02-14 19:27:18
【问题描述】：

我试图在 Gulp 任务中使用 Wiredep 在我的 index.html 文件中注入 Bower 依赖项。以下任务（没有Wiredep）运行良好。

gulp.task('build', ['copy', 'assets'], function(){

    return gulp.src('app/index.html')
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

现在我尝试将Wiredep添加到它：

var wiredep = require('wiredep');

gulp.task('build', ['copy', 'assets'], function(){

    return gulp.src('app/index.html')
    .pipe(wiredep())
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

结果：

[09:45:11] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (C:\GIT\myApp\myApp-front\node_module
s\gulp-debug\node_modules\through2\node_modules\readable-stream\lib\_stream_read
able.js:533:8)
    at Gulp.<anonymous> (C:\GIT\myApp\myApp-front\gulpfile.js:38:6)
    at module.exports (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\
orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\index.js:214:10)
    at C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\ind
ex.js:279:18
    at finish (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestr
ator\lib\runTask.js:21:8)
    at C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\lib
\runTask.js:52:4
    at f (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\
node_modules\end-of-stream\node_modules\once\once.js:17:25)
    at DestroyableTransform.onend (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\node_modules\end-of-stream\index.js:31:18)

我直接尝试了using Wiredep from the command line，它运行良好。我在 Windows 上运行，使用 Node v4.2.2。

编辑如果有人遇到同样的问题，那么解决方法是将任务更改为：

gulp.task('build', ['copy', 'assets'], function(){
    wiredep({src:'dist/index.html'});

    return gulp.src('dist/index.html')
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

注意，index.html 是在 beeing 注入之前复制到 dist 目录的。

我仍然想知道为什么我不能使用流来连接依赖项。

【问题讨论】：

标签： gulp bower wiredep

【解决方案1】：

我自己也遇到了这个问题。这是因为您导入wiredep 的方式。您需要执行以下操作才能将其作为 gulp 流的一部分进行管道传输：

var wiredep = require('wiredep').stream;

排除.stream 部分允许您将wiredep 用作gulp 流之外的函数。

【讨论】：