Change in LESS should trigger a full page reload

Question

I have a grunt-watch task that triggers livereload, when it detects changes to files. However it does not trigger a page reload when I change .less files. On that occasion it only makes the page reload the app.less which updates the styling. This seems to be intended, but for my project it would be more practical to also have a full page reload on that occasion. Can I force grunt-watch to always perform a full page reload? BR, Daniel

Answer 1

You can use grunt-touch to trigger a change on your html file:

module.exports = function(grunt) {
grunt.initConfig({
   less: {
                 development: {
                     files: {"index.css": "test.less"}
                 }
  },
  touch: {
    options: {
      force: true,
      mtime: true
    },
    src: ['index.html'],
  },
  watch: {
    less: {
      files: ['*.less'],
      tasks: ["less","touch"],
    },
    livereload: {
      options: { livereload: true },
      files: ['index.html'],
    },
  },
}
);
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-touch');
grunt.registerTask( 'default', ["less","watch"] );
};