为livereload配置Gruntfile.js

时间:2014-01-19 20:47:50

标签: gruntjs grunt-contrib-watch

我正在使用Laravel作为我的后端框架,我希望在发生某些文件修改时进行实时重新加载。我仍然没有成功配置Gruntfile.js以使其工作。

我想,我应该需要2个插件,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将为我启动浏览器或者我必须手动打开浏览器和浏览器到指定的端口???

感谢。

1 个答案:

答案 0 :(得分:5)

connect是一个静态文件服务器。它不解析和提供PHP文件;只提供静态文件。您可以添加中间件来转换这些文件,因为它为它们提供服务,但如果使用PHP则不太可能。

可能你会使用nginx或apache作为你的服务器。 PHP> = 5.4也有内置的Web服务器。所以另一种选择是grunt-php而不是连接。

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

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

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