Grunt watch: livereload перезагружается на 1 шаг позади…

вот мой 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 livereload загружены, но на странице нет никаких изменений. Если я изменю CSS на color: red, страница перезагрузится, но покажет все синим… Если я изменю его на зеленый, он перезагрузится и покажет мне все красным и т. д. и т. д.

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

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


javascript gruntjs livereload grunt-contrib-watch
person Yann    schedule 22.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

Вы должны включить livereload только для файлов css.

watch: {
    scss: {
        files: ['src/scss/**/*.scss'],
        tasks: ['libsass','hologram']
    },
    css: {
        files: ['templates/static/css/*.css'],
        options: {
          livereload: true
        }
    }
}
person Dmitry Evseev    schedule 22.12.2014
comment
Спасибо… К сожалению, иногда это работает так, как ожидалось, а иногда работает так, как я описал ранее, даже с вашим кодом. Я не могу надежно воссоздать поведение последовательно. Когда я запускаю задачи с grunt, он никогда не работает при первом сохранении файла SCSS, но он работает после 3-6 сохранений, и если / когда он начинает работать, то все хорошо, пока я не перестану смотреть grunt. - person Yann; 24.12.2014
comment
Вы уверены, что сделали именно так? Я использовал этот подход без проблем. Конфигурация может немного отличаться для вас, но сама идея состоит в том, чтобы прослушивать изменения в результирующих css-файлах. - person Dmitry Evseev; 24.12.2014
comment
Я в значительной степени скопировал + вставил ваш ответ (только изменил второй ключ scss на css). Все еще несколько загадочно… НО мне удалось получить стабильное поведение с вашей настройкой: в первый раз, когда я вношу изменения и сохраняю, они не работают. Но если я сохраняю первое изменение два раза подряд (сохраняю снова, не внося никаких изменений) в начале, то оно ведет себя как надо для всех последующих изменений. Так что с настройкой все еще что-то не так, но тем временем ее можно использовать… Спасибо! - person Yann; 24.12.2014
comment
Стреляйте, почти готово, но все еще не очень полезно. И еще вопрос: вы уверены, что местоположение templates/static/css/*.css охватывает все файлы css, сгенерированные из scss? - person Dmitry Evseev; 25.12.2014
comment
Ага. Я объединяю все в один файл CSS. Это часть изменений, которые я внес, чтобы получить текущее улучшенное поведение. Думаю, я наткнулся на не столь очевидный пограничный случай… Я обновлю здесь, если выясню это. Спасибо за вашу помощь! - person Yann; 28.12.2014