Grunt: browserSync kicks in before Autoprefixer finishes?

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Watch
    watch: {
      options: {
        cwd: 'httpdocs/'
      },
      css: {
        files: ['src/scss/**/**/*.scss'],
        tasks: ['sass', 'autoprefixer'],
      },
      uglify: {
        files: ['src/js/**/*.js','!**/*.min.js'],
        tasks: ['uglify'],
      },
      concat: {
        files: ['src/js/**/*.js'],
        tasks: ['concat'],
      }
    },

    // AUTOPREFIXER
    autoprefixer: {
      options: {
        // Task-specific options go here.
        // browsers - https://github.com/ai/autoprefixer#browsers
        browsers: ['> 5%', 'last 2 version', 'ie 9']
      },
      // prefix all files
      no_dest_multiple: {
        src: 'httpdocs/static/css/*.css'
      }
    },

    // BROWSER SYNC
    // https://www.npmjs.org/package/grunt-browser-sync
    browserSync: {
        dev: {
            bsFiles: {
                src : [
                  'httpdocs/static/css/*.css',
                  'httpdocs/static/js/**/*.js',
                  'httpdocs/**/*.html'
                ]
            },
            options: {
                watchTask: true,
                server: {
                    baseDir: "httpdocs/"
                }
            }
        }
    },

    // UGLIFY
    uglify: {
      build: {
        // src: ['src/js/**/*.js'],
        // dest: 'src/js/<%= pkg.name %>.min.js'
        // We're being quite explicit
        files: {
          'httpdocs/src/js/dh-tabs.plugin.min.js': ['httpdocs/src/js/dh-tabs.plugin.js'],
          'httpdocs/src/js/<%= pkg.name %>.min.js': ['httpdocs/src/js/<%= pkg.name %>.js'],
        }
      }
    },

    // CONCAT JS
    concat: {
      options: {
        separator: ';',
        banner: '/*! \nJS for <%= pkg.name %> - v<%= pkg.version %>\nAuthor: <%= pkg.author %>\nModified: <%= grunt.template.today("yyyy-mm-dd") %>\n */\n',
      },
      dist: {
        // src: ['src/**/*.js'],
        // dest: 'static/js/all.min.js'
        // We're explicit in what files/order we concat...
        src: ['httpdocs/src/js/dh-tabs.plugin.min.js','httpdocs/src/js/<%= pkg.name %>.min.js'],
        dest: 'httpdocs/static/js/app.min.js'
      }
    },

    // SASS
    sass: {
      dist: {
        options: {
          style: 'compressed',
          banner: '/*!\n@project: <%= pkg.name %> by <%= pkg.author %>\n@modified: <%= grunt.template.today("yyyy-mm-dd") %>\n*/\n'
        },
        files: {
          'httpdocs/static/css/style.min.css':'httpdocs/src/scss/style.scss'
        }
      }
    }

  });

  // Load the plugin that provides the "uglify" task.
  // grunt.loadNpmTasks('grunt-XXXX');
  require('load-grunt-tasks')(grunt);

  // Default task(s).
  grunt.registerTask('default', ['browserSync', 'watch']);

};

So, the issue is that browserSync seems to kick in before Autoprefixer is finished. See https://gist.github.com/davidhund/9897649

I've looked at https://github.com/shakyShane/grunt-browser-sync/blob/master/Gruntfile.js and all the options but I can't seem to find the best setup....

I've been playing around & I feel your pain! Until I have a better solution, the following gist shows how you can use BrowserSync via the API within grunt.

It's really simple, actually runs faster & offers greater control.

See what you think.

https://gist.github.com/anonymous/9942507

Thanks so much for personally looking into this @shakyShane. Much appreciated. I'll look into the solution (gist) you posted.

As per your Twitter comment I'll need spawn:false in my watch task...