confusion with dir for bower components

[FelicePollano]

from other thread, the bower_components folder has moved outside the app folder. Unfortunately this break the gulp 'bower' task: by the way the task is not called correctly by the principal generator, it search for a gulp task called 'wiredep' instead of 'bower' ( as I understood..). In any case is not clear how to have the app properly scaffolded.

[joelcolucci]

@felicepollano I ran into the same problem.

In comparing the grunt build to the gulp, I've come up with a working solution to get the app serving with gulp serve without having to move bower_components into the app.

Note: I've not yet tested the test, dist, prod tasks with the below changes.

Update 1: Change the start:server task to the following

gulp.task('start:server', function() {
  $.connect.server({
    root: [yeoman.app, '.tmp'],
    livereload: true,
    // Change this to '0.0.0.0' to access the server from outside.
    port: 9000,
    middleware: function (connect) {
      return [
        connect().use(
          '/bower_components',
          connect.static('./bower_components')
        )]
    }
  });
});

Update 2: Change the server task to the following

gulp.task('serve', function (cb) {
  runSequence('clean:tmp',
    ['lint:scripts'],
    ['start:client'],
    ['bower'],
    'watch', cb);
});

Update 3: Change the bower task to the following

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

[ramonmata]

Solution works for me :+1:

When running dist it did not copy the fonts from Bootstrap one of my choosen options when generaton ran, so I did a small hack which sure needs to be adapted to other needs

Copy bootstrap fonts to "dist" folder

gulp.task('copy:fonts', function () {
  return gulp.src('bower_components/bootstrap/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

Other thing, index.html in dist gets a number prefixed to the name something like index-b9577afaf1.html

I was unable to find where it happens, need to read more but but for now I can live with that

:) regards

[antonioj-mattos]

@ramonmata

I solved the index.html revision issue with the following modifications

@@ -1,6 +1,7 @@
 gulp.task('client:build', ['html', 'styles'], function () {
   var jsFilter = $.filter('**/*.js');
   var cssFilter = $.filter('**/*.css');
+  var indexHtmlFilter = $.filter(['**/*', '!**/index.html'], { restore: true });

   return gulp.src(paths.views.main)
     .pipe($.useref({searchPath: [yeoman.app, '.tmp']}))
@@ -11,7 +12,9 @@ gulp.task('client:build', ['html', 'styles'], function () {
     .pipe(cssFilter)
     .pipe($.minifyCss({cache: true}))
     .pipe(cssFilter.restore())
+    .pipe(indexHtmlFilter)
     .pipe($.rev())
+    .pipe(indexHtmlFilter.restore())
     .pipe($.revReplace())
     .pipe(gulp.dest(yeoman.dist));
 });