Grunt Live-Reload via Watch答案

【问题标题】：Grunt Live-Reload via WatchGrunt Live-Reload via Watch
【发布时间】：2013-05-09 08:18:28
【问题描述】：

我正在尝试将 grunt 配置为在更改时实时加载 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>

【问题讨论】：

标签： javascript gruntjs livereload

【解决方案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"],
  }
}

【讨论】：

我按照您上面的建议重新配置了手表，但不幸的是，live-reload 仍然没有执行。
您可以执行grunt watch --verbose，它会在控制台重新加载时告诉您。虽然我注意到您使用的是grunt.loadNpmTasks('grunt-contrib')...，但它使用的是旧版本的监视任务，它没有实时重新加载。我建议不使用grunt-contrib 并单独加载每个模块。
“单独加载模块”是什么意思？我的包中有“grunt-contrib-watch”：“~0.6.0”，我尝试使用 load-grunt-tasks 加载，也尝试使用 loadNpmTasks 手动加载，但是当文件更改时，watch 告诉我“任务‘重新加载’不是找到”
@Rayjax 听起来您的 Gruntfile 正在尝试使用 reload 任务。 grunt-contrib-watch 不提供 reload 任务。它只提供一个watch 任务。
没错，我已经删除了 grunt-reload 插件，但在监视任务中留下了“重新加载”的调用。通过删除该调用来修复它，效果很好

【解决方案2】：

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

它开始为我工作。 :)！

谢谢，

【讨论】：