当链接的.css文件使用livereload和Grunt进行更改时，如何强制jade将模板重新渲染到.html？

Question

我正在尝试配置Grunt，以便每当链接的.css文件发生更改时，引用.css的jade模板也会加载。据我所知，我不能编译我的jade模板，因为有问题的模板正在格式化来自API的响应。因此，除非对.jade文件进行了更改，否则不会再次拉入.css。我可以手动刷新页面以查看样式更改，但我正在尝试将其自动化。

现在，如果我更改了一个.jade文件，有问题的.jade文件就会加载，我可以立即在浏览器中看到模板的更改。如果我更改了.css文件，grunt会检测到它并重新加载.css文件。但是，由于.jade文件已呈现到.html中，因此样式不会更新。

编辑:我已经确定只有包含格式化API调用数据的Jade文件才会受到影响。对静态数据进行格式化的Jade文件在更改.css文件时会使用Livereload正确更新。

下面找到我的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']);

};

Jade模板：

    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)}

Answer 1

尝试将css路径放在jade中

watch: {
    ...
    jade: {
        files: ['views/**/*.jade', 'public/css/*.css'],
        options: {
            spawn: true
        }
    }
},