javascript - Grunt Live-Reload via Watch

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 头标签中包含了以下脚本标签。

<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"],
  }
}

Answer 2

我错过了脚本标签，然后添加了这个

它开始为我工作。:)！

谢谢，