当链接的.css文件与livereload和Grunt一起更改时,如何强制jade将模板重新呈现为.html?
我正在尝试配置Grunt,以便在链接的.css文件发生更改时,引用.css的jade模板也会出现livereloads。据我所知,我无法编译jade模板,因为该模板正在格式化来自API的响应。因此,除非对.jade文件进行了更改,否则不会再次拉入.css。我可以手动刷新页面以查看样式更改,但我正在尝试将其自动化 现在,如果我更改一个.jade文件,.jade文件会立即在我的浏览器中显示并显示模板的更改。如果我更改了一个.css文件,grunt会检测到它并重新加载.css文件。但是,由于.jade文件已呈现为.html,因此样式不会更新 编辑:我已经确定,只有包含格式化API调用数据的Jade文件才会受到影响。正在格式化静态数据的Jade文件在更改.css文件时会正确使用Livereload更新 下面找到我的Gruntfile.js和我正在使用的Jade模板当链接的.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
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
}
}
},
仅供参考,我已经创建了一个数组,将两条路径放在同一个数组中仍然只会触发更改的特定文件的更新。