livereload的配置Gruntfile.js

Question

我使用Laravel作为我的后端框架，当一些文件发生修改时，我希望有实时的重新加载。我仍然没有成功地配置Gruntfile.js使其正常工作。

我想，我应该需要两个插件，grunt-contrib watch和grunt-contrib connect，我已经将Grutnfile.js配置如下。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {
            options: {
                livereload: true
            },
            page: {
                files: ['*.php', '*.html'],
                tasks: ['connect']
            }
        },

        connect: {
            options: {
                port: 8000,
                protocol: 'http',
                hostname: '*',
                livereload: true
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('do-server', ['watch']);
    grunt.registerTask('do-connect', ['connect']);
};

请帮我把事情做好，当事情做好了，我只需要以grunt的身份运行do-connect，然后grunt就会为我启动浏览器，或者我必须手动打开浏览器和浏览器到指定的端口？

谢谢。

Answer 1

connect是一种静态文件服务器。它不解析和服务PHP文件；只服务静态文件。在为这些文件提供服务时，您可以添加中间件来转换这些文件，但如果使用PHP，则不太可能需要这些中间件。

您可能会使用nginx或apache作为您的服务器。PHPWeb5.4也有一个内置的>=服务器。因此，另一个选择是grunt-php而不是connect。

grunt-contrib connect和grunt-php都不会进行任何实时重新加载。实时重载都是通过grunt-contrib-watch处理的。配置livereload: true将在端口35729上启动一个在后台等待的服务器。

接下来，向您的<script src="//localhost:35729/livereload.js"></script>页面添加一个脚本标记: PHP。然后通过http://localhost:5000或您的站点所在的任何域/端口访问该页面。这将创建到实时重新加载服务器的web套接字。在更改文件时，监视任务将通知实时重新加载服务器，然后该服务器将通过web套接字通知您的浏览器。

如果您不想将脚本标记添加到页面，您可以安装浏览器扩展。有关更多信息，请参阅grunt-contrib watch任务文档：https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html