grunt浏览器同步未注入更改

Question

当文件被更新/更改时，我正在尝试让grunt- browser -sync将任何css更改注入到打开的浏览器中。但由于某些原因，我似乎可以让它工作，grunt没有给我任何错误，让我知道它不工作。

我现在使用的是MAMP，因为它是一个基于Wordpress的项目。

这是我的Gruntfile.js：

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
  build: {
    src: '_/js/libs/*.js', //input
    dest: '_/js/functions.min.js' //output
  }
},
sass: {
  dist: {
    options: {
      loadPath: require('node-bourbon').includePaths,
      loadPath: require('node-neat').includePaths,
      style: 'compressed'
    },
    files: {
      'style.css': 'scss/style.scss'
    }
  }
},

autoprefixer: {
dist: {
  files: {
    'style.css': 'style.css'
  }
 }
},
browserSync: {
        dev: {
            bsFiles: {
                src : 'style.css'
            },
            options: {
                watchTask: true
            }
        }
    },

watch: {
  options: {
    livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
  },
 }
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');

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

};

下面是我保存/更新文件时的输出：

Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.

Running "autoprefixer:dist" (autoprefixer) task
File style.css created.

Running "browserSync:dev" (browserSync) task

Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...

但之后我必须物理刷新浏览器才能看到更改。

我不确定我是不是漏掉了什么东西。

Answer 1

grunt-browser-sync的唯一版本是1.9.1，它适用于我的代码。因此，卸载当前版本并

npm install grunt-browser-sync@1.9.1 --save-dev

Answer 2

我遇到了同样的问题，并在这里打开了一个问题

Github grunt-browser-sync repo with issues 58