使用grunt-contrib-connect和grunt-contrib-watch实现实时重新加载

Question

我是nodeJS和grunt的新手。在我的项目中，我有一个Gruntfile，并且我想要对该项目中所有html文件进行实时重新加载，这样我就不必一直刷新浏览器以检测新变化。但是，我使用以下代码时遇到了错误：

module.exports = function (grunt)
{
    // Project configuration.
    grunt.initConfig(
    {
        // Task configuration.
        jshint:
        {
            options:
            {
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                unused: true,
                boss: true,
                eqnull: true,
                browser: true,
                globals: {}
            },
            gruntfile:
            {
                src: 'Gruntfile.js'
            },
            lib_test:
            {
                src: ['lib/**/*.js', 'test/**/*.js']
            }
        },
        connect:
        {
            server:
            {
                options:
                {
                    hostname: 'localhost',
                    port: 80,
                    base: 'src',
                    keepalive: true,
                    livereload: true
                }
            }
        },
        watch:
        {
            options:
            {
                livereload:true
            }
        }

    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
    grunt.registerTask('default', ['connect', 'watch']);


};

当我启动“grunt default”时，似乎不会执行任务监视，因为在连接期间保持活动状态。

如果有人可以解释为什么当JSHint检查我的代码时我会遇到这个错误，并提供解决方案，我将不胜感激。

- Wei-jye

Answer 1

你的watch任务没有任何任务或文件。为了让它能够与grunt-contrib-connect一起工作，你需要包括更多内容，而不仅仅是livereload选项，像这样：

watch: {
    options: {
        livereload: true
    },
    taskName: {    // You need a task, can be any string
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

或者，更简单一点的方法是：

watch: {
    taskName: {
        options: { // Live reload is now specific to this task
            livereload: true
        },
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

所有符合此处 glob 模式的文件应该按照您的期望工作。如果您只是为浏览器实时重新加载，请不需要在此处指定 tasks 参数。

另外，如果您要在使用 watch 的同时使用您的 connect 服务器，则应该删除 keepalive 参数，因为它是阻塞任务并可能会防止执行 watch 任务：

connect: {
    server: {
        options: {
            port: 8080,
            base: 'src',
            livereload: true
        }
    }
}

- dmaloney.calu

---

像您的建议一样，去掉keepalive参数后，它对我起作用了。 - soarinblue

Answer 2

你需要在你的 jshint 配置中添加 node:true，可以参考这个例子 .jshintrc。

对于 watch 和 livereload，你需要在 Gruntfile 中指定要监视的文件以及要执行的任务，可以参考这个示例 Gruntfile。

例如像这样：

 watch: {
      coffee: {
        files: ['<%%= config.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}'],
        tasks: ['coffee:dist']
      },
    }

在这个例子中，您可以将一个名为files的glob作为选项指定，每当该文件更改时，相应的任务都会运行。

- user3995789

---

抱歉，我不太明白。你是在说另一个文件（jshint.config），还是在说上面Gruntfile中jshint下的选项？ - Wei-jye

你可以选择其中一个，在你的Gruntfile中已经有了。@Zackery - user3995789

好的，我已经成功让 jshint 运行了，有 2000 多个错误 :P。但这并没有解决实时重新加载的问题。 - Wei-jye

请更新您的问题，@Zackery，说明您的实时重新加载问题。 - user3995789

当我更新我的HTML文件时，如果不刷新浏览器，我无法看到更改。我想要实现的是，每当我编辑并保存HTML文件后，我都应该能够在浏览器（本地主机）中看到我所做的更改，而无需在浏览器上进行任何操作。 - Wei-jye