confusion with dir for bower components #1345

Activity

1. joelcolucci commented on Jul 22, 2016

   

   joelcolucci

   on Jul 22, 2016

   Last edited by joelcolucci

   More actions

   @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 + '/'));
   });

   👍React with 👍3Reacted by Ramón Mata, José Vicente Lara Cuadrado and burnerx47
2. ramonmata commented on Jul 26, 2016

   

   ramonmata

   on Jul 26, 2016

   More actions

   Solution works for me 👍

   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
3. antonioj-mattos commented on Jul 29, 2016

   

   antonioj-mattos

   on Jul 29, 2016

   More actions

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