通过观看Grunt Live-Reload

Question

我正在尝试将grunt配置为livereload js和less/css文件的更改.虽然grunt正确地"监视"并执行分配的任务,但它不会对文件进行实时重载.下面是我的配置,有没有人看到有什么问题？

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    jshint: {
        files: ["Gruntfile.js", "src/javascripts/**/*.js"],
        options: {
            globals: {
                jQuery: true,
                console: true,
                module: true
            }
        }
    },
    concat: {
        options: {
            stripBanners: true,
            banner: "/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today('yyyy-mm-dd') %> */\n",
            separator: "\n"
        },
        js: {
            src: ["src/javascripts/main.js", "src/javascripts/**/*.js"],
            dest: "../app/assets/javascripts/application.js"
        },
        less: {
            src: ["src/stylesheets/**/*.less"],
            dest: "../app/assets/stylesheets/application.less"
        }
    },
    watch: {
        js: {
            files: ["<%= jshint.files %>"],
            tasks: ["jshint", "concat:js"],
            options: {
                livereload: true
            }
        },
        less: {
            files: ["<%= concat.less.src %>"],
            tasks: ["concat:less"],
            options: {
                livereload: true
            }
        }
    }
});

grunt.loadNpmTasks("grunt-contrib");

grunt.registerTask("default", ["jshint", "concat"]);
};

注意:我在html head标记中包含以下脚本标记.

<script src="http://localhost:35729/livereload.js"></script>

Answer 1

您的配置尝试在同一端口上启动2个实时重新加载服务器.如果您希望在所有监视目标上触发1个实时重装服务器,则只需在任务级别添加1个livereload选项:

watch: {
  options: {
    livereload: true
  },
  js: {
    files: ["<%= jshint.files %>"],
    tasks: ["jshint", "concat:js"],
  },
  less: {
    files: ["<%= concat.less.src %>"],
    tasks: ["concat:less"],
  }
}