Yeoman generator-angular : 'task wiredep'

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.

Answer 2

I ran in to the same problem. I solved it by do the changes below to the gulp task 'client:build'. HOWEVER, solving this will just get you to the next problem. Watch doesn't work, live reload doesn't work and then I had no more time trying to find more issues. But I see your bug reported on Github (Linking for reference: https://github.com/yeoman/generator-angular/issues/1199) so lets hope someone can fix it.

Also, as you said, Gulp is experimental in this generator.

gulp.task('client:build', ['html', 'styles'], function() {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');

var assets = $.useref.assets({
    searchPath: [yeoman.app, '.tmp']
});

return gulp.src(paths.views.main)
    .pipe(assets)
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    .pipe($.uglify())
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.minifyCss({
      cache: true
    }))
    .pipe(cssFilter.restore())
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.revReplace())
    .pipe($.useref())
    .pipe(gulp.dest(yeoman.dist));
});