Грунт часы: LiveReload перезагружается 1 шаг позади ...

Question

вот мой gruntfile:

module.exports = function(grunt) { 

    // Project configuration. 
    grunt.initConfig({ 
     hologram: { 
      generate: { 
       options: { 
        config: 'config.yml' 
       } 
      } 
     }, 
     libsass: { 
      files: { 
       src: 'src/scss/style.scss', 
       dest: 'templates/static/css/style.css' 
      } 
     }, 
     connect: { 
      server: { 
       options: { 
        port: 8000, 
        hostname: 'localhost', 
        base: 'docs/', 
        livereload: 35729 
       } 
      } 
     }, 
     watch: { 
      scss: { 
       files: ['src/scss/**/*.scss', 'templates/static/css/*.css'], 
       tasks: ['libsass','hologram'], 
       options: { 
        livereload: true 
       } 
      } 
     } 
    }); 

    // Load plugins. 
    grunt.loadNpmTasks('grunt-libsass'); 
    grunt.loadNpmTasks('grunt-hologram'); 
    grunt.loadNpmTasks('grunt-contrib-connect'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 

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

}; 

А вот мой файл пакета:

{ 
    "name": "...", 
    "version": "1.0.0", 
    "description": "...", 
    "dependencies": { 
    "grunt": "^0.4.5" 
    }, 
    "devDependencies": { 
    "connect-livereload": "^0.5.2", 
    "grunt": "^0.4.5", 
    "grunt-contrib-connect": "^0.9.0", 
    "grunt-contrib-watch": "^0.6.1", 
    "grunt-hologram": "0.0.4", 
    "grunt-libsass": "^0.2.0" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "..." 
    }, 
    "author": "Yann Bettremieux", 
    "homepage": "..." 
} 

Все, кажется, работает нормально. Когда я перехожу к http://localhost:8000/, я вижу свой сайт, и когда я сохраняю свои просмотренные файлы, перезагружается страница и т. Д. Но фактически не перезагружает предыдущие изменения. Смысл, первый раз, когда я редактирую файл SCSS, чтобы сказать color: blue, я вижу в инспекторе, что загружаются файлы с CSS-файлами CSS, но на странице нет изменений. Если я изменю CSS на color: red, перезагрузите страницу, но покажу все в синем ... Если я изменю его на зеленый, он перезагрузится и покажет мне все в красном и т. Д. И т. Д.

Я попытался использовать хром-расширение для увеличения длины пера но это ничего не изменило. Я попробовал grunt-sass вместо libsass. Такое же поведение.

Не знаете, что еще можно попытаться решить эту проблему. Любой указатель в правильном направлении очень ценится!

Answer 1

Livereload Readme уже решает проблему. См live-reload-with-preprocessors:

Каждый раз смотрел файл редактируется с опцией LiveReload включена, файл будет отправлен на сервер живого перегрузочной. Некоторые отредактированные файлы, которые вы могут пожелать отправить на сервер прямой перезагрузки, например, при предварительной обработке (sass, less, coffeescript и т. Д.). Поскольку любой файл, не распознанный , перезагрузит всю страницу, а не только javascript css или .

Решение заключается в том, чтобы указывать цель поиска в пелену для целевых файлов.

Вы должны включить функцию загрузки только для файлов css.

watch: { 
    scss: { 
     files: ['src/scss/**/*.scss'], 
     tasks: ['libsass','hologram'] 
    }, 
    css: { 
     files: ['templates/static/css/*.css'], 
     options: { 
      livereload: true 
     } 
    } 
} 

Answer 2

Очень похоже на то, что случилось со мной, и хотя я еще не нашел решение, я думаю, что проблема может быть в настройках развертывания. Мои исходные файлы хранятся локально, и когда любые изменения обнаружены (например, ручное сохранение или перезапись препроцессором), они автоматически загружаются на сервер развертывания моей IDE.

Проблема заключается в том, что перезагрузка запускается до завершения загрузки загрузки и, таким образом, перезагружается файл css не является актуальным. Но в следующий раз перезагрузка произойдет, этот файл используется вместо фактического измененного, но еще не загруженного файла css.

Я предполагаю, что если бы существовала опция для задержки в работе пера или что-то в этом роде, это могло бы решить проблему.

Если это не ваш случай или вы уже решили свою проблему, я надеюсь, что это может сэкономить время отладки для всех, кто сталкивается с той же проблемой.

EDIT: Это предложение, как добавить задержку LiveReload редактирования livereload.js https://github.com/gruntjs/grunt-contrib-watch/issues/175#issuecomment-120000485