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

Question

I just started using Yeoman to create a new Angular application. I followed the generator-angular installation guide , but decided to use gulp instead of grunt for the task runner.

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

I tried to run the build with gulpand got an error:TypeError: $.useref.restore is not a function

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

Is there any bug fix above?

I noticed that Yoman uses grunts and that gulp is experimental, so I assume the above errors are expected. Should I post it as a problem on the GitHub generator page?

Answer 1

There are several issues.

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

The second problem is that bower libs are not in directory: yeoman.app + '/bower_components', but in directory: 'bower_components',

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

In 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, gulpand gulp serveor add the wiredep task to the assembly.

Hope this clarifies this.

Answer 2

. , gulp task: client: build. , . , , , . , Github ( : https://github.com/yeoman/generator-angular/issues/1199), , - .

, , gulp .

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