4

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?

Anugerah Erlaut
  • 990
  • 13
  • 23

2 Answers2

8

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.

Patrik Bego
  • 4,009
  • 1
  • 26
  • 24
  • It's working for 'build' task but when I run gulp 'serve' task doesn't work. Any idea? – Adrian Rodriguez Mar 18 '16 at 19:18
  • Console log output would be nice... But try to change the port. Server started without a problem for me (out of the box), just that the index was missing wired dependencies. – Patrik Bego Mar 19 '16 at 21:20
  • @PatrikBego After changes you recommended, the error is gone but Bower components are still not linked. The error are simple 404s for all of bower components:GET http://localhost:9000/bower_components/bootstrap/dist/css/bootstrap.css (index):75 GET http://localhost:9000/bower_components/jquery/dist/jquery.js (index):76 GET http://localhost:9000/bower_components/angular/angular.js (index):77 GET http://localhost:9000/bower_components/bootstrap/dist/js/bootstrap.js (index):78 GET http://localhost:9000/bower_components/angular-animate/angular-animate.js ... and it continues! – user1242321 Jun 15 '16 at 08:05
  • 1
    @user1242321 see this issue: https://github.com/yeoman/generator-angular/issues/1299. In there you'll find a Gulpfile that works. – Maria Ines Parnisari Jun 25 '16 at 03:13
1

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));
});
Kidde82
  • 29
  • 1
  • 8