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