title: grunt-browser-sync madness: opening multiple instances of the browser over and over again
body: <p>I'm close to making <code>grunt-browser-sync</code> work, but still not quite there yet.</p>
  
  <p>I came up with this Gruntfile:</p>
  
  <pre><code>module.exports = function(grunt) {    
      grunt.initConfig({
          pkg : grunt.file.readJSON('package.json'),
          concat : {
              dist : {
                  src : ['js/libs/*.js', 'js/custom/*.js'],
                  dest : 'js/build/production.js',
              }
          },
          uglify : {
              dist : {
                  src : 'js/build/production.js',
                  dest : 'js/build/production.min.js'
              }
          },
          sass : {
              dist : {
                  options : {
                      style : 'compressed',
                      compass : 'true',
                  },
                  files : {
                      'css/main.css' : 'sass/main.scss'
                  }
              }
          },
          autoprefixer : {
              options : {
                  browsers : ['&gt; 5%', 'last 2 version', 'ie 8', 'ie 9']
              },
              dist : {
                  files : {
                      'css/main.css' : 'css/main.css'
                  }
              }
          },
          watch : {
              options : {
                  livereload : true
  
              },
              content : {
                  files : '*.html',
                  tasks : ['browserSync']
  
              },
              scripts : {
                  files : ['js/libs/*.js', 'js/custom/*.js'],
                  tasks : ['concat', 'uglify', 'browserSync'],
                  options : {
                      spawn : false,
                  },
              },
              css : {
                  files : ['sass/**/*.scss'],
                  tasks : ['sass', 'autoprefixer', 'browserSync'],
                  options : {
                      spawn : false,
                  }
              }
          },
          browserSync : {
              files : {
                  src : ['css/*.css', 'images/*.*', 'js/build/production.min.js', '*.html'],
              },
              options : {     
                  server: {
                      baseDir: "./",
                  },  
                  watchTask : true
              }
          }
      });
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-browser-sync');
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-autoprefixer');
      grunt.loadNpmTasks('grunt-newer');
      grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
  };
  </code></pre>
  
  <p>What I want is the following:</p>
  
  <ol>
  <li>Type <code>grunt watch</code> on the terminal and automatically have my <code>index.html</code> opened in a static server page on my browser.</li>
  <li>The page to live reload when CSS, JS, or images change.</li>
  </ol>
  
  <p>What happens with my configuration is the following:</p>
  
  <ol>
  <li>A new browser window is opened only when I save a file</li>
  <li>Every time I save something, multiple browsers window open and the <code>localhost</code> number keeps changing rendering the plugin totally useless</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/cQBMf.png" alt="The output from the Grunt watch task"></p>
  
  <p>I'm aware i've registered <code>tasks : ['browserSync']</code> in every possible place on the file, but that's the only way browser-sync does <em>something</em>. I expected this to be enough:</p>
  
  <p><code>grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);</code></p>
  
  <p>But I've no luck with that. browser-sync triggers but no static server is opened.</p>