[Edited] Getting Multiple instances opened

[neo-art]

Hi,

Trying to get browser-sync working with yeoman-webapp
but having some issues. Hope someone can assist with this:

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000
>> No "browserSync" targets found.
Warning: Task "browserSync" failed. Use --force to continue.
Aborted due to warnings.

This is what I have in my the Gruntfile.js (just part of the gruntfile):

    watch: {
      bower: {
        files: ['bower.json'],
        tasks: ['wiredep']
      },
      js: {
        files: ['<%= config.app %>/scripts/{,*/}*.js'],
        tasks: ['jshint'],
        options: {
          livereload: true
        }
      },
      jstest: {
        files: ['test/spec/{,*/}*.js'],
        tasks: ['test:watch']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      styles: {
        files: [
          '<%= config.app %>/sass/{,*/}*.scss',
               ],
        tasks: ['sass', 'newer:copy:styles', 'autoprefixer']
      },
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '<%= config.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '<%= config.app %>/img/{,*/}*'
        ]
      },

          browserSync: {
            default_options: {
                bsFiles: {
                    src: [
            '<%= config.dist %>/**/*.html',
            '.tmp/styles/{,*/}*.css',
            '{.tmp,<%= config.dist %>}/scripts/{,*/}*.js',
            '<%= config.dist %>/img/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
                    ]
                },
                options: {
                    watchTask: true,
                    server: {
                        baseDir: "./<%= config.dist %>"
                    }
                }
            }
        }
    },

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect().use('/bower_components', connect.static('./bower_components')),
              connect.static(config.app)
            ];
          }
        }
      },
      test: {
        options: {
          open: false,
          port: 9001,
          middleware: function(connect) {
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use('/bower_components', connect.static('./bower_components')),
              connect.static(config.app)
            ];
          }
        }
      },
      dist: {
        options: {
          base: '<%= config.dist %>',
          livereload: false
        }
      }
    },

and the task:

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'browserSync',
      'watch'
    ]);

When I run grunt serve new window opens at localhost:9000
but it can't load.

Will appreciate any hint what can be the issue.

[neo-art]

Changed the code to this one below and looks like the error message disappeared but ...
now two windows open.
One at localhost:9000 and the second one at localhost:3000 (no styles working in this one!).

      browserSync: {
        files: {
          src : [
            '<%= config.dist %>/**/*.html',
            '.tmp/styles/{,*/}*.css',
            '{.tmp,<%= config.dist %>}/scripts/{,*/}*.js',
            '<%= config.dist %>/img/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
          ],
        },
        options: {
          watchTask: true,
          ghostMode: {
            scroll: true,
            links: true,
            forms: true
          },
          server: {
            baseDir: './<%= config.dist %>'
          }
        },
      },

[neo-art]

Looks like removing the server part

          server: {
            baseDir: './<%= config.dist %>'
          }

solves the issue with the second window but now it seems that browserSync stopped working at all.

Last lines from the terminal (grunt serve):

Running "connect:livereload" (connect) task
Started connect web server on http://0.0.0.0:9000

Running "browserSync:bsFiles" (browserSync) task

Running "watch" task
Waiting...
[BS] Copy the following snippet into your website, just before the closing </body> tag
<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.7.0.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
[BS] Watching files...

[neo-art]

Well ... changed some paths, enabled the browserSync server block again and there is some progress with it but two issues still remain:

1. I still have 2 windows opened (localhost:9000 and port 3000 for the browserSync);
2. It doesn't seem the changes to the files to be injected at all at localhost:3000 (browserSync).

Any idea how to fix it?

[brunowego]

Need help yet @neo-art ?

[WinfieldHill]

I just switched to a custom task to start 2 instances HTTP/HTTPS. I'd really like to do this via the config object but this -> #109 works well and it's small.