синхронизация браузера grunt не вносит изменения

Я пытаюсь заставить 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...

Но тогда мне нужно физически обновить браузер, чтобы увидеть изменения.

Я не уверен, что я что-то упустил в файле grunt или что.


person ultraloveninja    schedule 08.05.2014    source источник
comment
Все выглядит правильно... попробуйте Gruntfile, который включает только browserSync. Если это работает, добавьте часы. Когда это сработает, добавьте sass.   -  person bishop    schedule 08.05.2014
comment
у меня точно такая же проблема и файл gruntfile.js, который очень похож на ваш. Когда я набираю grunt watch, я изменяю, скажем, файл .html, я получаю успешную сборку, но ... браузер не открывается или что-то в этом роде: \ есть идеи?   -  person valerio0999    schedule 24.08.2014


Ответы (2)


Единственная версия grunt-browser-sync, которая у меня работает с этим кодом, — 1.9.1. Итак, удалите текущую версию и

npm install [email protected] --save-dev
person ali    schedule 21.05.2015
comment
Это работает и для меня. Новые версии просто не работают так же. - person JCraine; 23.01.2018

Я столкнулся с той же проблемой и открыл вопрос здесь

репозиторий Github grunt-browser-sync с проблемами 58

person lauterry    schedule 16.05.2014
comment
Одна вещь, которую я заметил, это то, что если я возьму свой текущий файл Grunt, который я вставил выше, и просто запущу grunt, то я замечу, что он будет работать, и выведет скрипт внедрения JS, который мне нужно было добавить в мой проект. Как только я это сделал, это сработало. Если запустить grunt watch не работает. Так что да. Я думаю, я запутался в том, нужны ли мне даже часы с синхронизацией браузера или что-то в этом роде. Это все еще для меня ново. И я, вероятно, перейду на gulp через некоторое время, но в настоящее время для grunt больше разработки, поэтому я немного остановлюсь на grunt. - person ultraloveninja; 19.05.2014
comment
Я сталкивался с похожей проблемой, когда BrowserSync видел, что файл изменился, но не обновлял страницу. В моем случае я переместил тег <HTML> во включаемый файл с именем header.html, поэтому он не смог внедрить необходимый скрипт. После перемещения моего открывающего тега <HTML> в index.html проблема была решена. Думаю, я бы упомянул для всех, кто может оказаться в подобном сценарии. - person Bill Keller; 06.02.2015