当链接的.css文件与livereload和Grunt一起更改时,如何强制jade将模板重新呈现为.html?

当链接的.css文件与livereload和Grunt一起更改时,如何强制jade将模板重新呈现为.html?,css,express,gruntjs,pug,livereload,Css,Express,Gruntjs,Pug,Livereload,我正在尝试配置Grunt,以便在链接的.css文件发生更改时,引用.css的jade模板也会出现livereloads。据我所知,我无法编译jade模板,因为该模板正在格式化来自API的响应。因此,除非对.jade文件进行了更改,否则不会再次拉入.css。我可以手动刷新页面以查看样式更改,但我正在尝试将其自动化 现在,如果我更改一个.jade文件,.jade文件会立即在我的浏览器中显示并显示模板的更改。如果我更改了一个.css文件,grunt会检测到它并重新加载.css文件。但是,由于.jade

我正在尝试配置Grunt,以便在链接的.css文件发生更改时,引用.css的jade模板也会出现livereloads。据我所知,我无法编译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']);

};
玉模板:

    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路径放入jade中

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

仅供参考,我已经创建了一个数组,将两条路径放在同一个数组中仍然只会触发更改的特定文件的更新。