Why is the Wiredep error with "dest.on not a function" in my gulp task?

Question

I am trying to use Wiredep in a Gulp task to embed Bower dependencies in my index.html file. The next task (without Wiredep) is working fine.

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')); }); 

Now I tried to add Wiredep to it:

 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')); }); 

Result:

 [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) 

I tried using Wiredep from the command line and it works fine. I am starting Windows using Node v4.2.2.

EDIT If someone is facing the same problem, then a workaround is to change the task:

 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')); }); 

Note that index.html is copied to the dist directory before entering the application.

I'm still wondering why I cannot use threads to bind dependencies.

Answer 1

I myself ran into this problem. This is because of how you import wiredep. You must do the following so that it is passed as a gulp stream:

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

Excluding the .stream part, you can use wiredep as a function outside of the gulp stream.