Yeoman generator-angular : 'task wiredep' is not in gulpfile & $.useref.restore is not a function

Question

I've just started using Yeoman to scaffold a new Angular app. I followed the installation guide at generator-angular but chose to use gulp instead of grunt for the task runner.

After installation I received error : task 'wiredep' is not in you gulpfile.

I tried running the build using gulp and received error : TypeError: $.useref.restore is not a function

If I run gulp serve, the resulting page does not wire dependencies.

Is there a fix to the errors above?

I noticed that Yeoman uses grunt, and that gulp is experimental, so I guess the above errors are expected. Should I post it as an issue at the generator's GitHub page?

Answer 1

There are few issues in there.

1st issue yeoman is referring to gulp wiredep not gulp bower: rename gulp.task('bower', function ()to { gulp.task('wiredep', function () {

2nd issue is that bower libs are not in the directory: yeoman.app + '/bower_components', but in directory: 'bower_components',

3rd issue .pipe(gulp.dest(yeoman.app + '/views'));is not in the views folder but the .pipe(gulp.dest(yeoman.app ));

So long story short, replace gulp.task('bower', function ...with:

gulp.task('wiredep', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
  directory: 'bower_components',
  ignorePath: '..'
}))
.pipe(gulp.dest(yeoman.app ));
});

Delete the dist folder, run gulp wiredep, gulp and gulp serve or add wiredep task to the build one.

Hope this clarifies it.