Как заставить jade повторно отображать шаблон в .html, когда связанный файл .css изменяется с помощью livereload и Grunt?

Я пытаюсь настроить Grunt так, чтобы при изменении связанного файла .css нефритовый шаблон, который ссылается на .css, также перезагружался. Насколько я знаю, я не могу скомпилировать свои нефритовые шаблоны, потому что рассматриваемый шаблон форматирует ответ от API. Таким образом, если в файле .jade нет изменений, .css больше не загружается. Я могу вручную обновить страницу, чтобы просмотреть изменение стиля, но я пытаюсь автоматизировать это.

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

РЕДАКТИРОВАТЬ: с тех пор я определил, что затронуты ТОЛЬКО файлы Jade, которые включают форматирование данных вызовов API. Файлы Jade, форматирующие статические данные, корректно обновляются с помощью Livereload при изменении файлов .css.

Ниже найдите мой Gruntfile.js и шаблон Jade, который я использую.

module.exports = function(grunt) {

grunt.initConfig({
    concat: {
        dist: {
            src: ['main.js']
        }
    },
    watch: {
        options: {
            livereload:true
        },
        css: {
            files: ['public/css/*.css'],
            options: {
            }
        },
        js: {
            files: ['routes/**/*.js', 'main.js', 'Gruntfile.js'],
            options: {
            }
        },
        jade: {
            files: ['views/**/*.jade'],
            options: {
                spawn: true
            }
        }
    },
    express: {
        dev: {
          options: {
              script: 'main.js'
          }
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.registerTask('server',['express', 'watch']);
grunt.registerTask('default', ['server']);

};

Нефритовый шаблон:

    doctype html
    html(lang="en")
        head
            link(rel='stylesheet', href='http://localhost:9000/css/search.css')
            link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Roboto')

    title= pageTitle

    body

    h1 Here are your results!

    ul.products
        each item, index in items
            li
                a(href=item.viewItemURL)
                    img(src=item.galleryURL)
                    p=item.title
                    -var currentPrice = Number(item.sellingStatus[0].currentPrice[0].__value__);
                    p.price $#{currentPrice.toFixed(2)}

css express pug gruntjs livereload
person wizowor    schedule 01.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте указать пути css в нефрите

watch: {
    ...
    jade: {
        files: ['views/**/*.jade', 'public/css/*.css'],
        options: {
            spawn: true
        }
    }
},
person laggingreflex    schedule 02.02.2015
comment
Так же, как FYI, поскольку я уже работал над созданием массива, помещение обоих путей в один и тот же массив по-прежнему вызывает только обновление конкретного файла, который изменился. - person wizowor; 02.02.2015