Grunt通过Watch实现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>

- Ari

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

- Kyle Robinson Young

---

我按照你上面的建议重新配置了watch，但不幸的是，实时重载仍然没有执行。 - Ari

你可以执行 grunt watch --verbose 命令，它会在控制台中告诉你何时重新加载。虽然我注意到你正在使用 grunt.loadNpmTasks('grunt-contrib')...但这使用的是较旧版本的watch任务，没有实时重载功能。我建议不要使用 grunt-contrib 并逐个加载每个模块。 - Kyle Robinson Young

“逐个加载模块”是什么意思？我在我的包中有“grunt-contrib-watch”:“〜0.6.0”，我尝试使用load-grunt-tasks和loadNpmTasks进行加载，但当文件更改时，watch告诉我“找不到任务'reload'”。 - Rayjax

@Rayjax，似乎你的 Gruntfile 想要使用“reload”任务。grunt-contrib-watch 不提供“reload”任务，它只提供“watch”任务。 - Kyle Robinson Young

是的，我已经移除了grunt-reload插件，但是在watch任务中留下了一个"reload"调用。通过移除该调用来修复它，现在可以正常工作了。 - Rayjax

Answer 2

我之前缺少了脚本标签，添加后它开始正常工作了。 :)!

谢谢，

- Shobhit