Currently, I am in the process of setting up Grunt to ensure that whenever a linked .css file undergoes a change, the jade template which is linked to the .css file also automatically reloads. However, I am facing challenges with compiling my jade templates due to the fact that the template in question formats a response from an API. Thus, unless there are modifications made to the .jade file, the .css file does not get pulled in again. While I can manually refresh the page to view the style changes, my aim is to automate this process.
As of now, if I make changes to a .jade file, the specific .jade file reloads and I can instantly see the changes in my browser. On the other hand, if I modify a .css file, grunt detects it and reloads the .css file. Nevertheless, since the .jade file has already been converted into .html, the styling does not update accordingly.
EDIT: Upon further investigation, I have discovered that only Jade files which format data from API calls are impacted by this issue. On the contrary, Jade files formatting static data are able to update correctly with Livereload when .css files are changed.
Below you will find my Gruntfile.js configuration and the specific Jade template that I am working with.
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']);
};
The Jade Template:
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)}