LESS 的更改应该会触发整页重新加载答案

【问题标题】：Change in LESS should trigger a full page reloadLESS 的更改应该会触发整页重新加载
【发布时间】：2014-11-10 15:39:07
【问题描述】：

我有一个 grunt-watch 任务，当它检测到文件更改时会触发 livereload。但是，当我更改 .less 文件时，它不会触发页面重新加载。在那种情况下，它只会使页面重新加载 app.less 来更新样式。这似乎是有意的，但对于我的项目来说，在这种情况下重新加载整个页面会更实际。我可以强制 grunt-watch 始终执行整页重新加载吗？ BR, 丹尼尔

【问题讨论】：

使用files: ['less/**/*.less']
这就是我所做的，并且监视任务被触发了，但是它不是一个完整的页面重新加载，它只会触发更少的注入到网站中重新编译。这不是我想要的。

标签： gruntjs less livereload

【解决方案1】：

您可以使用grunt-touch 触发对您的 html 文件的更改：

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"] );
};

【讨论】：

这看起来很有希望。我会试一试。虽然它看起来有点像黑客。 :-)